What You Should Know Now — and What's Next

What You Should Know Now

• How CSS rules, selectors, and declarations work, and how the cascade, specificity, and inheritance decide which value wins
• The box model, sizing, units, colors, typography, and backgrounds
• Layout with Flexbox, Grid, and positioning — and when to use each
• Responsive design with media queries, container queries, fluid units, and clamp()
• Custom properties and theming, including dark mode
• Pseudo-classes, pseudo-elements, :has(), nesting, and cascade layers
• Transforms, transitions, and animations — used responsibly
• Modern color with oklch(), color-mix(), and relative colors
• Architecture: BEM, utility-first CSS and Tailwind, and Sass
• Performance, accessibility, feature queries, and testing CSS

What Should You Learn Next?

• JavaScript — JavaScript adds behavior: toggling classes, animating with the Web Animations API, and building interactive components.
• HTML in depth — HTML semantics and accessibility are what your CSS styles; better markup makes simpler CSS.
• SVG — SVG graphics can be styled and animated with the CSS you already know.
• TypeScript and a framework — TypeScript with React, Vue, or Svelte, where CSS Modules, Tailwind, or scoped styles organize styling per component.

Build Something

Recreate the layout of a site you like from scratch — without copying its code — then make it responsive, themeable, and accessible. Publish it, test it on a real phone, and read the CSS of well-built sites in your browser's developer tools.