207 lines
9.1 KiB
HTML
207 lines
9.1 KiB
HTML
<h1 id="awesome-css-learning-awesome">Awesome CSS Learning <a
|
||
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a>
|
||
<a href="https://developer.mozilla.org/docs/Web/CSS"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg" width="125" align="right" alt="CSS Logo"></a></h1>
|
||
<blockquote>
|
||
<p>An awesome list limited to the best CSS learning resources</p>
|
||
</blockquote>
|
||
<p>This list is mainly about <a
|
||
href="https://developer.mozilla.org/docs/Web/CSS">CSS</a> – the language
|
||
and the modules. Not about naming conventions, architecture paradigms,
|
||
frameworks, pre-processors, post-processors, CSS-in-JS or other aspects
|
||
of todays CSS ecosystem.</p>
|
||
<p><em>Please read the <a href=".github/contributing.md">contribution
|
||
guidelines</a> before contributing.</em></p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#css-references">CSS References</a></li>
|
||
<li><a href="#css-in-a-nutshell">CSS in a nutshell</a></li>
|
||
<li><a href="#fundamental-concepts">Fundamental concepts</a></li>
|
||
<li><a href="#css-units">CSS units</a></li>
|
||
<li><a href="#selectors">Selectors</a></li>
|
||
<li><a href="#custom-properties-aka-css-variables">Custom properties
|
||
(aka CSS variables)</a></li>
|
||
<li><a href="#layout">Layout</a></li>
|
||
<li><a href="#animation">Animation</a></li>
|
||
<li><a href="#related">Related</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="css-references">CSS References</h2>
|
||
<ul>
|
||
<li><a href="https://tympanus.net/codrops/css_reference/">codrops</a> -
|
||
An extensive CSS reference offering way more content than <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">MDN</a>.</li>
|
||
<li><a href="https://caniuse.com">Can I use</a> - Interactive browser
|
||
support tables for CSS (and HTML5).</li>
|
||
</ul>
|
||
<h2 id="css-in-a-nutshell">CSS in a nutshell</h2>
|
||
<ul>
|
||
<li><a href="https://scrimba.com/g/gintrotocss">Introduction to CSS</a>
|
||
- This screencast series will teach you the basics of CSS in about one
|
||
hour.</li>
|
||
</ul>
|
||
<h2 id="fundamental-concepts">Fundamental concepts</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade">The
|
||
cascade</a> - This article explains what the cascade is and how this
|
||
affects you.</li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/">Specificity
|
||
and inheritance</a> - Understanding specificity and inheritance is
|
||
important to master CSS. This article will help.</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">CSS
|
||
Box Model</a> - An article explaining the foundation of layout on the
|
||
web.
|
||
<ul>
|
||
<li>Also have a look at the detailed information about the <a
|
||
href="https://css-tricks.com/box-sizing/">box-sizing</a> property.</li>
|
||
</ul></li>
|
||
<li><a href="https://web.dev/learn/design/">Responsive Design</a> -
|
||
Extensive information about all aspects of responsive design to make
|
||
sites that look great and work well for everyone.</li>
|
||
</ul>
|
||
<h2 id="css-units">CSS units</h2>
|
||
<ul>
|
||
<li><a href="https://css-tricks.com/the-lengths-of-css/">The Lengths of
|
||
CSS</a> - Overview covering absolute and relative units.</li>
|
||
<li><a href="https://css-tricks.com/fun-viewport-units/">Fun with
|
||
Viewport Units</a> - Imparts the basics and shows some nifty
|
||
use-cases.</li>
|
||
</ul>
|
||
<h2 id="selectors">Selectors</h2>
|
||
<ul>
|
||
<li><a href="https://www.sitepoint.com/css-selectors/">Basic CSS
|
||
Selectors</a> - An introduction to the very basic CSS selectors you need
|
||
to know.</li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/">Advanced
|
||
CSS Selectors</a> - Level up your knowledge. From attribute selectors to
|
||
CSS3 pseudo classes.</li>
|
||
<li><a href="https://flukeout.github.io">CSS Diner</a> - Learn how to
|
||
use CSS selectors with this fun little game.</li>
|
||
</ul>
|
||
<h2 id="custom-properties-aka-css-variables">Custom properties (aka CSS
|
||
variables)</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care">CSS
|
||
Variables: Why Should You Care?</a> - A short introduction to CSS
|
||
variables.</li>
|
||
<li><a href="https://una.im/local-css-vars/">Locally Scoped CSS
|
||
Variables: What, How, and Why</a> - Describes the advantages of locally
|
||
scoped CSS variables.</li>
|
||
<li><a
|
||
href="https://www.madebymike.com.au/writing/using-css-variables/">Using
|
||
CSS variables correctly</a> - Patterns and anti-patterns for using CSS
|
||
variables.</li>
|
||
<li><a
|
||
href="https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855">Everything
|
||
you need to know about CSS Variables</a> - In depth article going beyond
|
||
the basics of CSS Variables using real-world examples.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=4IRPxCMAIfA">Getting
|
||
Reactive with CSS</a> - Mindblowing talk about the possibilities of the
|
||
combination of CSS variables and functional reactive programming in
|
||
JavaScript.</li>
|
||
</ul>
|
||
<h2 id="layout">Layout</h2>
|
||
<ul>
|
||
<li><a href="http://book.mixu.net/css">Learn CSS Layout</a> - Learn
|
||
about CSS layout techniques in 5 chapters.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Layout
|
||
Land</a> - Jen Simmons video series about the new CSS Layout
|
||
possibilities.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=hj355PRbwSQ">Laying Out The
|
||
Future With Grid And Flexbox</a> - Introduction of a new layout system
|
||
encompassing Flexbox, CSS Grid and the Box Alignment Module.</li>
|
||
</ul>
|
||
<h3 id="classic-layouting">Classic layouting</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://tympanus.net/codrops/css_reference/float/">Floats</a> - In
|
||
depth information about how to use (and clear) floats.</li>
|
||
<li><a
|
||
href="https://scotch.io/bar-talk/5-things-you-might-not-know-about-the-css-positioning-types">Positioning
|
||
Types</a> - A closer look at a few little-known things related to the
|
||
CSS positioning layout method.</li>
|
||
<li><a
|
||
href="https://iamsteve.me/blog/entry/inline_block">inline-block</a> -
|
||
Shows in which cases it makes sense to use the display property
|
||
<code>inline-block</code> for layouting.</li>
|
||
</ul>
|
||
<h3 id="flexbox">Flexbox</h3>
|
||
<ul>
|
||
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A
|
||
Complete Guide to Flexbox</a> - All you need to know about Flexbox on
|
||
one page. <!--lint ignore no-dead-urls--></li>
|
||
<li><a href="https://codepen.io/enxaneta/full/adLPwv">Flexbox
|
||
playground</a> - Play with Flexbox examples on CodePen.</li>
|
||
<li><a href="http://www.flexboxdefense.com">Flexbox Defense</a> - A
|
||
tower defense game in the browser to learn about Flexbox with fun.</li>
|
||
<li><a href="https://flexboxfroggy.com">Flexbox Froggy</a> - Learn all
|
||
the basics of Flexbox with a fun game involving frogs and lily
|
||
pads.</li>
|
||
<li><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> -
|
||
Community-curated list of flexbox issues and cross-browser workarounds
|
||
for them.</li>
|
||
<li><a href="https://flexboxzombies.com">Flexbox Zombies</a> - A
|
||
training course driven by a storyline where you use Flexbox and a
|
||
crossbow to hunt zombies.</li>
|
||
<li><a href="https://flexbox.io/">What the Flexbox?</a> - A simple, free
|
||
20 video course that will help you master CSS Flexbox!</li>
|
||
</ul>
|
||
<h3 id="grid">Grid</h3>
|
||
<ul>
|
||
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">A
|
||
Complete Guide to Grid</a> - All you need to know about CSS Grid Layout
|
||
on one page.</li>
|
||
<li><a href="https://gridbyexample.com">Grid by Example</a> - Besides
|
||
examples of how to use Grid, this site also has additional useful
|
||
learning resources.</li>
|
||
<li><a
|
||
href="https://talks.jensimmons.com/J5VRbA/designing-with-grid">Designing
|
||
with Grid</a> - Talk about the new layout possibilities CSS Grid is
|
||
offering.</li>
|
||
<li><a href="https://cssgridgarden.com">Grid Garden</a> - Lovely game
|
||
where you write CSS code to grow your carrot garden.</li>
|
||
<li><a href="https://github.com/rachelandrew/gridbugs">GridBugs</a> -
|
||
Community-curated list of Grid interop issues and workarounds for
|
||
them.</li>
|
||
<li><a href="https://www.gridcritters.com">Grid Critters</a> - Learn CSS
|
||
grid layout by mastering an adventure game.</li>
|
||
<li><a href="https://cssgrid.io">CSS Grid</a> - Learn CSS grid with Wes
|
||
Bos - Free 4 hours video course, 25 Videos.</li>
|
||
</ul>
|
||
<h2 id="animation">Animation</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://robots.thoughtbot.com/transitions-and-transforms">CSS
|
||
Transitions and Transforms for Beginners</a> - An introduction to CSS
|
||
transitions and CSS (2D) transforms.</li>
|
||
<li><a
|
||
href="https://blog.alexmaccaw.com/all-you-need-to-know-about-css-transitions/">All
|
||
you need to know about CSS Transitions</a> - Also addressing advanced
|
||
topics from chaining and events to hardware acceleration and animation
|
||
functions.</li>
|
||
<li><a href="https://3dtransforms.desandro.com">CSS 3D transforms</a> -
|
||
Multi page tutorial with examples like card flip and carousel
|
||
effects.</li>
|
||
<li><a
|
||
href="https://robots.thoughtbot.com/css-animation-for-beginners">CSS
|
||
Animation for Beginners</a> - Imparts the concepts of CSS animations
|
||
with keyframes.</li>
|
||
<li><a href="http://leaverou.github.io/animatable/">animatable</a> -
|
||
Nice little page demonstrating which CSS properties are animatable.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="related">Related</h2>
|
||
<p><a
|
||
href="https://github.com/micromata/awesome-javascript-learning">Awesome
|
||
JavaScript Learning</a> - A tiny list limited to the best JavaScript
|
||
learning resources.</p>
|
||
<p><a
|
||
href="https://github.com/micromata/awesome-css-learning">csslearning.md
|
||
Github</a></p>
|