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.
