Core Coursework
(take these in order)
- +
Editor's Notes
Use CSS to layout and visually style web pages so you’re websites aren’t just functional, but they look nice as well! 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. You'll even build a professional portfolio website by the end of the course!
- +
Editor's Notes
The most essential tools to bring your designs to life are modern CSS layout tools such as Flexbox and CSS Grid. 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 along with responsive images to build out real-world web layouts!- +
Editor's Notes
SVG is an amazing graphics format that can achieve many things beyond CSS. SVG Essentials & Animation, v2
Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!- +
Editor's Notes
Taking advantage of some of the newer CSS features can improve maintainability of your CSS and give your layouts more abilities! Advanced CSS Layouts
Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. Combined with CSS Calc & Custom Properties, they revolutionize the way we lay out web pages with CSS!- +
Editor's Notes
Create reusable components without any JavaScript dependencies needed – using only vanilla CSS! Dynamic CSS with Custom Properties (aka CSS Variables)
Create reusable components without any JavaScript dependencies needed – with only vanilla CSS! Learn how to leverage Custom Properties to improve code reuse, maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain JavaScript and violated the separation of concerns.
Elective Coursework
Design for Developers
Become self-sufficient for the entire process of execution from concept to design to implementation. You'll learn to execute the creation of complex and beautiful front-end experiences!CSS In-Depth, v2
Take a deep-dive into the essential features of CSS, while also exploring CSS features you probably didn’t even know existed!Design Systems with React & Storybook
Design components Figma, and then learn to code your components in React, and document them for your teams with Storybook.Sass Fundamentals
Leverage the Sass preprocessing to empower your CSS practices and master styling complex applications while keeping the styles readable and maintainable.Motion Design with CSS
Animation is crucial to developing interactive designs and interfaces, and CSS is one of the most performant ways to animate!Responsive Web Typography v2
Learn how to implement web fonts and create a modern, scalable typographic system to give the best reading experience for desktop and mobile devices!Scalable Modular Architecture for CSS (SMACSS)
Make your CSS more maintainable and modular using Jonathan Snook's Scalable Modular Architecture for CSS (SMACSS) methodology.
