CSS for JavaScript Developers

Module 0

Fundamentals Recap

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.

Module 1

Rendering Logic I

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.

Module 2

Rendering Logic II

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.

Module 3

Modern Component Architecture

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.

Module 4

Flexbox

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.

Module 5

Responsive and Behavioural CSS

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.

Module 6

Typography and Images

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.

Module 7

CSS Grid

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.

Module 8

Animations

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.

Module 9

Little Big Details

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.