Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

From Figma to code

Enroll for freeGet started!

Join 6407 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

This bootcamp includes

8+ hours of content - 100 lectures
Tons of interactive challenges
Certificate of completion
The course creator Gary Simon

with Gary Simon

Course level: Intermediate

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

What's inside

This course contains 45 interactive scrims spread across 5 modules.

two girls

You'll learn

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

You'll build

screenshot
A Simple Card

screenshot
A Simple Landing Page

screenshot
A Data Analytics Page

screenshot
A Car Sales Site

screenshot
A Drone Event Page

screenshot
A Drone Event Page

man

Prerequisites

Before taking this course, you should have a good grasp of HTML, CSS & JavaScript. Here are our suggested courses to get you up to speed:

Meet your teacher

The course creator

Gary Simon

Gary is one of YouTube's most popular coding teachers, with over 500.000 followers. He has created close to 100 courses, with topics raging from graphic design to advanced frontend development.

Follow me on twitter

Why this course rocks

From Figma to code is the perfect course for aspiring frontend developers who love a challenge and want to learn how to transform great-looking mockups into usable user interfaces.

During the course, you’ll test your HTML, CSS and JavaScript skills by building out five beautiful designs ranging from a simple card, a landing page, an analytics dashboard, a sales website and finally an animated event site.

This course aims to give you as much independent practice as possible. You’ll have access to detailed designs in Figma, which you’ll craft into user interfaces which look fantastic on a variety of screen sizes.

After you’ve built each project, UI expert and renowned web development educator Gary Simon will guide you through the code he would use to bring the mockup to life so you can compare it with your solution and pick up plenty of new tips and tricks.

A few more details on the designs you’ll bring to life throughout this course:

A Simple Card
The first challenge introduces you to Figma and recaps em and rem units before letting you loose with creating those pixel-perfect elements. Topics covered include CSS grid, SVGs as links, and media queries.

A Simple Landing Page
This challenge introduces a range of topics including creating a hero image, forms, and buttons, leaving you with a slick landing page that you can adapt for your own projects.

A Data Analytics Dashboard
In this project, we tackle elements such as animated nav bars, burger menus, more advanced backgrounds, gradients, and logos, allowing you to practice making a sleek, modern site.

A Car Sales Site
This massive project allows you to practice creating a sales site, including a search bar, like functionality, icons, and an animated dropdown.

Drone Event Landing Page
This mind-blowing project lets you show off everything you’ve learned so far, plus pick up some awesome skills you might not already know. As well as creating pro-looking animated elements, styling quotes, and advanced CSS grid practice, we’ll also create another stylish form and animated nav bar, to cement your knowledge from earlier in the course.

Get help and feedback
If you need help or would like feedback on your creations along the way, you can visit our dedicated Design Help Discord channel. Looking forward to seeing you there!

F to the A oracle to the Q
Is this a course about design?

This course focusses on rendering a range of high-quality designs in the browser. So while you won't be creating designs of your own, you will practice the skills you need to bring designs to life on screen.

Do the designs have real-world application?

Absolutely! All the designs are similar to those you find in real-life websites and applications, so they are excellent practice for a career in tech.