From Figma to Code

0 (0)

Duration

4h

Students

0

Level

Intermediate

Last Updated

March 11, 2025

From Figma to Code

Overview
Curriculum
Reviews

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

5 Sections
44 Lessons
4h Duration

Expand All

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

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

View Figma designs
Use ems and rems
Structure HTML
Flexbox
CSS Grid
Responsive development
Animated navigations
Mobile-first development
Use SVGs
Media queries
Forms
Advanced backgrounds
Burger menus
Logos
Icons
Dropdowns
Like functionality
Complex grid layouts