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.
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.
Overview
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.
Taught by
Gary Simon