This content originally appeared on DEV Community and was authored by Benjamin Thorpe
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
Styles 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.
floatsare 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-contentoralign-items flex-direction
CSS Grid or Grid
They are 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-areasgrid-template-columns-
repeat(),minmax()and grid units - fractions (fr)
Responsive Web Design (RWD)
- media queries
- choose 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
This content originally appeared on DEV Community and was authored by Benjamin Thorpe
Benjamin Thorpe | Sciencx (2021-05-01T22:55:34+00:00) CSS roadmap – CSS Concepts you will use everyday.. Retrieved from https://www.scien.cx/2021/05/01/css-roadmap-css-concepts-you-will-use-everyday/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.