Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Learn UI Design

Enroll for freeGet started!

Join 8195 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

This bootcamp includes

8+ hours of content - 100 lectures
Tons of interactive challenges
Certificate of completion
Subscribe now!
The course creator Gary Simon

with Gary Simon

Course level: Intermediate

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 you. Created by Gary Simon, the most popular online instructor on this subject.

What's inside

This course contains 98 interactive scrims spread across 12 modules.

two girls
Course Introduction

4 lessons 8 min

1. Who I am, What we'll Learn & Prerequisites
1:55
2. Subjectivity vs. Objectivity
1:30
3. Tools to Use
1:57
4. Using Scrimba & Sharing your Work
3:31
UI Design Fundamentals

15 lessons1 hour 7 min

1. Introduction
0:53
2. White Space
4:45
3. Alignment
3:06
4. Frontend Career Path
1:58
5. Design Challenge: 1
4:20
6. Contrast
4:26
7. Scale
4:29
8. Design Challenge: 2
7:14
9. Typography
6:12
10. Color
5:41
11. Design Challenge: 3
4:07
12. Visual Hierarchy
7:42
13. Design Challenge: 4
6:22
14. The Final Challenge
5:29
15. Wrapping Up
0:34
Building A Simple Layout

7 lessons 37 min

1. Building a simple layout - intro
1:19
2. Keeping it Ultra Simple
5:40
3. Making our Layout Dark
5:48
4. Challenge 1
6:36
5. Multi-Columns
4:35
6. Working with Photographs
5:32
7. Final Chapter Lesson
7:54
Responsive Design

9 lessons 52 min

1. Introduction
1:04
2. Defining the HTML
6:44
3. Mobile First CSS (Part 1)
7:08
4. Mobile First CSS (Part 2)
5:46
5. Mobile First CSS (Part 3)
5:35
6. Responsive Design (Part 1)
5:05
7. Responsive Design Challenge 1
6:49
8. Finishing Up
8:11
9. Final Chapter Challenge
6:21
Responsive Navigations

8 lessons 35 min

1. Introduction to responsive navigations
2:16
2. Writing the HTML
3:33
3. Mobile CSS (Part 1)
5:40
4. Mobile CSS (Part 2)
3:32
5. Responsive CSS (Challenge 1)
5:47
6. Making the Mobile Menu Work
4:06
7. Animating the Mobile Menu
2:25
8. Sub Menu Design Challenge
8:27
Full Project Refactoring

7 lessons 42 min

1. Project Refactoring: Introduction & Defining the HTML
6:07
2. Fixing the Color & Contrast
3:57
3. Fixing the Type & Visual Hierarchy
6:56
4. Fixing White Space
5:32
5. Initial Media Queries
6:14
6. Tablet Media Queries
4:55
7. Desktop Media Query
8:37
Tea UI Design Project

9 lessons 46 min

1. The TeaPlace landing page challenge
3:38
2. Defining the HTML
5:55
3. Challenge 1: Mobile UI Design
3:20
4. Challenge 1: My Solution (Mobile Header & Navigation)
8:24
5. Challenge 1: My Solution (Completing the Mobile Design)
9:24
6. Challenge 2: Tablet Challenge
2:07
7. Challenge 2: My Solution
5:04
8. Challenge 3: Desktop Design
1:41
9. Challenge 3: My Solution
6:56
Shadows

6 lessons 26 min

1. Shadows 101
1:44
2. Drop Shadow Playground Setup
4:48
3. Challenge 1: Hard & Soft Drop Shadows
6:41
4. Challenge 2: Using Shadows to Define Containers
5:00
5. Challenge 3: Colored Shadows
4:56
6. Quick Tip: Multi-Layered Shadows
2:50
Gradients

6 lessons 30 min

1. Introduction
1:20
2. Challenge 1: Basic Gradient
7:25
3. Challenge 2: Button Gradient
7:11
4. Challenge 3 Setup HTML & CSS
6:37
5. Challenge 3: Card Gradients
3:41
6. Challenge 4: Card Gradients (Light Variation)
3:46
Forms

7 lessons 52 min

1. Forms 101
2:54
2. HTML Form Setup
7:34
3. CSS Form Setup (Progress Design)
6:10
4. Challenge 1: Form Design CSS
10:13
5. Challenge 2: Responsive Form Design
5:55
6. Challenge 3: Radio Buttons
10:30
7. Challenge 4: Checkboxes
9:12
UI Animation

5 lessons 32 min

1. Introduction
1:56
2. Defining the HTML
4:25
3. Defining the Initial CSS for Mobile
8:29
4. Challenge 1: Responsive Design
11:05
5. Challenge 2: A Simple Hover
6:15
Final Project

15 lessons1 hour 26 min

1. Project Introduction
1:39
2. Defining the HTML
7:26
3. Defining the HTML (Part 2)
4:55
4. Defining the Navigation CSS
5:56
5. Defining the Hero Section CSS (Part 1)
6:39
6. Defining the Hero Section CSS (Part 2)
7:07
7. Defining the Features Section
3:49
8. Finishing the Mobile CSS
7:36
9. Challenge: Small Tablet Responsive Design
7:15
10. Challenge: Desktop Responsive Design
8:03
11. Challenge: Testimonials on Desktop
5:08
12. Defining the Sub Page HTML
5:11
13. Challenge: Style the Sub Page
7:48
14. Challenge: Animating the UI
4:55
15. Bonus: Pattern Libraries, Style Guides & Design Systems 101
2:40

You'll learn

UI design fundamentals

Build UIs from scratch

Refactor UIs

Responsiveness

Navigations

Forms

Shadow

Gradients

UI Animation

Colors

Contrast

White space

Typography

Alignment

Visual hierarchy

Scale

You'll build

screenshot
The Ultimate Tea webshop

You'll learn to build landing pages for e.g. physical products or web apps.

screenshot
Signup flow form

Build forms that guide and delight the user as opposed to frustrate them.

screenshot
Forest Vacation page

In the final project, you'll build a beautiful website for booking vacation experiences in the woods.

man

Prerequisites

Before taking this course, you should have a good grasp of HTML and CSS, as Gary will be teaching UI design concepts using these technologies. If you're not there yet, try this course:

Learn HTML and CSS
106 lessons | 5 hours 40 min
with Per Harald Borgen
Per Harald BorgenBeginner

Meet your teacher

The course creator

Gary Simon

Gary is one of YouTube's most popular coding teachers, with over 500.000 followers. He has created close to 100 courses, with topics raging from graphic design to advanced frontend development.

Follow me on twitter

Why this course rocks

While we can all clearly recognize what a great user interface looks like, it's actually really hard to build one!

That's exactly what this course is all about. In it, Gary Simon will turn you into a UI design master. He'll teach you UI design from the ground up, and give you the skills you need to make sure that your next project both looks good and feels good to use.



It starts from the very basics, so you don't need any UI design experience to join, just basic HTML and CSS skills.



 A world-class teacher


Gary is the most popular design and coding teacher on YouTube, with over 500,000 people following his channel DesignCourse. 



He has over 20 years of experience as a UI/UX designer and a frontend developer, so you can rest assured that you'll be in good hands.


This course is also a social experience. Gary will constantly encourage you to share the UI designs you create in Scrimba's Discord channel. 



We've created a dedicated channel for the course, so that you can get feedback from other students, and provide your own feedback as well.

Building great UIs is a skill that any front-end developer will benefit from. Whether you're in a team, working as a consultant, or just want to build your own projects, everyone needs good user interfaces. So what are you waiting for? 



Join the course today, and start your journey as a UI designer!

HomePlans & PricingTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba