This is an opinionated collection of resources on how to start with CSS. It's mostly curated for folks new to CSS, but anyone can refresh their memory.
It consists of games, videos and articles split into 4 categories:
- basics - gives the idea of what CSS is, how to approach the learning process and covers some fundamental parts
- concepts - a more intermediate level resources that should be used as a reference for further learning
- useful resources and helpful tools - support for the previous categories
- CSS in 5 minutes (video) - really concise and basic overview of CSS.
- The CSS podcast - follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything.
- How To Learn CSS - You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS.
- Selectors:
- CSS Diner - a little game about all kinds of CSS selectors.
- Beginner Concepts: How CSS Selectors Work
- The CSS cascade - Or, How browsers resolve competing CSS styles (also touches on selectors and covers specificity).
- CSS positioning - an interactive article about CSS positioning.
- Flex:
- CSS Layout from Smashing Magazine - useful Flex resources.
- Flexbox froggy - a game where you help Froggy and friends by writing CSS code.
- Flexbox30 - learn Flexbox with 30 Code Tidbits.
- A Complete Guide to Flexbox
- CSS Flexbox: 5 Real World Use Cases
- Grid:
- CSS Layout from Smashing Magazine - useful Grid resources.
- Grid Garden - a game where you write CSS code to grow your carrot garden.
- A Complete Guide to Grid
- What does 100% mean in CSS?
- Spacing in CSS
- Overflow in CSS
- Colors in CSS
- Learn Z-Index Using a Visualization Tool
- An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements
- The complete guide to CSS media queries: CSS tricks article or Polypane article
- Centering in CSS: interactive tutorial from Ahmad Shadeed's or CSS Tricks article
- Hiding things in CSS: CSS tricks or Ahmad Shadeed's article
- CSS transitions
- CSS animation tutorial
- Styling The Good Ol' Button Element - how to create a custom button and covers all the edge cases. An amazing article in which you can get a felling on how to think when creating real-world components.
- Responsible Web Applications - "Any work you do now to ensure that your web application behaves responsively WILL be appreciated in the future."
- Can I use... - provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- Blogs
- A Complete Guide to CSS Concepts and Fundamentals
- CSS tips for new devs
- Web Design in 4 minutes
- Thinking like a frontend developer
- What Makes CSS Hard To Master
- Finding The Root Cause of a CSS Bug
- CSS specificity calculator - A visual way to understand CSS specificity.
- CSS selectors explained - Translate CSS selectors into plain English.
- :nth-tester - visual tool that helps better understanding nth-* css pseudoselectors.
- Layoutit - an interactive grid generator.
- Easing functions cheatsheet
- CSS Selectors cheatsheet (or Medium Source)