Multiple UI-focused projects and exercises (layouts, nav, forms, motion, final project)—all in HTML and CSS, suitable for portfolio screenshots and walkthroughs.

Learn UI design (HTML & CSS) on Scrimba

Name: Learn UI Design (HTML & CSS)
Availability: InStock

Quick answer: Your features work but the UI still looks amateur—and you want to fix that in code, not only in Figma. This Pro ~8.6-hour track with Gary Simon walks layouts, responsive nav, refactoring, projects, shadows, gradients, forms, motion, and a substantial final—all in HTML/CSS inside interactive scrims.

We may earn a commission if you join Scrimba through our links.

Last reviewed: March 2026.

This massive UI design course teaches you to build beautiful and well-functioning user interfaces using HTML and CSS. It's filled with interactive tutorials to ensure that the knowledge sticks with yo

Duration: 8.6 hrsLevel: Intermediate12 modules

View on Scrimba

About This Course

This Intermediate-level course covers 8.6 hrs of content across 45 interactive screencasts. A Scrimba Pro subscription is required for full access.

Duration: 8.6 hrs
Level: Intermediate
Access: Scrimba Pro required
Modules: 12
Total Lessons: 45

What Makes This Course Distinctive

This is Scrimba's full UI design program with Gary Simon: multiple projects, responsive navigation work, refactoring practice, and deep dives into shadows, gradients, forms, and UI animation before a substantial final project. Everything stays in HTML and CSS, which keeps deliverables aligned with what frontend interviews actually ask you to produce. Interactive lessons mean you adjust real markup and styles instead of only admiring finished mockups. The first module overlaps with UI Design Fundamentals in spirit, but this path adds breadth and sustained project work. Choose fundamentals if you need a quick Pro taste first. Skip this track if you refuse long coursework or only want utility-framework styling.

Module Breakdown

Module	Duration	Lessons
Course Introduction	5 min	0
UI Design Fundamentals	72 min	5
Building A Simple Layout	37 min	2
Responsive Design	52 min	2
Responsive Navigations	35 min	2
Full Project Refactoring	44 min	6
Tea UI Design Project	46 min	3
Shadows	26 min	3
Gradients	30 min	5
Forms	52 min	4
UI Animation	32 min	2
Final Project	86 min	11

Prerequisites

Basic knowledge of HTML and CSS is recommended before starting this course.

Who Is This Course For?

Best for: Intermediate developers who want portfolio-grade interfaces and structured practice across many UI topics.
Not ideal if: You only want a one-hour overview. Use UI Design Fundamentals first, or skip if you will not invest Pro time.

Part of These Learning Paths

Choose This If

You want the complete 8.6-hour UI journey with multiple projects and advanced topics, not an isolated mini course.
You can build features but your UI looks generic. This track forces repeated visual decisions in code.
You need strong UI samples for the Frontend Developer Path, product roles, or freelance clients who judge design quality.

Practice & Learn More

Is this UI design course free?

How long does it take?

What will I build?

Start Learn UI Design on Scrimba

Get UI design depth, Advanced React, and 86+ interactive courses with Pro.

Use our partner link to get 20% off the Pro plan.

Claim 20% Off Scrimba Pro