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.

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

• Welcome & First Project - Simple Card
• 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. Simple Card - Finishing Up
• 9. Deploying to Netlify
• Simple Landing Page
• 1. Challenge Intro
• 2. CSS: Initial Styles
• 3. CSS: Finishing Mobile Styles
• 4. CSS: Desktop Styles
• 5. A Note About Accessibility
• Data Analytics Dashboard
• 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
• 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
• 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