CSS Resources

Overview

You have covered most of the really basic stuff, now it’s time to take a deep dive into some CSS topics. Here’s a list of good articles and resources.

• Layout
• Transition
• Transform
• Animation
• Pseudo Classes
• Typography
• Responsive Web Design
• Architecture
• General Resources

Layout

At this point, you have a solid understanding of how to color, size and even transform the elements on your web page. However, you would probably like to position these elements next to each other? And get in control of where exactly they are laid out on the page? Luckily, CSS offers a variety of approaches to control the layout of elements on your page.

• learnlayout.com – The topic of layout is incredibly fun, but also takes more room to explain than this workshop can cover. If you are ready to dive into it and explore how to layout with CSS, we highly recommend this tutorial. It also comes in various languages!
• A Complete Guide to Flexbox from CSS-Tricks – You have already mastered the basics of CSS layout? You understand floats, position, and even looked into responsive web design? Once you are done with all that, you should check out a more recent, but already well-supported way to build complex yet flexible layouts: Flexbox.
• A Visual Guide to CSS3 Flexbox Properties – Another great resource to explore and and understand how to work with Flexbox.
• Flexbox.io by Wes Bos
• Grid by Example – If you are even more adventurous and want to check out the latest and still experimental way to layout in CSS, spend some time to explore the CSS Grid Layout Module. We recommend this excellent resource by Rachel Andrew.
• learncssgrid.com - A written tutorial and overview of CSS Grid properties with visuals.
• CSSGrid.io - by Wes Bos - 25 short Video tutorials to learn CSS Grid

Transition

• A gallery of transitions by Lea Verou
• Using CSS Transitions

Transform

• Transform live playground – a nice way to try out the most common transform functions.
• MDN: transform – explains the most common transform functions and the syntax.

Animation

• Keyframer by Alex Berg – a tool to produce animation keyframes.
• Putting Your UI in Motion with CSS by Val Head — An Event Apart Video.

Pseudo Classes

• Pseudo Class Selectors - Good overview of all the relevant pseudo classes that can spice up your site.

Typography

• How to Size Text in CSS – classic article on how to set your font sizes with ems that are relative values instead of px that are fixed.
• Font Sizing With REM – can be considered an update on the former link that gives another modern alternative for font sizing. Makes sense to read the former article first.
• Size Matters: Balancing Line Length And Font Size In Responsive Web Design

Responsive Web Design

• Responsive Web Design - The classic article defining what Responsive Web Design is and how you can adapt your site to any screen size.

Architecture

• cssguidelin.es – High-level advice and guidelines for writing sane, manageable, scalable CSS
• The 30 CSS Selectors you Must Memorize
• Why do browsers match CSS selectors from right to left

General Resources

• CSS Reference - Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
• MarkSheet - MarkSheet is a free HTML & CSS tutorial covering everything from explaining what a web browser is to how to make your website responsive. It is split up in different sections and chapters so you can easily skip on topics you are already familiar with.
• The official HTML5 Specification - Well, almost. But if they ever make an official specification of what HTML5 is, this is the W3C Candidate Recommendation. If you really want to know how something is defined, go here and read up.
• The official CSS3 stuff - Unlike HTML5, CSS3 is not defined in one big specification. It consists of a lot of puzzle pieces called modules that each define a specific subset of CSS properties. Again, don’t be afraid to have a look at this at some point (it’s ok if that point is somewhere in the future), even if it seems overly technical at first.
• Mozilla Developer Network CSS Portal
• caniuse – Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
• Search the CSS reference
• Search the HTML reference