CSS Learning Path Learn CSS, from Laying Out Websites to Performant Animations

CSS is rich in capabilities and is more than simply laying out pages! Replace costly JavaScript with CSS.

Core Coursework

(take these in order)

  • +

    Editor's Notes

    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

    Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more!
    3 hours, 19 minutes CC
    Getting Started with CSS
  • +

    Editor's Notes

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

    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
    CSS Foundations
  • +

    Editor's Notes

    Essential tools for creating responsive designs are Flexbox and CSS Grid. Learn modern techniques and shortcuts for bringing designs to life.
  • CSS Grid & Flexbox for Responsive Layouts, v2

    Learn the essential CSS layout techniques for building responsive, beautiful websites. You'll use CSS Grid and Flexbox to build out real-world web layouts!
    5 hours, 49 minutes CC
    CSS Grid & Flexbox for Responsive Layouts, v2
  • +

    Editor's Notes

    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.
  • Practical CSS Layouts

    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
    Practical CSS Layouts
  • +

    Editor's Notes

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

    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
    CSS Animations and Transitions
  • +

    Editor's Notes

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

    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
    Intermediate HTML & CSS
  • +

    Editor's Notes

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

    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 minutes CC
    CSS Projects
  • +

    Editor's Notes

    You now have all the tools necessary to take on the most challenging CSS designs. Dig deeper into CSS and learn additional techniques with the optional courses below.

Elective Coursework