CSS roadmap - CSS Concepts you will use everyday.

Hello Everyone!!
These are the CSS concepts I think everyone should know to be comfortable using and designing anything with CSS.

I will also leave links to some resources below.

Let's start with the basics (IMHO)

Formatting text

• changing text colors
• changing text size
• style a text (italic, bold, ...etc)
• spacing letters or words (letter-spacing & word-spacing)
• changing capitalization (uppercase, lowercase, small-caps...etc)

Changing lists

• removing bullet points
• changing the default bullet points
• using roman numbers in lists

Colors

• color specificity (very important to know)
• background and foreground color
• opacity

Backgrounds

• background images
• gradients
• clipping the background

You can also learn about Pseudo-Element/Class after background, or you can wait after the box model.

Now to the Advance Basics

Box Model

• padding, margin and border
• box shadows
• display types (inline, inline-block, block,...etc)
• block-level and inline elements

Positioning

Sites with only colors and good fonts, are great. But without positioning, they are terrible to the eyes.

• positions (absolute, relative, sticky, & fixed)
• floats
• normal flow of elements

Always try to use position no matter how small. floats are hardly used these days, they are dying if not already.)

Now to Intermediate

Flexbox

Learn how flex affects the container and children, when and how to use them efficiently.

• display: flex
• center text/elements with justify-content or align-items
• flex-direction

CSS Grid or Grid

Much harder to learn than Flexbox, but they can do what Flexbox does and more. Use both for their correct use.

• display: grid
• grid-gap
• grid-template-areas
• grid-template-columns
• repeat(), minmax() and grid units - fractions (fr)

Responsive Web Design (RWD)

• media queries
• choosing good break points

Transitions and Animations (the fun CSS)

• transform
• transitions
• translate
• skew
• keyframe animation

Conclusion

Everything else that comes after these are features to boost productivity and adds more cool features to your skills and designs. Like:

• imports, replacing images, feature detection,...etc

Feel free to add anything I might have missed, and please leave your comments below.

Resources

• CSS Tricks
• FreeCodeCamp CSS
• W3School
• Learn to code with me
• MDN Documentation

Comments

[Arvind Padmanabhan]

It's also good to know CSS design patterns that solve common problems of layout and box model: devopedia.org/css-design-patterns

[Benjamin Thorpe]

True, also thanks for the link, It is super helpful.