rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 23:13:11 +02:00
parent c9485bf576
commit 652812eed0
2354 changed files with 1266414 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
html/csslearning.md2.html Normal file
View File

@@ -0,0 +1,206 @@
<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>