Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn UI Design

via Scrimba

Go to class Write review

Overview

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.
  • 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

Syllabus

  • Course Introduction
    • 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
    • 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
    • 1. Building a simple layout - intro
    • 2. Keeping it Ultra Simple
    • 3. Making our Layout Dark
    • 4. Challenge 1
    • 5. Multi-Columns
    • 6. Working with Photographs
    • 7. Final Chapter Lesson
  • Responsive Design
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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

Reviews

Start your review of Learn UI Design

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.