Jen Kramer
AnnieCannons
0%
CSS Learning PathLearn 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.
Total time: 37 hours, 30 minutes
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
Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more!
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.
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.
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.
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.
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.
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!
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.
Elective Coursework
Optional, take in any order
Design for Developers
Become self-sufficient for the entire process from concept to design to implementation. Learn the creation & execution of complete front-end experiences!
SVG Essentials & Animation, v2
Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!
Tailwind CSS
Learn Tailwind CSS‘s utility-first approach for responsive, and customizable web designs. Master themes, layers, responsive breakpoints, dark mode, and more to create maintainable user interfaces!
Web Development Project: Personal Portfolio Website
Create a personal portfolio website from scratch using HTML and CSS. Master responsive design techniques, CSS layout tools, and best practices for showcasing your work across devices.
Sass Fundamentals
This Sass programming course will empower your CSS practices and help you master styling complex applications while keeping the styles readable and maintainable.
Design Systems with Storybook, v2
Learn to create scalable design systems with Storybook. Build reusable UI components, test components, implement dark mode, and generate comprehensive documentation.
Dynamic CSS with Custom Properties (aka CSS Variables)
Create reusable components without any JavaScript dependencies needed – with only vanilla CSS! Master CSS custom properties AKA CSS variables.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops