A comprehensive interactive course designed to change your relationship with CSS. We'll learn how the language really works, and empower you to build robust user interfaces.

Welcome! In this brief introduction, we'll learn how this course platform works, see how to get the most out of this course, and become acquainted with the community features.

Introduction

Course Structure

Notes

Community

Support

All of us have gaps in our knowledge. This lightning-quick review of the fundamentals will make sure we're all starting with the same rock-solid foundation.

Anatomy of a Style Rule

Media Queries

Selectors

Pseudo-classes

Pseudo-elements

Combinators

Exercises

Color

Units

Typography

Debugging in the Browser

Fundamentals Recap

Flow layout is the “OG” layout algorithm of the web, and it's still used heavily today. In this module, we explore how to best use Flow layout in modern times. We'll also deepen our understanding of common fundamentals like the Box Model.

Built-in Declarations and Inheritance

The Cascade

Block and Inline Directions

The Box Model

Padding

Border

Margin

Flow Layout

Width Algorithms

Height Algorithms

Margin Collapse

Rules of Margin Collapse

Will It Collapse?

Using Margin Effectively

Workshop: Agency page

Workshop Solution

Rendering Logic I

To understand CSS, we need to understand its systems. In this module, we dive deep into positioned layout to understand how containing blocks and stacking contexts work. We'll also learn about managing overflow and visibility.

Relative Positioning

Absolute Positioning

Centering Trick

Containing Blocks

Containing Puzzle

Stacking Contexts

Managing z-index

Portals

Fixed Positioning

Overflow

Scroll Containers

Horizontal Overflow

Positioned Layout

Sticky Positioning

Troubleshooting

Hidden Content

Workshop: Character Creator

Rendering Logic II

Over the past few years, an explosion of ideas and tools have made CSS much easier to work with at scale. In this module, we'll peek our head into this wild new world, and learn how to make the most of it.

Problems and Solutions

Ecosystem World Tour

styled-components 101

Installation and Setup

Performance

Global Styles

Dynamic Styles

Exercises (pt. 2)

Component Libraries

Breadcrumbs

Button

Dynamic tags

Escape Hatches

Single Source of Styles

In Summary

Workshop: Mini Component Library

ProgressBar

Select

IconInput

Modern Component Architecture

When it was released a decade ago, Flexbox revolutionized layout on the web. It gave us a cohesive system for distributing items along an axis. In this module, we'll learn how to build sophisticated, adaptive layouts using Flexbox.

Hello Flexbox!

Directions and Alignment

Alignment Tricks

Growing and Shrinking

The “flex” Shorthand

Constraints

Shorthand Gotchas

Wrapping

Groups and Gaps

Ordering

Interactive Review

Flexbox Interactions

Recipes

Workshop: Sole&Ankle

Flexbox

Modern web applications respond dynamically, contorting themselves to display well across an incredibly wide range of devices. In this module, we'll learn how to write CSS that responds and adapts to different situations.

Working with Mobile Devices

Mobile Testing

Other Queries

Breakpoints

CSS Variables

Variable Fragments

The Magic of Calc

Viewport Units

Clamping Values

Scrollburglars

Responsive Typography

Fluid Typography

Fluid Calculator

Fluid Design

Workshop

Responsive and Behavioural CSS

The two most important elements on the web are text and media. In this module, we'll learn how to tweak and optimize content so that it looks and works great.

Text Rendering

Text Overflow

Print-style Layouts

Masonry Grid with Columns

Text Styling

Font Stacks

Web Fonts

Font Loading UX

Font Optimization

Variable Fonts

Icons

Images

Fit and Position

Images and Flexbox

Aspect Ratio

Responsive Images

Background Images

Workshop: Unsprinkle

Typography and Images

CSS grid is a modern, revolutionary layout mode. It allows us to build rich, intricate, two-dimensional interfaces without a bunch of funky hacks. In this module, we'll take our standard "pop the hood" approach, learn how this layout mode works, and build some cool stuff with it.

Mental Model

Browser Support

Grid Flow and Layout Modes

Grid Construction

Alignment

Grid Areas

Tracks and Lines

Fluid Grids

Subgrid

Grid Dividers

Grid Recipes

Two-Line Center

Sticky Grids

Full Bleed Layouts

Managing Overflow

Grid Quirks

Workshop: New Grid Times

CSS Grid

The web is dynamic, and animations let us make that dynamism feel real and tangible and lush. In this module, we'll learn how to use CSS transitions and keyframe animations to create beautiful, well-designed, accessible animations that enhance the user experience of our applications.

Transforms

CSS Transitions

Keyframe Animations

Fill Modes

Dynamic Updates

With styled-components

Animation performance

Designing Animations

Action-Driven Animation

Orchestration

Accessibility

3D Transforms

Rendering Contexts

Gotchas

Animations

Now that we've gone over the fundamentals of layout, it's time to look at how to spruce up our interfaces! We'll cover cosmetic properties like shadows and gradients, and learn how to add small but powerful touches that help us create polished next-level user interfaces.

CSS for JavaScript Developers