TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
UI/UX Courses

Learn UI Design

ToIT ToIT
0 (0)
Duration

0m

Students

0

Level

Intermediate

Last Updated

November 10, 2024

Learn UI Design
  • Overview
  • Curriculum
  • Reviews

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.

  • 12 Sections
  • 98 Lessons
  • 0 Quizzes
  • 0m Duration
Expand All

Course Introduction

4 Lessons 0 Quizzes
  • Who I Am, What We’ll Learn & Prerequisites
  • Subjectivity vs. Objectivity
  • Tools to Use
  • Using Scrimba & Sharing Your Work

UI Design Fundamentals

15 Lessons 0 Quizzes
  • 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

Building A Simple Layout

7 Lessons 0 Quizzes
  • Building A Simple Layout – Intro
  • Keeping It Ultra Simple
  • Making Our Layout Dark
  • Challenge1
  • Multi-Columns
  • Working with Photographs
  • Final Chapter Lesson

Responsive Design

9 Lessons 0 Quizzes
  • 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

Responsive Navigations

8 Lessons 0 Quizzes
  • 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

Full Project Refactoring

7 Lessons 0 Quizzes
  • 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

Tea UI Design Project

9 Lessons 0 Quizzes
  • 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

Shadows

6 Lessons 0 Quizzes
  • 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

Gradients

6 Lessons 0 Quizzes
  • Introduction
  • Challenge 1: Basic Gradient
  • Challenge 2: Button Gradient
  • Challenge 3 Setup HTML & CSS
  • Challenge 3: Card Gradients
  • Challenge 4: Card Gradients (Light Variation)

Forms

7 Lessons 0 Quizzes
  • 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

UI Animation

5 Lessons 0 Quizzes
  • Introduction
  • Defining the HTML
  • Defining the Initial CSS for Mobile
  • Challenge 1: Responsive Design
  • Challenge 2: A Simple Hover

Final Project

15 Lessons 0 Quizzes
  • 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

0

0 Ratings
5 Star 0%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

Free

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

Course Includes

  • 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

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