TOIT Training

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

From Figma to Code

Overview
Curriculum
  • 5 Sections
  • 44 Lessons
  • 4h Duration
Collapse All
Welcome & First Project - Simple Card
8 Lessons
  1. Welcome & Course Introduction
  2. Using Figma
  3. Saving the Figma Prototypes Locally
  4. Ems and Rems
  5. Simple Card – Challenge Intro
  6. Simple Card – HTML
  7. Simple Card – CSS
  8. Deploying to Netlify
Simple Landing Page
5 Lessons
  1. Challenge Intro
  2. CSS: Initial Styles
  3. CSS: Finishing Mobile Styles
  4. CSS: Desktop Styles
  5. A Note About Accessibility
Data Analytics Dashboard
7 Lessons
  1. Data Analytics Dashboard – Challenge Intro
  2. HTML for Our Dashboard
  3. CSS: Initial Styles
  4. CSS: Typography, Buttons, and More
  5. CSS: Styling the Nav Bar
  6. JS: Adding Functionality to the Nav Bar
  7. CSS: Desktop Styles
Car Sales Site
9 Lessons
  1. Car Sales Site – Challenge Intro
  2. Initial HTML
  3. Finishing the HTML
  4. CSS: Initial Mobile Styles
  5. CSS: Finishing Up the Mobile Styles
  6. CSS: Styling the Dropdown Menu
  7. CSS/JS: Wiring Up the Options Panel
  8. Adding the Like Functionality
  9. CSS: Desktop Styles
Drone Event Landing Page
15 Lessons
  1. Drone Page – Challenge Intro
  2. Initial HTML
  3. Continuing the HTML
  4. Finishing Up the HTML
  5. Starting the CSS
  6. CSS: Hero Section
  7. CSS: Animating the Drone
  8. CSS: Mobile Navigation
  9. CSS: Styling the Quote Section
  10. Styling the Photo Gallery
  11. Finishing the Mobile CSS
  12. CSS: Starting the Responsive CSS
  13. CSS: Desktop Navigation Styling
  14. Finishing the Project
  15. Congratulations & Closing Thoughts

Practice making high-quality mockups a reality in the browser with five stunning projects created by a UI expert and coded by you.

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: