cssdojo(re)learn CSS, the right way

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.

  1. Introduction to CSS and How the browser renders the page
  2. Selectors and Specificity
  3. CSS units and variables
  4. Styling text and custom fonts
  5. The Box Model
  6. The Flow layout (part 1) - the block and inline formatting contexts

Layouts

How to arrange the UI elements between each other.

  1. The Flow layout (part 2) - Overflowing content and floats
  2. The Flow layout (part 3) - Position and z-index
  3. The Flex layout
  4. The Grid layout
  5. The Table layout
  6. Media queries

Advanced CSS

Although this part will use some Javascript, no previous knowledge of frameworks such as React is required.

  1. Animations
  2. Styled Components (CSS in JS)
  3. How to organize your CSS
  4. Best practices and Stylelint
  5. How to choose your CSS tooling
  6. 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!

  1. Design a Link
  2. Design a Button
  3. Design a Table
  4. Design an Input
  5. Design Checkboxes/Radio buttons
  6. Design a Select
  7. Design a Dropdown Menu
  8. Design a Tooltip
  9. Design a Modal
  10. Design a Tab navigation system