The UI Design Bootcamp

Unlock CourseGet started!

Join 4427 other students

Log in to get

Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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 97 interactive screencasts 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

14 lessons - 1 hour

1. Introduction
0:53
2. White Space
4:45
3. Alignment
3:06
4. Design Challenge: 1
4:20
5. Contrast
4:26
6. Scale
4:29
7. Design Challenge: 2
7:14
8. Typography
6:12
9. Color
5:41
10. Design Challenge: 3
4:07
11. Visual Hierarchy
7:42
12. Design Challenge: 4
6:22
13. The Final Challenge
5:29
14. 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. 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 lessons - 35 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 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 lessons - 1 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!

Courses
All coursesThe Frontend Career Path

Not sure where to start?

Let us help you find your perfect course.
Go Pro!Log inLog in
Why Scrimba?
Courses
All coursesThe Frontend Career Path

Not sure where to start?

Let us help you find your perfect course.
PricingCreate AccountLog in
Go Pro!
Courses
All coursesThe Frontend Career Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardFind a courseSettingsNew scrim
Log out

HomePlans & PricingGift membershipFAQFrontend Developer Career Path

Community

Explore Discord & More PodcastsYouTube BlogCommunity Handbook

Courses

All courses Free coursesPro coursesLearn JavaScriptLearn React

Company

About usSupport chatWe are hiring!TermsPrivacy

Built with Imba