Skip to main content

Learn UI Design

The big UI design course on Scrimba, taught by Gary Simon: about 8.6 hours building beautiful, functional interfaces entirely in HTML and CSS.

Quick answer

Learn UI Design is a Pro-tier, intermediate course: roughly 8.6 hours across twelve modules and 102 lessons, taught by Gary Simon. It teaches you to design and build interfaces that look good and work well, all in HTML and CSS rather than a design tool. It is the deep version of Intro to UI Design Fundamentals, and the strongest option on the site for developers crossing into design.

Is it worth your time?

If you can build interfaces but they never quite look professional, this is aimed at you. It is long enough (8.6 hours) to go well past principles into the details that actually make UIs feel finished: shadows, gradients, forms, animation, and the refactoring discipline that turns a rough layout into a polished one. Teaching it all in HTML and CSS means everything transfers straight to the code you write, with no design tool to learn first, which is a real advantage for developers.

The honest caveat is that this is a design course, not a CSS course. It assumes you already write CSS comfortably and spends its time on design judgement instead. If your CSS is shaky, you will struggle with the build steps. And design is taste-driven and large; even at 8.6 hours this is one strong, opinionated path through it rather than the last word. Treat it as a serious foundation in developer-facing UI design, not a complete design education.

What you'll learn

Course curriculum

12 modules

  1. Course Introduction5 min
  2. UI Design Fundamentals72 min
  3. Building A Simple Layout37 min
  4. Responsive Design52 min
  5. Responsive Navigations35 min
  6. Full Project Refactoring44 min
  7. Tea UI Design Project46 min
  8. Shadows26 min
  9. Gradients30 min
  10. Forms52 min
  11. UI Animation32 min
  12. Final Project86 min

The course starts with fundamentals, then keeps alternating between technique and application. You build a layout, make it responsive, handle navigation, and refactor a full project, which is where a lot of the real learning happens. The later modules dig into the polish details one at a time (shadows, gradients, forms, animation) before a substantial final project ties everything together. The structure rewards working through it in order; each module assumes the one before.

Who it's for, and who should skip it

It fits developers who already write CSS and want to cross into design properly: people building portfolios, front-end developers who want their work to look professional, and anyone on the design side who learns by building. It is a strong fit for designers.

Skip it if your CSS is not yet solid (do Learn HTML and CSS or Learn Responsive Web Design first), or if you just want a quick taste, in which case the free Intro to UI Design Fundamentals is the lighter way in.

Prerequisites

Comfortable HTML and CSS, since the design work is built directly in code. No design tool or prior design experience required, though the free fundamentals intro is a useful warm-up.

Where it fits

This is the deep design course on the Frontend Developer Path and the Fullstack Developer Path, and it is especially relevant for designers. It is the full version of the free fundamentals intro; take that first if you are unsure.

Free or Pro

This is a Pro course, so it needs a Scrimba subscription. Pro also covers the career paths, challenges, certificates, and Discord. See current plans for what Pro costs in your region.

Strengths and limits

What it does well: it goes genuinely deep, it teaches design in the developer's own language of HTML and CSS, and it spends real time on the polish details most courses skip. The refactoring and project modules build practical judgement.

Where it is limited: it assumes solid CSS and is a long commitment. It is a design course, not a CSS one, and design being what it is, even 8.6 hours is one opinionated path rather than a complete education.

View Learn UI Design on Scrimba (opens in a new tab)