Intermediate
From Figma to Code
Practice making high-quality mockups a reality in the browser with five stunning projects created by a UI expert and coded by you.
Curriculum
- 5 Sections
- 44 Lessons
- 4h Duration
Welcome & First Project - Simple Card
8 Lessons
- Welcome & Course Introduction
- Using Figma
- Saving the Figma Prototypes Locally
- Ems and Rems
- Simple Card – Challenge Intro
- Simple Card – HTML
- Simple Card – CSS
- Deploying to Netlify
Simple Landing Page
5 Lessons
- Challenge Intro
- CSS: Initial Styles
- CSS: Finishing Mobile Styles
- CSS: Desktop Styles
- A Note About Accessibility
Data Analytics Dashboard
7 Lessons
- Data Analytics Dashboard – Challenge Intro
- HTML for Our Dashboard
- CSS: Initial Styles
- CSS: Typography, Buttons, and More
- CSS: Styling the Nav Bar
- JS: Adding Functionality to the Nav Bar
- CSS: Desktop Styles
Car Sales Site
9 Lessons
- Car Sales Site – Challenge Intro
- Initial HTML
- Finishing the HTML
- CSS: Initial Mobile Styles
- CSS: Finishing Up the Mobile Styles
- CSS: Styling the Dropdown Menu
- CSS/JS: Wiring Up the Options Panel
- Adding the Like Functionality
- CSS: Desktop Styles
Drone Event Landing Page
15 Lessons
- Drone Page – Challenge Intro
- Initial HTML
- Continuing the HTML
- Finishing Up the HTML
- Starting the CSS
- CSS: Hero Section
- CSS: Animating the Drone
- CSS: Mobile Navigation
- CSS: Styling the Quote Section
- Styling the Photo Gallery
- Finishing the Mobile CSS
- CSS: Starting the Responsive CSS
- CSS: Desktop Navigation Styling
- Finishing the Project
- Congratulations & Closing Thoughts
