Why CSS Sometimes Sucks
Can you predict with 100% confidence what will be the visual result of the following code?
CSS can be frustrating because it relies on rules and concepts we usually don’t learn and practice.
Not knowing those concepts makes CSS code unpredictable and it can annoy the hell out of anyone.
This website teaches you those concepts, allowing you to face any CSS issue with confidence. Straight to the point, information-packed katas (= exercises), will lay a strong theoretical base and put those new skills to practice with live code editors.
You want to improve your CSS skills? Read and practice the katas in order. 100% of the content is useful.
You want to master CSS? Try to explain every concept in this skills list to someone else. If you succeed in making it crystal clear, you truly have mastered CSS.
Basics
How to style the UI elements themselves.
Layouts
How to arrange the UI elements between each other.
- The Flow layout (part 2) - Overflowing content and floats
- The Flow layout (part 3) - Position and z-index
- The Flex layout
- The Grid layout
- The Table layout
- Media queries
Advanced CSS
Although this part will use some Javascript, no previous knowledge of frameworks such as React is required.
- Animations
- Styled Components (CSS in JS)
- How to organize your CSS
- Best practices and Stylelint
- How to choose your CSS tooling
- How to refactor legacy CSS
Your own design system
This part is more a sandbox to practice all the concepts that you learned in the previous parts. Keep doing the katas in order though!
- Design a Link
- Design a Button
- Design a Table
- Design an Input
- Design Checkboxes/Radio buttons
- Design a Select
- Design a Dropdown Menu
- Design a Tooltip
- Design a Modal
- Design a Tab navigation system