Design to Code Learning PathMake Your Designs Come to Life Through Code!
Learn UX principles and CSS coding techniques to take your designs to the finish line.
Core Coursework
Web UX Design for High Converting Websites
![Paul Boag](https://static.frontendmasters.com/assets/teachers/boag/thumb.webp)
Learn to make websites more engaging through good design, fascinating content, and solid UX in this course by Paul Boag.
![Web UX Design for High Converting Websites](https://static.frontendmasters.com/assets/courses/2021-11-23-ux-design-principles/thumb.webp)
Design for Developers
![Sarah Drasner](https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp)
Sarah Drasner
Become self-sufficient for the entire process from concept to design to implementation. Learn the creation & execution of complete front-end experiences!
![Design for Developers](https://static.frontendmasters.com/assets/courses/2019-01-13-design-for-developers/thumb.webp)
Getting Started with CSS
![Jen Kramer](https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp)
Jen Kramer
Get to know CSS in the right way without the fluff. You'll style text, build navigation bars, headers/footers, add icons, and more!
![Getting Started with CSS](https://static.frontendmasters.com/assets/courses/2021-12-14-getting-started-css/thumb.webp)
CSS Foundations
![Emma Bostian](https://static.frontendmasters.com/assets/teachers/bostian/thumb.webp)
Emma Bostian
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.
![CSS Foundations](https://static.frontendmasters.com/assets/courses/2023-08-30-css-foundations/thumb.webp)
CSS Grid & Flexbox for Responsive Layouts, v2
![Jen Kramer](https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp)
Jen Kramer
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!
![CSS Grid & Flexbox for Responsive Layouts, v2](https://static.frontendmasters.com/assets/courses/2021-10-26-css-grid-flexbox-v2/thumb.webp)
SVG Essentials & Animation, v2
![Sarah Drasner](https://static.frontendmasters.com/assets/teachers/drasner/thumb.webp)
Sarah Drasner
Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!
![SVG Essentials & Animation, v2](https://static.frontendmasters.com/assets/courses/2019-01-14-svg-essentials-animation/thumb.webp)
Practical CSS Layouts
![Jen Kramer](https://static.frontendmasters.com/assets/teachers/kramer/thumb.webp)
Jen Kramer
Learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists.
![Practical CSS Layouts](https://static.frontendmasters.com/assets/courses/2023-07-25-css-layouts/thumb.webp)
Elective Coursework
Mastering the Design Process
![Paul Boag](https://static.frontendmasters.com/assets/teachers/boag/thumb.webp)
Paul Boag
Learn a robust process to successfully take your design project from initial briefing to final delivery, avoiding common pitfalls like difficult stakeholders, scope creep, and iteration hell.
![Mastering the Design Process](https://static.frontendmasters.com/assets/courses/2022-07-29-design-process/thumb.webp)
Enterprise Design Systems Management
![Ben Callahan](https://static.frontendmasters.com/assets/teachers/callahan/thumb.webp)
Ben Callahan
This course provides leaders with strategies to develop and mature design systems, encompassing technical elements, stakeholder adoption, and organizational culture.
![Enterprise Design Systems Management](https://static.frontendmasters.com/assets/courses/2023-05-25-design-systems-management/thumb.webp)
Figma for Developers
![Steve Kinney](https://static.frontendmasters.com/assets/teachers/kinney/thumb.webp)
Steve Kinney
Learn Figma for creating user interface prototypes. Make shapes and frames that will hold the different pieces of the UI. You’ll also learn how to use reusable styles, typography, and components that you can use to create prototypes.
![Figma for Developers](https://static.frontendmasters.com/assets/courses/2022-04-26-figma/thumb.webp)
Data Visualization First Steps
![Anjana Vakil](https://static.frontendmasters.com/assets/teachers/vakil/thumb.webp)
Anjana Vakil
Friendly, high-level intro to basic concepts of data visualization using Observable plot.
![Data Visualization First Steps](https://static.frontendmasters.com/assets/courses/2022-06-07-data-visualization/thumb.webp)
HTML Email Development, v2
![Jason Rodriguez](https://static.frontendmasters.com/assets/teachers/rodriguez/thumb.webp)
Jason Rodriguez
Learn the foundations of HTML email development such as structure, semantic markup, layouts, and creating accessible email.
![HTML Email Development, v2](https://static.frontendmasters.com/assets/courses/2019-11-06-html-email-v2/thumb.webp)
Creative Coding with Canvas & WebGL
![Matt DesLauriers](https://static.frontendmasters.com/assets/teachers/deslauriers/thumb.webp)
Matt DesLauriers
You'll learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. Apply creative coding skills to real-world jobs.
![Creative Coding with Canvas & WebGL](https://static.frontendmasters.com/assets/courses/2018-12-11-canvas-webgl/thumb.webp)
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops