Part 1 - Build a Project from a Design File

Welcome to the 5th Academy Member Exclusive Workshop.

We are excited to welcome, Matt Studdert, who is the Founder of Frontend Mentor as the Instructor for this workshop where you will learn to translate an actual design file and implement it into code!

As a professional front-end developer, you'll be using design files all the time to help build out interfaces. Getting to know your way around design software and learning how to translate designs and implement them in code is a key skill. During this workshop, we'll be building out a project working with a design file as we go.

Matt will be teaching you by actually completing one of the challenges from Frontend Mentor. The challenge is to build out a social proof section of a website and get it looking as close to the design as possible.

Prerequisites: HTML and CSS

Challenge: Build out a social proof section of a website and get it looking as close to the design as possible

Objective: Get comfortable working with design tools and design files to build out web pages

Topics covered: What to expect from a designer, what design tools are most common, building a project using designs, the typical designer <> developer relationship

Feedback? You can provide feedback on this workshop here. The more feedback we receive, the better we can keep making these for you!

Getting Started:

  1. Download the zip file below which contains all the starter code and assets you'll need
  2. Get colors, fonts etc from the style-guide.md file
  3. Open the project in a text editor (preferably VS code)
  4. Start watching and coding along!

Timestamps:

00:00 - Introduction

02:51 - Reviewing the 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 handoff

21:44 - Planning our project

34:23 - Opening our project and taking a look around

43:13 - Getting started on the HTML

Bonus Resources:

  1. Figma
  2. Material Baseline Design Kit
  3. Sketch
  4. Adobe XD
  5. Storybook
  6. Zeplin
  7. Avocode
  8. Smashing Magazine - Everything Developers Need To Know About Figma
  9. Josh Comeau - Chasing the pixel-perfect dream


REMINDER: Please take 90 seconds to provide feedback here on this workshop so that we can keep making them better for you!