micromata/awesome-css-learning

Learn 23 days ago 2.2k

A tiny list limited to the best CSS Learning Resources

View byDAY/WEEK/README

View on Github

May 30th - Jun 5th, 2022

Layout

Grid

CSS Grid - Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos.

Mar 21st - Mar 27th, 2022

Layout

Grid

Grid by Example - Besides examples of how to use Grid, this site also has additional useful learning resources.

Selectors

Basic CSS Selectors - An introduction to the very basic CSS selectors you need to know.

CSS Diner - Learn how to use CSS selectors with this fun little game.

CSS in a nutshell

Introduction to CSS - This screencast series will teach you the basics of CSS in about one hour.

Animation

CSS Transitions and Transforms for Beginners - An introduction to CSS transitions and CSS (2D) transforms.

Apr 5th - Apr 11th, 2021

Animation

All you need to know about CSS Transitions - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.

Dec 9th - Dec 15th, 2019

Layout

Grid

Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.

Oct 1st - Oct 7th, 2018

Layout

Grid

Grid Critters - Learn CSS grid layout by mastering an adventure game.

May 28th - Jun 3rd, 2018

Layout

Grid

GridBugs stars1.2k - Community-curated list of Grid interop issues and workarounds for them.

May 7th - May 13th, 2018

Animation

CSS 3D transforms - Multi page tutorial with examples like card flip and carousel effects.

CSS Animation for Beginners - Imparts the concepts of CSS animations with keyframes.

animatable - Nice little page demonstrating which CSS properties are animatable.

Layout

Learn CSS Layout - Learn about CSS layout techniques in 5 chapters.

Laying Out The Future With Grid And Flexbox - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.

Layout

Grid

Grid Garden - Lovely game where you write CSS code to grow your carrot garden.

Fundamental concepts

The cascade - This article explains what the cascade is and how this affects you.

Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.

CSS Box Model - An article explaining the foundation of layout on the web.

Also have a look at the detailed information about the box-sizing property.

Custom properties (aka CSS variables)

CSS Variables: Why Should You Care? - A short introduction to CSS variables.

Locally Scoped CSS Variables: What, How, and Why - Describes the advantages of locally scoped CSS variables.

Using CSS variables correctly - Patterns and anti-patterns for using CSS variables.

Everything you need to know about CSS Variables - In depth article going beyond the basics of CSS Variables using real-world examples.

Getting Reactive with CSS - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.

Selectors

Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.

Layout

Classic layouting

Floats - In depth information about how to use (and clear) floats.

Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.

inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.

CSS References

Can I use - Interactive browser support tables for CSS (and HTML5).

Apr 30th - May 6th, 2018

CSS References

codrops - An extensive CSS reference offering way more content than MDN.

CSS units

The Lengths of CSS - Overview covering absolute and relative units.

Fun with Viewport Units - Imparts the basics and shows some nifty use-cases.

Layout

Layout Land - Jen Simmons video series about the new CSS Layout possibilities.

Layout

Flexbox

A Complete Guide to Flexbox - All you need to know about Flexbox on one page.

Layout

Grid

A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.

Last Checked At: 2022-06-24T18:33:14.915Z

micromata/awesome-javascript-learning

dend/awesome-product-management

About

Track your favorite github awesome repo, not just star it. trackawesomelist.com provides website, newsletter, RSS for tracking the popular awesome list by daily and weekly.

Track Awesome List

// Track it, not just star it.

Top 50 Awesome List

Recently Updated

Platforms

Programming Languages

Front-End Development

Back-End Development

Computer Science

Big Data

Theory

Books

Editors

Gaming

Development Environment

Entertainment

Databases

Media

Learn

Security

Content Management Systems

Hardware

Business

Work

Networking

Decentralized Systems

Higher Education

Events

Testing

Miscellaneous

Unmaintained

Top 50 Awesome List

Recently Updated

Platforms

Programming Languages

Front-End Development

Back-End Development

Computer Science

Big Data

Theory

Books

Editors

Gaming

Development Environment

Entertainment

Databases

Media

Learn

Security

Content Management Systems

Hardware

Business

Work

Networking

Decentralized Systems

Higher Education

Events

Testing

Miscellaneous

Unmaintained

micromata/awesome-css-learning

Layout

Grid

Mar 21st - Mar 27th, 2022

Layout

Grid

Selectors

CSS in a nutshell

Animation

Apr 5th - Apr 11th, 2021

Animation

Dec 9th - Dec 15th, 2019

Layout

Grid

Oct 1st - Oct 7th, 2018

Layout

Grid

May 28th - Jun 3rd, 2018

Layout

Grid