Build Websites with Figma, HTML, and CSS
Scrimba's roughly 3.6-hour Pro course, taught by Gary Simon: the design-to-code workflow, turning Figma mockups into working HTML and CSS sites across five projects.
Quick answer
Build Websites with Figma, HTML, and CSS is a Pro-tier, roughly 3.6-hour course taught by Gary Simon. You take Figma mockups and turn them into real, responsive HTML and CSS websites across five projects, from a simple card up to a multi-section landing page. It is squarely a design-to-code course, ideal for designers crossing into code and for developers who want a sharper eye for translating a design faithfully.
Build Websites with Figma, HTML, and CSS
ProTaught by Gary Simon (opens in a new tab)
Turn Figma mockups into real, responsive HTML and CSS websites across five hands-on projects.
View on Scrimba (opens in a new tab)Is it worth your time?
The strongest thing about this course is the workflow it teaches, not just the syntax. Reading a Figma file (spacing, type scale, components) and reproducing it accurately in HTML and CSS is a skill many developers fake and few do cleanly. Five projects of increasing complexity is enough repetition to build that muscle, and Gary Simon comes from a strong design background, so the eye he brings is the real value.
The honest caveat is that this is HTML and CSS only. It does not teach JavaScript or interactivity; the sites you build are static layouts, however polished. If you are looking to add behavior or build apps, this is a styling and layout course, and you will need JavaScript elsewhere. Judged as a design-to-code course, that is the right scope; just go in knowing it.
What you'll learn
Course curriculum
5 modules
- Welcome & First Project - Simple Card
- Simple Landing Page
- Data Analytics Dashboard
- Car Sales Site
- Drone Event Landing Page
The structure is five projects, each a complete build, climbing in difficulty. You start with a single card to learn the workflow, then move through a landing page, a dashboard, a sales site, and a longer drone event landing page that pulls everything together. Each one starts from a Figma mockup, so the through-line is translation: reading a design and reproducing its spacing, type, and layout in clean, responsive CSS.
Who it's for, and who should skip it
It fits designers moving into code, who already think in layouts and want to ship their own work, and frontend developers who want to translate mockups more faithfully. See the guide for designers for where it sits in a designer's path.
Skip it if you want JavaScript or interactivity; this is HTML and CSS only. Also skip it if you are an experienced frontend developer already fluent in turning designs into markup, since the projects would be repetition rather than growth.
Prerequisites
A basic grasp of HTML and CSS helps, though the course builds steadily, and some familiarity with Figma is useful since you read mockups throughout. No JavaScript is required, because none is taught here.
Where it fits
Build Websites with Figma, HTML, and CSS sits early on the Frontend Developer Path and the Fullstack Developer Path, in the layout-and-styling phase before JavaScript and frameworks enter the picture.
Free or Pro
This is a Pro course, so it requires a Scrimba subscription. Pro also covers the full career paths, the coding challenges, the Discord, and certificates. See current plans for what Pro includes in your region.
Strengths and limits
What it does well: five real projects, a genuine design-to-code workflow, and an instructor with a strong design eye. It is one of the better courses for learning to reproduce a mockup cleanly.
Where it is limited: it is HTML and CSS only, with no JavaScript or interactivity, so the sites are static; and like all Pro content, fast peer help depends on the Discord.
Related courses and comparisons
- Practical Math for Frontend Developers, the math behind precise layout
- Learn JavaScript, to add interactivity these sites lack
- Guide for designers, where this fits a designer's path
No. It is a Scrimba Pro course, so it requires a subscription. Pro also unlocks the career paths, certificates, and private Discord.
No. It is HTML and CSS only. You build polished, responsive static layouts from Figma mockups, but for interactivity you will need a JavaScript course.
Yes. It is one of the better picks for designers crossing into code, since the whole course is about reading a Figma design and reproducing it faithfully in markup.
Five projects of increasing complexity: a simple card, a landing page, a data analytics dashboard, a car sales site, and a longer drone event landing page.