CSS is a broad topic as the styling language is more complex than it appears at the surface. The more modern additions of grid, flexbox, and various animation tools (not to mention preprocessors!) has made the topic difficult to sum up in a guide such as this. That said, for this guide I have selected the courses, articles, and other resources that I've found most helpful or return to on a regular basis.
Basic Introductions
MDN: CSS: Cascading Style Sheets
The MDN guide is the defacto standards documentation for web developers.
The Odin Project Introduction to CSS
"Here we'll cover each of the foundational CSS concepts in greater depth than you probably have before."
"You've heard the buzz about the separation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place!"
"In this video we will cover everything you need to know to get up and running with CSS in only 20 minutes."
CSS Crash Course For Absolute Beginners
"In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc."
"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."
Flexbox
A list of the MDN guides and a useful syllabus for learning flexbox.
"A simple, free 20 video course that will help you master CSS Flexbox!"
"In this quick video we will go over the CSS Flexbox model."
Another brief course on flexbox
"Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!"
Grid
A series of guides and references for CSS Grid
"Learn CSS Grid with Wes Bos in 25 pretty good videos"
"In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments."
Learn CSS Grid in 5 minutes - A tutorial for beginners
"Grid layouts are fundamental to the design of websites, and the CSS Grid module is the most powerful and easiest tool for creating it."
Animation
The MDN resource guide on animations
"Welcome to our CSS Animation course curious CSS explorer!"
"CSS animation articles, tips and tutorials."
CSS3 Animation & Transitions Crash Course
"This is a beginner friendly crash course on CSS animation using keyframes as well as CSS transitions."
Organization
"Developer Ben Frain once remarked that it's easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem."
"A collection of styleguides or approach to CSS at different companies"
CSS Architecture: CSS File Organization
"Part of a good CSS architecture is file organization."
"Having the ability to write HTML and CSS with a solid understanding is a great expertise to have."
Preprocessors
The MDN glossary definition, with a few links to the most popular preprocessors.
An Introduction to CSS Pre-Processors: SASS, LESS and Stylus
"CSS Pre-processors are in our development life for years. In their first implementations, they had few features. But nowadays, they are the key ingredients and must have tools for CSS development."
A thorough overview of SCSS and Sass, arguably the most widespread preprocessor.
The Free Code Camp guide to preprocessors.
Additional Resources
This is probably the most premiere source for all things CSS.
"A collection of tips to help take your CSS skills pro"
"A free visual guide to CSS"
"Not the css specificity guide you deserve, but the one you need right now."
"If you find yourself wrestling with CSS layout, it's likely you're making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS."
Top comments (11)
Good job 😎
Man I love CSS!
Awesome definitely bookmarking this.
Yay! Glad it could be of use!
Thanks for sharing this! Definitely would help to improve my skilss :)
You're very welcome! Good luck!
good work !
Great compilation, thanks for sharing!
You're welcome!
Less and sass which is better
Thanks. Very Helpful.