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
oralign-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.
Top comments (2)
It's also good to know CSS design patterns that solve common problems of layout and box model: devopedia.org/css-design-patterns
True, also thanks for the link, It is super helpful.