From Figma to code is the ideal course for aspiring frontend developers seeking a challenge and eager to acquire the skills needed to translate visually appealing mockups into functional user interfaces. Throughout the program, you'll apply and enhance your HTML, CSS, and JavaScript proficiency by constructing five captivating designs – starting from a straightforward card and progressing to a landing page, an analytics dashboard, a sales website, and culminating in an animated event site.

Enroll in course

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

This course is designed to maximize your independent practice. You'll be provided with detailed Figma designs, enabling you to transform them into user interfaces that exhibit excellence across various screen sizes. Upon completing each project, Gary Simon, a UI expert and esteemed web development educator, will walk you through the code he employs to bring the mockup to life. This offers you the opportunity to compare your solution, gain valuable insights, and discover numerous tips and tricks along the way.

What you'll learn

- Create user interfaces from mockups.

- Create responsive layouts.

Syllabus

Welcome & First Project - Simple Card

Learn the basics of using Figma and how to translate a design into a web project as you build a simple card.

Simple Landing Page

With an emphasis on CSS you will work on the layout for a landing page that will look great on desktop and mobile.

Data Analytics Dashboard

Challenge yourself to create a data analytics dashboard using HTML and CSS.

Car Sales Site

Bring another Figma layout to life on the web, adding complexity and detail to desktop and mobile views.

Drone Event Landing Page

Build your most complex layout yet tying in all the concepts you've learned through the course.