https://hugomencoboni.github.io/100DaysCSS/.
Make your own 100 days:
Use transform-style: preserve-3d; on container to preserve 3d transformations of children when container is also subject to 3d transformations.
Day 2 backface-visibility: hidden;
Use backface-visibility: hidden; when you want to hide the back face of a rotating element.
animation-delay: t.tts; can be usefull for creating trail effects.
transition: cssProp... ; is a simple way to handle animations when the cssProp changes by adding/removing classes, or when :hover is trigger or finish.
The declaration order of transform: transformation2 transformation1; matters and are applied from right to left!
For components with "boolean" states, you can hide an checkbox with display: none;. Add a label for this checkbox in sibling and add your visual inside this label! You can now trigger the checked animation using + or ~ selector with #checkboxId:checked ~ #labelId { ...
Use border property to create triangles.
Day 9 overflow: hidden; to create figures
Some figures (like this circle intersection) are easier to create with a container with overflow: hidden; and a child in absolute.
Some shapes are easier to create with clip-path property.
Use Sass rules like @for, random and others rules for factorisation and maintainability. Couple with Emmet, generate shapes with a lot of DOM elements are quicker to write.
Start your projects with the good defaults => https://hankchizljaw.com/wrote/a-modern-css-reset/