TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
UI/UX Courses

From Figma to Code

ToIT ToIT
0 (0)
Duration

0m

Students

0

Level

Intermediate

Last Updated

November 10, 2024

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
  • 0 Quizzes
  • 0m Duration
Expand All

Welcome & First Project - Simple Card

8 Lessons 0 Quizzes
  • 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 0 Quizzes
  • Challenge Intro
  • CSS: Initial Styles
  • CSS: Finishing Mobile Styles
  • CSS: Desktop Styles
  • A Note About Accessibility

Data Analytics Dashboard

7 Lessons 0 Quizzes
  • 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 0 Quizzes
  • 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 0 Quizzes
  • 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

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

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

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:

Buy for group

From Figma to Code
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)
Choose Group(s)
Sync Group(s)
Create a new group Go to Checkout