Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

From Figma to code

via Scrimba

Go to class Write review

Overview

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

Syllabus

  • 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

Reviews

Start your review of From Figma to code

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.