TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
Intermediate
UI/UX Courses

Learn UI Design

Overview
Curriculum

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.

Curriculum

  • 12 Sections
  • 98 Lessons
  • 9h Duration
Expand All
Course Introduction
4 Lessons
  1. Who I Am, What We’ll Learn & Prerequisites
  2. Subjectivity vs. Objectivity
  3. Tools to Use
  4. Using Scrimba & Sharing Your Work
UI Design Fundamentals
15 Lessons
  1. Introduction
  2. White Space
  3. Alignment
  4. Frontend Career Path
  5. Design Challenge: 1
  6. Contrast
  7. Scale
  8. Design Challenge: 2
  9. Typography
  10. Color
  11. Design Challenge: 3
  12. Visual Hierarchy
  13. Design Challenge: 4
  14. The Final Challenge
  15. Wrapping Up
Building A Simple Layout
7 Lessons
  1. Building A Simple Layout – Intro
  2. Keeping It Ultra Simple
  3. Making Our Layout Dark
  4. Challenge1
  5. Multi-Columns
  6. Working with Photographs
  7. Final Chapter Lesson
Responsive Design
9 Lessons
  1. Introduction
  2. Defining the HTML
  3. Mobile First CSS (Part 1)
  4. Mobile First CSS (Part 2)
  5. Mobile First CSS (Part 3)
  6. Responsive Design (Part 1)
  7. Responsive Design Challenge 1
  8. Finishing Up
  9. Final Chapter Challenge
Responsive Navigations
8 Lessons
  1. Introduction to Responsive Navigations
  2. Writing the HTML
  3. Mobile CSS (Part 1)
  4. Mobile CSS (Part 2)
  5. Responsive CSS (Challenge 1)
  6. Making the Mobile Menu Work
  7. Animating the Mobile Menu
  8. Sub Menu Design Challenge
Full Project Refactoring
7 Lessons
  1. Project Refactoring: Introduction & Defining the HTML
  2. Fixing the Color & Contrast
  3. Fixing the Type & Visual Hierarchy
  4. Fixing White Space
  5. Initial Media Queries
  6. Tablet Media Queries
  7. Desktop Media Query
Tea UI Design Project
9 Lessons
  1. The TeaPlace Landing Page Challenge
  2. Defining the HTML
  3. Challenge 1: Mobile UI Design
  4. Challenge 1: My Solution (Mobile Header & Navigation)
  5. Challenge 1: My Solution (Completing the Mobile Design)
  6. Challenge 2: Tablet Challenge
  7. Challenge 2: My Solution
  8. Challenge 3: Desktop Design
  9. Challenge 3: My Solution
Shadows
6 Lessons
  1. Shadows 101
  2. Drop Shadow Playground Setup
  3. Challenge 1: Hard & Soft Drop Shadows
  4. Challenge 2: Using Shadows to Define Containers
  5. Challenge 3: Colored Shadows
  6. Quick Tip: Multi-Layered Shadows
Gradients
6 Lessons
  1. Introduction
  2. Challenge 1: Basic Gradient
  3. Challenge 2: Button Gradient
  4. Challenge 3 Setup HTML & CSS
  5. Challenge 3: Card Gradients
  6. Challenge 4: Card Gradients (Light Variation)
Forms
7 Lessons
  1. Forms 101
  2. HTML Form Setup
  3. CSS Form Setup (Progress Design)
  4. Challenge 1: Form Design CSS
  5. Challenge 2: Responsive Form Design
  6. Challenge 3: Radio Buttons
  7. Challenge 4: Checkboxes
UI Animation
5 Lessons
  1. Introduction
  2. Defining the HTML
  3. Defining the Initial CSS for Mobile
  4. Challenge 1: Responsive Design
  5. Challenge 2: A Simple Hover
Final Project
15 Lessons
  1. Project Introduction
  2. Defining the HTML
  3. Defining the HTML (Part 2)
  4. Defining the Navigation CSS
  5. Defining the Hero Section CSS (Part 1)
  6. Defining the Hero Section CSS (Part 2)
  7. Defining the Features Section
  8. Finishing the Mobile CSS
  9. Challenge: Small Tablet Responsive Design
  10. Challenge: Desktop Responsive Design
  11. Challenge: Testimonials on Desktop
  12. Defining the Sub Page HTML
  13. Challenge: Style the Sub Page
  14. Challenge: Animating the UI
  15. Bonus: Pattern Libraries, Style Guides & Design Systems 101

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Learn UI Design
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)
Choose Group(s)
Sync Group(s)
    Create a new group Go to Checkout