Build Websites with Figma, HTML, CSS, and JavaScript. on Scrimba
Quick Answer: Pro, 3.6-hour Intermediate course. You translate Figma designs into HTML and CSS across multiple projects: cards, landing pages, dashboards, and marketing layouts. For developers who want designer-to-code workflow practice, not only generic CSS drills.
Last reviewed: March 2026.
Disclosure: ScrimbaGuide may earn a commission when you enroll or subscribe through links on this page. We still describe course limits honestly.
Build Websites with Figma, HTML, CSS, and JavaScript.
ProBuild Websites with Figma, HTML, and CSS
View on Scrimba (opens in a new tab)About This Course
Build Websites with Figma, HTML, and CSS
This Intermediate-level course covers 3.6 hrs of content across 7 interactive screencasts. A Scrimba Pro subscription is required for full access.
- Duration: 3.6 hrs
- Level: Intermediate
- Access: Scrimba Pro required
- Modules: 5
- Total Lessons: 7
What Makes This Course Distinctive
Each module is a different slice of product UI, so you repeat the skill of reading a layout spec and reproducing it faithfully in code. That is closer to day-job frontend work than abstract flexbox playgrounds. Interactive screencasts let you match spacing, typography, and component structure while the instructor narrates tradeoffs. The course sits on the Frontend Developer Path and Fullstack Developer Path because almost every fullstack role still demands solid markup and CSS. JavaScript depth is limited relative to the title; treat JS as supporting glue if it appears. You will still need real Figma access and patience for pixel-level iteration. Pair with Practice API Calls when you move on to data-driven pages.
Module Breakdown
| Module | Duration | Lessons |
|---|---|---|
| Welcome & First Project - Simple Card | 32 min | 1 |
| Simple Landing Page | 30 min | 2 |
| Data Analytics Dashboard | 44 min | 2 |
| Car Sales Site | 41 min | 1 |
| Drone Event Landing Page | 71 min | 1 |
What You'll Build
- Websites with Figma, HTML, and CSS
These hands-on projects reinforce what you learn and give you portfolio-ready work to show employers.
Prerequisites
Basic knowledge of HTML and CSS is recommended before starting this course.
Who Is This Course For?
Frontend learners who understand basics but choke on real designs, junior developers pairing with designers at work, and career switchers building a portfolio that looks intentional.
Not ideal if: You want a pure JavaScript algorithms track, or you refuse to work from visual specs and measurements.
Part of These Learning Paths
Choose This If
Choose this course if:
- You want multiple Figma-to-code projects with interactive coding instead of static assignments.
- You need structured practice before taking paid frontend work from design files.
- You are on a path that expects strong HTML and CSS before frameworks dominate your time.
Related Courses
Practice & Learn More
- Practice JavaScript Arrays
- Practice API Calls
- How Long Does It Take to Learn Coding?
- Scrimba vs Codecademy | All Comparisons
Related Pages
- Frontend Developer Path | Fullstack Developer Path
- Practice JavaScript Arrays | Practice API Calls
- JavaScript Courses
- All Courses
- Scrimba Pricing | Pro vs Free
- Scrimba Review 2026
This course requires a Scrimba Pro subscription. Pro gives you access to 86+ courses, a certificate of completion, and access to the Discord community. Check the pricing page for current rates.
The course contains 3.6 hrs of interactive screencasts. Since you can pause and code along at your own pace, most learners finish in a few days of regular practice.
You will build real projects including: Websites with Figma, HTML, and CSS. These projects teach you practical skills you can apply immediately.
Start Build Websites with Figma, HTML, CSS, and JavaScript.
Get access to Build Websites with Figma, HTML, CSS, and JavaScript. and 86+ more interactive courses with Scrimba Pro.
Use our partner link to get 20% off the Pro plan.