Learn Box Model

Use Firefox Dev Tools

Flexbox is Fantastic (single columns and rows)

Grid is Great (multiple columns and rows)

Clamp it down: Instead of media queries use functions like min max and clamp. This provides 90% code reduction- width: clamp(200px, 50%, 600px);

Bonus tip: use emoji characters as class names. Not sure of its a good idea. Maybe not try at your job.

Code a responsive image or video that maintains a certain aspects ratio (16×9). There’s a hack that uses 56.25% padding top and give the child absolute positioning. Now we have an aspect-ratio property you can set to 16/9 along with width: 100%

CSS variables defined on root selector.

Fancy calculations. CSS is not a programming language but you can run basic calculations using the calc function. Really cool that you can combine difference units to say subtract pixels from 100vh

Counter state. Keep track of a running state without running a line of JS. Number headings in html. Create a counter in your code in the root element (:root) counter-reset: headings; in h1 add counter-increment: headings; and in h1:before set content to counter(headings)

When building a drop down menu you probably think that JavaScript is involved to handle the open and close state of the menu but you can get pretty far with just plain CSS. Use the psuedo class of :focus-within stays active if the children has :focus

Outro tip: vendor prefixes aren’t going away but postCSS has a tool called auto-prefixer which adds all the vendor prefixes automatically.