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.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
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
01. Course Introduction
- Who I Am, What We’ll Learn & Prerequisites
- Subjectivity vs. Objectivity
- Tools to Use
- Using Scrimba & Sharing Your Work
02. UI Design Fundamentals
- Introduction
- White Space
- Alignment
- Frontend Career Path
- Design Challenge: 1
- Contrast
- Scale
- Design Challenge: 2
- Typography
- Color
- Design Challenge: 3
- Visual Hierarchy
- Design Challenge: 4
- The Final Challenge
- Wrapping Up
03. Building A Simple Layout
- Building A Simple Layout – Intro
- Keeping It Ultra Simple
- Making Our Layout Dark
- Challenge 1
- Multi-Columns
- Working with Photographs
- Final Chapter Lesson
04. Responsive Design
- Introduction
- Defining the HTML
- Mobile First CSS (Part 1)
- Mobile First CSS (Part 2)
- Mobile First CSS (Part 3)
- Responsive Design (Part 1)
- Responsive Design Challenge 1
- Finishing Up
- Final Chapter Challenge
05. Responsive Navigations
- Introduction to Responsive Navigations
- Writing the HTML
- Mobile CSS (Part 1)
- Mobile CSS (Part 2)
- Responsive CSS (Challenge 1)
- Making the Mobile Menu Work
- Animating the Mobile Menu
- Sub Menu Design Challenge
06. Full Project Refactoring
- Project Refactoring: Introduction & Defining the HTML
- Fixing the Color & Contrast
- Fixing the Type & Visual Hierarchy
- Fixing White Space
- Initial Media Queries
- Tablet Media Queries
- Desktop Media Query
07. Tea UI Design Project
- The TeaPlace Landing Page Challenge
- Defining the HTML
- Challenge 1: Mobile UI Design
- Challenge 1: My Solution (Mobile Header & Navigation)
- Challenge 1: My Solution (Completing the Mobile Design)
- Challenge 2: Tablet Challenge
- Challenge 2: My Solution
- Challenge 3: Desktop Design
- Challenge 3: My Solution
08. Shadows
- Shadows 101
- Drop Shadow Playground Setup
- Challenge 1: Hard & Soft Drop Shadows
- Challenge 2: Using Shadows to Define Containers
- Challenge 3: Colored Shadows
- Quick Tip: Multi-Layered Shadows
09. Gradients
- Introduction
- Challenge 1: Basic Gradient
- Challenge 2: Button Gradient
- Challenge 3 Setup HTML & CSS
- Challenge 3: Card Gradients
- Challenge 4: Card Gradients (Light Variation)
10. Forms
- Forms 101
- HTML Form Setup
- CSS Form Setup (Progress Design)
- Challenge 1: Form Design CSS
- Challenge 2: Responsive Form Design
- Challenge 3: Radio Buttons
- Challenge 4: Checkboxes
11. UI Animation
- Introduction
- Defining the HTML
- Defining the Initial CSS for Mobile
- Challenge 1: Responsive Design
- Challenge 2: A Simple Hover
12. Final Project
- Project Introduction
- Defining the HTML
- Defining the HTML (Part 2)
- Defining the Navigation CSS
- Defining the Hero Section CSS (Part 1)
- Defining the Hero Section CSS (Part 2)
- Defining the Features Section
- Finishing the Mobile CSS
- Challenge: Small Tablet Responsive Design
- Challenge: Desktop Responsive Design
- Challenge: Testimonials on Desktop
- Defining the Sub Page HTML
- Challenge: Style the Sub Page
- Challenge: Animating the UI
- Bonus: Pattern Libraries, Style Guides & Design Systems 101
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
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
COURSE OUTLINE
01. Course Introduction
- Who I Am, What We’ll Learn & Prerequisites
- Subjectivity vs. Objectivity
- Tools to Use
- Using Scrimba & Sharing Your Work
02. UI Design Fundamentals
- Introduction
- White Space
- Alignment
- Frontend Career Path
- Design Challenge: 1
- Contrast
- Scale
- Design Challenge: 2
- Typography
- Color
- Design Challenge: 3
- Visual Hierarchy
- Design Challenge: 4
- The Final Challenge
- Wrapping Up
03. Building A Simple Layout
- Building A Simple Layout – Intro
- Keeping It Ultra Simple
- Making Our Layout Dark
- Challenge 1
- Multi-Columns
- Working with Photographs
- Final Chapter Lesson
04. Responsive Design
- Introduction
- Defining the HTML
- Mobile First CSS (Part 1)
- Mobile First CSS (Part 2)
- Mobile First CSS (Part 3)
- Responsive Design (Part 1)
- Responsive Design Challenge 1
- Finishing Up
- Final Chapter Challenge
05. Responsive Navigations
- Introduction to Responsive Navigations
- Writing the HTML
- Mobile CSS (Part 1)
- Mobile CSS (Part 2)
- Responsive CSS (Challenge 1)
- Making the Mobile Menu Work
- Animating the Mobile Menu
- Sub Menu Design Challenge
06. Full Project Refactoring
- Project Refactoring: Introduction & Defining the HTML
- Fixing the Color & Contrast
- Fixing the Type & Visual Hierarchy
- Fixing White Space
- Initial Media Queries
- Tablet Media Queries
- Desktop Media Query
07. Tea UI Design Project
- The TeaPlace Landing Page Challenge
- Defining the HTML
- Challenge 1: Mobile UI Design
- Challenge 1: My Solution (Mobile Header & Navigation)
- Challenge 1: My Solution (Completing the Mobile Design)
- Challenge 2: Tablet Challenge
- Challenge 2: My Solution
- Challenge 3: Desktop Design
- Challenge 3: My Solution
08. Shadows
- Shadows 101
- Drop Shadow Playground Setup
- Challenge 1: Hard & Soft Drop Shadows
- Challenge 2: Using Shadows to Define Containers
- Challenge 3: Colored Shadows
- Quick Tip: Multi-Layered Shadows
09. Gradients
- Introduction
- Challenge 1: Basic Gradient
- Challenge 2: Button Gradient
- Challenge 3 Setup HTML & CSS
- Challenge 3: Card Gradients
- Challenge 4: Card Gradients (Light Variation)
10. Forms
- Forms 101
- HTML Form Setup
- CSS Form Setup (Progress Design)
- Challenge 1: Form Design CSS
- Challenge 2: Responsive Form Design
- Challenge 3: Radio Buttons
- Challenge 4: Checkboxes
11. UI Animation
- Introduction
- Defining the HTML
- Defining the Initial CSS for Mobile
- Challenge 1: Responsive Design
- Challenge 2: A Simple Hover
12. Final Project
- Project Introduction
- Defining the HTML
- Defining the HTML (Part 2)
- Defining the Navigation CSS
- Defining the Hero Section CSS (Part 1)
- Defining the Hero Section CSS (Part 2)
- Defining the Features Section
- Finishing the Mobile CSS
- Challenge: Small Tablet Responsive Design
- Challenge: Desktop Responsive Design
- Challenge: Testimonials on Desktop
- Defining the Sub Page HTML
- Challenge: Style the Sub Page
- Challenge: Animating the UI
- Bonus: Pattern Libraries, Style Guides & Design Systems 101
