From Figma to Code

This course is perfect for aspiring frontend developers who love a challenge and want to learn how to transform great-looking mockups into usable user interfaces. Practice making high-quality mockups a reality in the browser with five stunning projects created by a UI expert and coded by you. 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. Each project increases in complexity, allowing you to gradually build your skills. 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 that 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. The projects include: A Simple Card (CSS Grid, SVGs, media queries), A Simple Landing Page (hero images, forms, buttons), A Data Analytics Dashboard (animated nav bars, burger menus, gradients), A Car Sales Site (search bars, like functionality, animated dropdowns), and a Drone Event Landing Page (animated elements, advanced CSS Grid, stylish forms). By the end of this course, you'll have mastered the workflow of turning professional Figma designs into pixel-perfect, responsive websites using modern HTML, CSS, and JavaScript techniques.