CSS materials
Last updated 1 month and 27 days ago - September 3, 2023
Free
Paid
Additional content
Tips compilations
- Fireship - 10 CSS Pro Tips - Code this, NOT that!
- Fireship - 3 More Life-Changing CSS Tips
- Defensive CSS - practical tips that helps in building “bullet-proof” UI interfaces
- CSS Reference - visual guide for the most popular properties
- CSS Tricks - My Dumbest CSS Mistakes
- Josh W. Comeau - Secret Mechanisms of CSS [learn the “hidden” fundamentals that nobody told you about.]
Takeaways from CSS for JavaScript Developers:
Flex Basis / Flex Grow / Flex Shrink 
Flex Shorthand 
Core concepts
- Writing CSS In 2023: Is It Any Different Than A Few Years Ago?
- Josh W. Comeau - The Surprising Truth About Pixels and Accessibility
- Josh W. Comeau - What The Heck, z-index?? [how to manage the positioning of elements]
Selectors
:has()
- Web Dev Simplified - learn about the :has selector
- Kevin Powell - :has() opens up new possibilities with CSS
- Kevin Powell - Exploring :has() and New CSS Possibilities
Responsive
- You Probably Don’t Need Media Queries Anymore - how to build truly dynamic responsive websites
- Web Dev Simplified - Top 10 Advanced CSS Responsive Design Concepts You Should Know
Layouts
- Utopia - learn fluid responsive design
- Web Dev Simplified - How To Create Skeleton Loading Animation With CSS
- Web Dev Simplified - How To Create Custom Scrollbar In CSS
- Web Dev Simplified - How To Create Advanced CSS Dropdown Menus
- Web Dev Simplified - How To Create Animated CSS Cards
- Web Dev Simplified - How To Create An Animated Image Carousel With CSS/JavaScript
- Web Dev Simplified - Create CSS Parallax
- Web Dev Simplified - Limit lines of text with CSS
- Web Dev Simplified - How To Create This Unbelievable CSS Scroll Animation
- Web Dev Simplified - CSS Anchor Is The Best New CSS Feature Since Flexbox
- Beyond Fireship - Subtle, yet Beautiful Scroll Animations
Common mistakes
- Web Dev Simplified - Are You Making These CSS Height Mistakes?
- Kevin Powell - CSS gap is NOT a replacement for margins
- Kevin Powell - Please NEVER do this in your CSS
- Kevin Powell - The problems with viewport units
- Kevin Powell - 5 common beginner CSS mistakes
- Kevin Powell - My dumbest CSS mistakes and how I debug them
Debugging
Other
- Going beyond CSS variables with custom properties
- Tailwind CSS vs Vanilla CSS + BEM - which approach is better?
- Josh W. Comeau - You Don’t Need A UI Framework (how to build ui without using the third-party component library?)
- Theo - ping.gg - Tailwind isn’t Bootstrap (a short video showing differences between CSS solutions)