Paul Boag
Boagworld
0%
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.
Total time: 40 hours, 10 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
Learn the principles of designing websites that get users to click without tricks or dark patterns!
Web UX Design for High Converting Websites
Learn to make websites more engaging through good design, fascinating content, and solid UX in this course by Paul Boag.
Editor's Note
Taking your code through the design process will give you more autonomy over your work!
Design for Developers
Sarah Drasner
Google
Become self-sufficient for the entire process from concept to design to implementation. Learn the creation & execution of complete front-end experiences!
Editor's Note
Build a portfolio project with CSS!
Getting Started with CSS
Jen Kramer
AnnieCannons
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
Dive deeper into modern layout techniques such as CSS Grid, Flexbox, Subgrid, Responsive Images and Container Queries to bring your designs to life.
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
Figma has become the de facto standard for designing websites and web apps and allows you to work more efficiently by bridging the gap between static designs and production-ready code.
Figma for Developers, v2
Steve Kinney
Temporal
Learn to use Figma's developer-friendly features like constraints, auto layout, component properties and CSS generation to efficiently build and translate designs to code. Bridge the gap between design and development.
Editor's Note
SVG is the most flexible and dynamic graphics format for the web!
SVG Essentials & Animation, v2
Sarah Drasner
Google
Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!
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
Optionally, you can go further with learning to plan the content of your website through content strategy or learn email design.
Elective Coursework
Optional, take in any order
Mastering the Design Process
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.
Enterprise Design Systems Management
This course provides leaders with strategies to develop and mature design systems, encompassing technical elements, stakeholder adoption, and organizational culture.
UX Research & User Testing
Learn to build features that your users actually want! Gather honest user feedback and data through audience segmentation, surveys, and running interviews.
The Product Design Process
Learn prototyping, user testing, MVP planning, and creating design systems. Apply interface design principles to build intuitive, user-centric applications.
Data Visualization First Steps
Friendly, high-level intro to basic concepts of data visualization using Observable plot.
HTML Email Development, v2
Learn the foundations of HTML email development such as structure, semantic markup, layouts, and creating accessible email.
Creative Coding with Canvas & WebGL
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.
What They're Saying
Just finished another section of the "Design to Code" path I'm taking on Frontend Masters 🥳 Topics talked about were layout, color theory, typography, images and performance. Great refresher that I didn't know I needed
Mery
merycodes
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops