Core Coursework

Take these in order

Prerequisite: There are no prerequisites for this learning path, but you should have some familiarity with computers and the Internet

Editor's Note

Without CSS, the internet would be a dull place to browse. Use CSS to add layout and visual style so your websites are functional and beautiful!

Getting Started with CSS, v2

Jen Kramer

AnnieCannons

Build a single-page portfolio with CSS! Learn responsive layout techniques and UI design fundamentals as you style navigation, project cards, images, and more. Give the portfolio extra polish with light and dark themes and deploy your portfolio to GitHub Pages.

3 hours, 2 minutes CC

Watch Free Preview Get Full Access

Editor's Note

Reinforce your CSS fundamentals and go beyond the basics by applying modern styling techniques to a variety of responsive layouts.

CSS Foundations

Emma Bostian

Spotify

Fast-track your CSS learning to build professional, responsive websites. Master core concepts and practical layouts with Flexbox and Grid through engaging hands-on exercises.

3 hours, 56 minutes CC

Watch Free Preview Get Full Access

Editor's Note

An essential part of building a website is laying out the design. Jen teaches you to modern techniques for implementing designs using CSS Grid, Flexbox, Subgrid, Container Queries, and responsive images.

Ultimate CSS Grid & Layout Techniques, v3

Jen Kramer

AnnieCannons

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.

6 hours, 21 minutes CC

Watch Free Preview Get Full Access

Ultimate CSS Grid & Layout Techniques, v3

Editor's Note

Put your CSS knowledge to practice building three variations of the same website. Each variation increases in complexity and allows you to think through a solution to each approach.

Professional CSS: Build a Website from Scratch

Kevin Powell

Kevin Powell Media Inc.

Use custom properties and the latest responsive design techniques to build and deploy a website from scratch!

9 hours, 4 minutes CC

Watch Free Preview Get Full Access

Professional CSS: Build a Website from Scratch

Editor's Note

Experience a professional workflow while building a website from scratch. Use custom properties to architect a scalable design, build advanced layouts, and deploy your site with a GitHub workflow.

Practical CSS Layouts

Jen Kramer

AnnieCannons

Learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists.

8 hours, 58 minutes CC

Watch Free Preview Get Full Access

Editor's Note

CSS Animations are incredibly powerful and a crucial part of web design. They communicate intent and provide added context.

CSS Animations and Transitions

David Khourshid

Microsoft

Learn CSS transitions, animations, custom properties, data attributes, choreography, animation states, layout animations, and reactive animations with a little bit of JavaScript.

4 hours, 14 minutes CC

Watch Free Preview Get Full Access

Editor's Note

Broaden your vocabulary with more HTML elements and CSS properties. Complex CSS selectors make your styles more resilient and reusable.

Intermediate HTML & CSS

Jen Kramer

AnnieCannons

Learn modern CSS selectors like :is(), :where(), and :has() and discover new HTML elements and CSS Selectors that you might not know!

5 hours, 37 minutes CC

Watch Free Preview Get Full Access

Editor's Note

Reinforce your CSS skills with this project-based course by coding five challenging layouts.

CSS Projects

Jen Kramer

AnnieCannons

Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques.

5 hours, 1 minute CC

Watch Free Preview Get Full Access