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 and size
styling text (italic, bold, capitalize, uppercase ...etc)
spacing letters or words (letter-spacing & word-spacing)

Lists

removing bullet points (list-style)
changing the default bullet points
using Roman or alphabetic numbers

Colors

color specificity (very important)
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 until after the box model.

Now to the Intermediate

Box Model

padding, margin and border
box shadows
display (inline, inline-block, block,...etc)

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 (learn them for legacy, but avoid using them)

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

Flexbox

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

center text/elements with justify-content or align-items
change the direction of flex children flex-direction

CSS 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 breakpoints
the new container queries

Transitions and Animations (the fun CSS)

transform & translate
transitions
skew
keyframe animations

Conclusion

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

imports, replacing images, CSS frameworks...etc

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

Sparrow