The UI Design Bootcamp

Unlock Course

Join 2607 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenges
Huge discord community
Exclusive chat access
Unlock Course
Subscribe now$39 $19 per month
51% limited-time offer
Get access to this course and ALL other Scrimba courses at a record-low price. Keep your discount for as long as you subscribe.
Career Path includes
75+ hours of content
100s of coding challenges
Exclusive Study Group access
HTML, CSS, JS & React
Getting Hired section
30-day money-back guarantee
This course is for pro members onlyUnlock CourseUnlock Course
The course creator Gary Simon

with Gary Simon

2607 students enrolled

Course level: Intermediate

This massive course teaches you to build beautiful and well-functioning UIs using HTML and CSS. It's filled with interactive challenges 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 100 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
15 lessons - 1 hour
1. Introduction
0:53
2. White Space
4:45
3. Alignment
3:06
4. Design Challenge: 1
4:20
5. A Short Message From Team Scrimba
2:58
6. Contrast
4:35
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. 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
7 lessons - 48 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:29
6. Challenge 3: Animating UI on Page Load
7:27
7. Animating with GreenSock Animation Platform (GSAP)
8:26
▼
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.

The course creator

Meet your teacher

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&coding techer 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!

Upgrade now - 50% offer
All courses|Sign in|Sign up
All courses
DashboardMy ProfileBillingNew scrim
Sign out
Discord Twitter YouTube GitHub
ResourcesDocsFAQTermsPrivacy
CoursesAll courses Intro coursesLearn JavaScriptLearn React
CompanyAbout usContact usSupport chatStart teaching
Built with Imba