Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
PricingCreate AccountLog in
Why Scrimba?
Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

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

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

Unlock CourseGet started!

Join 4908 other students

Log in to get

Access to 30+ free courses
Interactive hands-on content
Challenge weeks - code to win!
Join a friendly community
Unlock Course
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 screencasts spread across 12 modules.

two girls
Course Introduction

4 lessons8 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

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 lessons37 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 lessons52 min

1. Chapter Introduction (04)
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 lessons35 min

1. Introduction to responsive navigations
2:16
2. Writing the HTML (real)
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 lessons42 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 lessons46 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 lessons26 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 lessons30 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 lessons52 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 lessons32 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

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
Forest Vacation page

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

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.

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:

HTML & CSS crash course
31 lessons | 4 hours
with Kevin Powell
Kevin PowellBeginner

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!

And that's exactly what this bootcamp 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 in order 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 & PricingGift membershipFAQHire a React developer

Community

Explore the communityCommunity HandbookPodcastsYouTube Blog

Courses

All courses Free coursesPro coursesLearn JavaScriptLearn React

Company

About usSupport centerCareersTermsPrivacy

Built with Imba