A guide to basic CSS resources
Tags: css, beginners
Published: 2019-10-16 15:00:46

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](https://developer.mozilla.org/en-US/docs/Web/CSS) 

The MDN guide is the defacto standards documentation for web developers.

[The Odin Project Introduction to CSS](https://www.theodinproject.com/courses/html5-and-css3#css) 

"Here we'll cover each of the foundational CSS concepts in greater depth than you probably have before."

[CSS Basics](https://www.cssbasics.com/) 

"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!"

[Learn CSS in 20 Minutes](https://www.youtube.com/watch?v=1PnVor36\_40) 

"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](https://www.youtube.com/watch?v=yfoY53QXEnI) 

"In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc."

[How To Learn CSS](https://www.smashingmagazine.com/2019/01/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."

## Flexbox

[New flexbox guides on MDN](https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn/) 

A list of the MDN guides and a useful syllabus for learning flexbox.

[What the Flexbox?!](https://flexbox.io/) 

"A simple, free 20 video course that will help you master CSS Flexbox!"

[Flexbox CSS In 20 Minutes](https://www.youtube.com/watch?v=JJSoEo8JSnc) 

"In this quick video we will go over the CSS Flexbox model."

[Flexbox Fundamentals](https://egghead.io/courses/flexbox-fundamentals) 

Another brief course on flexbox

[Flexbox Froggy](https://flexboxfroggy.com/) 

"Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!"

## Grid

[MDN: CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Grid\_Layout) 

A series of guides and references for CSS Grid

[CSS GRID.](https://cssgrid.io/) 

"Learn CSS Grid with Wes Bos in 25 pretty good videos"

[CSS Grid Layout Crash Course](https://www.youtube.com/watch?v=jV8B24rSN5o) 

"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](https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/) 

"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

[MDN: Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Animations/Using\_CSS\_animations) 

The MDN resource guide on animations

[Hello, animation!](https://css-animations.io/) 

"Welcome to our CSS Animation course curious CSS explorer!"

[CSS Animation](https://cssanimation.rocks/) 

"CSS animation articles, tips and tutorials."

[CSS3 Animation & Transitions Crash Course](https://www.youtube.com/watch?v=zHUpx90NerM) 

"This is a beginner friendly crash course on CSS animation using keyframes as well as CSS transitions."

## Organization

[Methods to Organize CSS](https://css-tricks.com/methods-organize-css/) 

"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."

[CSS At \_\_](https://github.com/yuanchuan/CSS-at) 

"A collection of styleguides or approach to CSS at different companies"

[CSS Architecture: CSS File Organization](https://www.sitepoint.com/css-architecture-css-file-organization/) 

"Part of a good CSS architecture is file organization."

[Performance & Organization](https://learn.shayhowe.com/advanced-html-css/performance-organization/) 

"Having the ability to write HTML and CSS with a solid understanding is a great expertise to have."

## Preprocessors

[CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS\_preprocessor) 

The MDN glossary definition, with a few links to the most popular preprocessors.

[An Introduction to CSS Pre-Processors: SASS, LESS and Stylus](https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-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."

[SCSS & Sass](https://learn.shayhowe.com/advanced-html-css/preprocessors/#scss-sass) 

A thorough overview of SCSS and Sass, arguably the most widespread preprocessor.

[CSS Preprocessors](https://guide.freecodecamp.org/css/css-preprocessors/) 

The Free Code Camp guide to preprocessors.

## Additional Resources

[CSS Tricks](https://css-tricks.com) 

This is probably the most premiere source for all things CSS.

[CSS Protips](https://github.com/AllThingsSmitty/css-protips) 

"A collection of tips to help take your CSS skills pro"

[CSS Reference](https://cssreference.io/) 

"A free visual guide to CSS"

[Batificity](http://batificity.com/) 

"Not the css specificity guide you deserve, but the one you need right now."

[Relearn CSS layout](https://every-layout.dev/) 

"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."