Step 1: Learning general CSS
Learning the basics of CSS by doing a few hours of not-theme projects or tutorials first. This is because working from a clean slate of nothing is easier than trying to understand what other people have written. Once you have a decent grasp of what CSS is and how you could use it, you can head over to Step 2.
Tutorials
| Link | Description |
|---|---|
| Web Dev Simplified’s Learn CSS in 20 minutes | A video that gives you a speedy overview of CSS. |
| Mozilla’s CSS Basics | A document similar to the video above, being a quick overview of CSS. |
| Mozilla’s Get started with the web | The context for the above CSS tutorial. |
| w3schools’ CSS Tutorial | A longer practical-first guide. Includes exercises and quizzes. |
| Google’s Learn CSS | A longer theory-first guide. Includes exercises and quizzes. |
Useful reference material
Properties
| Link | Description |
|---|---|
| w3schools | Simple with some examples for basic usage. |
| Mozilla | Slightly more verbose, more precise explanations and comprehensive examples compared to w3schools. |
Other
| Link | Description |
|---|---|
| CSS-Tricks’ A Complete Guide to Flexbox | flex is incredibly useful for arranging content in a container without hardcoding sizes, but the property names are many and not particularly descriptive. This explains well what each property does. |
| CSS-Tricks’ A Complete Guide to CSS Grid | grid is the modern way to tile content, and this again helps with the terminology. |
| w3schools’ CSS Selector Reference | A list with examples of how to use every selector and selector combinator. |
| Chrome Developers’ DevTools CSS features reference | A guide for using DevTools effectively in Chrome/Chromium. |