DEV Community

loading...

A guide to basic CSS resources

jenniferlynparsons profile image Jennifer Lyn Parsons Originally published at aquantityofstuff.com ・4 min read

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

CSS Basics

"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

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

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

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

What the Flexbox?!

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

Flexbox CSS In 20 Minutes

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

Flexbox Fundamentals

Another brief course on flexbox

Flexbox Froggy

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

Grid

MDN: CSS Grid Layout

A series of guides and references for CSS Grid

CSS GRID.

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

CSS Grid Layout Crash Course

"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

MDN: Using CSS animations

The MDN resource guide on animations

Hello, animation!

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

CSS Animation

"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

Methods to 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 __

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

Performance & Organization

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

Preprocessors

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

"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

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

CSS Preprocessors

The Free Code Camp guide to preprocessors.

Additional Resources

CSS Tricks

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

CSS Protips

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

CSS Reference

"A free visual guide to CSS"

Batificity

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

Relearn CSS layout

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

Discussion (11)

pic
Editor guide
Collapse
steelvoltage profile image
Brian Barbour

Man I love CSS!

Collapse
giandodev profile image
GiandoDev

Good job 😎

Collapse
missadev profile image
Missael

Thanks for sharing this! Definitely would help to improve my skilss :)

Collapse
jenniferlynparsons profile image
Jennifer Lyn Parsons Author

You're very welcome! Good luck!

Collapse
hibritusta profile image
Hibrit Usta

good work !

Collapse
jess profile image
Jess Lee (she/her)

Great compilation, thanks for sharing!

Collapse
jenniferlynparsons profile image
Collapse
weptim profile image
WEPUKHULU TIMOTHY • Edited

Less and sass which is better

Collapse
paddyh4 profile image
Pradeep Chavan

Thanks. Very Helpful.

Collapse
garrett profile image
Garrett

Awesome definitely bookmarking this.

Collapse
jenniferlynparsons profile image
Jennifer Lyn Parsons Author

Yay! Glad it could be of use!