Figma File to Code. The Designer to Developer Handoff w/ Frontend Mentor Founder [HTML+CSS Tutorial]
Need to practice your HTML and CSS? Want to learn how to turn a Figma design file into actual code? Want to understand the designer to developer handoff process? Want to add a social proof section to your website? Matt Studdert, founder of www.frontendmentor.io walks you through a coding challenge to help you become a better developer.
This is Part 1 (of 3) of the Mastering the Designer to Developer Handoff: Build a Project from a Design File workshop on the Zero To Mastery Academy.
Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, Facebook, Shopify + other top tech companies. Here's just a few of them: https://zerotomastery.io/testimonials
This could be you 👆
==========
👩🎓 Join here to take the full workshop: https://zerotomastery.io/academy
👍 Subscribe for free tutorials and exclusive content: https://links.zerotomastery.io/youtube
==========
Zero To Mastery Guest Instructor, Matt Studdert (the handsome guy talking in the video 🙋♂️!) spent the first 5 years of his career in the health & fitness industry before learning how to code back in 2014.
Matt is now a Lead Instructor at General Assembly teaching Frontend Web Development and is the Founder of Frontend Mentor which aims to help people improve their front-end coding skills by building projects in a real-life workflow.
In this workshop, Matt walks you through a frontend coding challenge where you will build out a social proof section of a website and get it looking as close to the design as possible.
You will learn how to take designs from tools like Figma / Sketch and turn them into HTML & CSS code which is a key skill for developers.
00:00 - Introduction
02:51 - Reviewing the Figma design file
05:25 - Reviewing a typical professional website design file
09:53 - Reviewing a Material Design component library
13:23 - Looking at other design tools, like Sketch
15:47 - An overview of common tools used in the designer to developer handoff
21:44 - Planning our project
34:23 - Opening our project and taking a look around
43:13 - Getting started on the HTML
==========
💥 Who is this workshop for?
◾ You want to work become a more efficient developer that can earn more clients and a higher salary
◾ Anyone who wants to practice and improve their coding skills and become a better developer
◾ Anyone who wants to learn how to take design files from a designer and turn them into actual HTML and CSS code
◾ You want to add a social proof or testimonial section to your website using HTML and CSS
==========
🆓 Bonus Resource: Learn to code for free, and get hired in 5 months! 💻 [FULL GUIDE]
The viral step-by-step guide, written by Andrei Neagoie, gives you the exact steps on how to become a Web Developer from scratch, for free. 1,000s of students have followed the steps in this guide and got hired in under 5 months.
https://zerotomastery.io/blog/learn-t...
#zerotomastery