Best way to master CSS,🔥

The CSS tree 👇
|
|── Text Styles
| |── color
| |── font
| | ├── font-family
| | ├── font-size
| | └── font-weight
| |── text-align
| |── text-decoration
| | ├── underline
| | └── line-through
| |── line-height
| └-─ letter-spacing
|
|── Box Model
| |── width
| |── height
| |── margin
| | ├── margin-top
| | ├── margin-right
| | ├── margin-bottom
| | └── margin-left
| |
| |── padding
| | ├── padding-top
| | ├── padding-right
| | ├── padding-bottom
| | └── padding-left
| |
| └-─ border
| |── border-width
| | |── border-top-width
| | |── border-right-width
| | |── border-bottom-width
| | └── border-left-width
| |── border-color
| | ├── border-top-color
| | ├── border-right-color
| | ├── border-bottom-color
| | └── border-left-color
| └── border-radius
| ├── border-top-left-radius
| ├── border-top-right-radius
| ├── border-bottom-left-radius
| └── border-bottom-right-radius
|
|── Positioning
| ├── position
| ├── top
| ├── right
| ├── bottom
| └── left
|
|── Layout
| ├── display
| ├── visibility
| ├── float
| └── clear
|
|── Flexbox
| ├── flex
| ├── flex-direction
| ├── flex-wrap
| ├── justify-content
| └── align-items
|
|── Grid Layout
| ├── grid-template-columns
| ├── grid-template-rows
| ├── grid-column
| ├── grid-row
| ├── grid-column-gap
| └── grid-row-gap
|
|── Colors and Background
| ├── background-color
| ├── background-image
| ├── background-repeat
| ├── background-position
| ├── background-size
| ├── color
| └── opacity
|
|── Transitions and Animations
| |── transition
| | ├── transition-property
| | ├── transition-duration
| | ├── transition-timing-function
| | └── transition-delay
| └── animation
| ├── animation-name
| ├── animation-duration
| ├── animation-timing-function
| ├── animation-delay
| ├── animation-iteration-count
| ├── animation-direction
| ├── animation-fill-mode
| └── animation-play-state
|
|___ Others
|── z-index
|── box-sizing
|── overflow
| ├── overflow-x
| └── overflow-y
|── cursor
└── box-shadow

-------------------- END --------------------

DSA roadmap

The best data structure & algorithms (DSA) roadmap for beginner devs:

Complexity
↓
Arrays
↓
Linked List
↓
Queues
↓
Tree
↓
Sorting
↓
Graph
↓
Leetcode

4 ways to Center a div using CSS 🔥

Read this

1️⃣Using Flexbox

2️⃣Using Grid

3️⃣Using position and margin property

4️⃣Using position and transform property

For questions here is the Chat group link
https://t.me/+2KE896TMwHkxOWE1

For Resources aka PDfs and Ebooks group link

https://t.me/+eweUkdFwlho4YjRl

Join Python Channel
https://t.me/python_assets

HTML tip:

Use the popover global attribute to make any element a popover.

This way you can make dialogs, toasts, toggle elements, etc.

Books and other copyrighted material will be published in resources group. So make sure to join that.

For questions here is the Chat group link
https://t.me/+2KE896TMwHkxOWE1

For Resources aka PDfs and Ebooks group link

https://t.me/+eweUkdFwlho4YjRl

Join Python Channel
https://t.me/python_assets

JavaScript Tip

Scroll to Top of the Page

Instant navigate to the top of a webpage with CSS smooth scroll behavior for creating some animation.

#Meme 😄 🤣

HTML & CSS in 30 Days Plan:

Week 1: Introduction and Basics

Day 1: 🌐 Introduction to Web Dev
Day 2: 📚 Learn the Basics of HTML
Day 3: 🏗️ Structure a Web Page with HTML
Day 4: 🎨 Introduction to CSS
Day 5: 🖌️ Styling HTML with CSS
Day 6: 📖 CSS Layouts and Positioning
Day 7: 🔄 Review & Practice Exercises

Week 2: Dive Deeper into HTML and CSS

Day 8: 📑 Advanced HTML Tags
Day 9: 🎒 Forms and Tables in HTML
Day 10: 🍱 CSS Box Model & Flexbox
Day 11: 🌈 Advanced CSS Styling
Day 12: 📱 Responsive Web Design Basics
Day 13: 🛠️ Build a Responsive Website
Day 14: 🔄 Review and Debug