Design to Code Frontend Checklist: A Step-by-Step Guide

A design. A static picture. Let’s bring it to life and turn it into a webpage.

Where to begin? You know some HTML and CSS. Maybe you’ve done coding tasks in a course. Now, you’re moving on to create a real website that people can see online.

When I first tried this, it was not easy. It felt like I had to swim across a big, fast river after practicing in only a small pool. Many new things to discover! So, for people like you diving into this, I’ve listed every step to make it easy to follow.

This checklist is for everyone, whether you’re just starting or have done this before. Experienced devs can also check out a shorter version. Hope it helps you!

Part I. Take a deep breath

0. Do not panic or disperse. A brand-new project may look complicated, overwhelming, confronting you with a multitude of questions all at once. Resist the temptation to veer off or dig up into a safe tutorial. The checklist will guide you. Just focus on doing one step at a time, and you’ll arrive.

1. Select a code editor you will use. If you don’t have a code editor yet, you’ll simplify your coding journey by installing one. A common one is VS Code, though you can select any you like. Use online tutorials to guide you through the installation. If this is your first time using a code editor, use the basic built-in setup. At the most, you might want to install a Prettier extension: it will format your code nicely as you go.

Part II. Set up the workspace

2. Start by creating a new folder/directory for this project.

3. If you’re a new dev, create your folder structure. Inside your project folder create a folder for CSS files, another folder for images, and another one for fonts. And skip the rest of the step: you can do without it at this stage.

If you’re an experienced dev, view the details for the steps to do.
  • Open the project folder in your terminal.
  • Create your project. For example, if creating in Vite: npm create vite@latest.
  • Install relevant dependencies: npm install.
  • Install any additional dependencies you know you’ll need. Maybe linters to check your code for errors, or SASS: npm install -D sass.
  • Create/modify the folder structure: include src and/or assets folder, public or dist folder, etc. based on your preferred setup.
  • Create/copy a .gitignore file and specify what should be ignored by Git.
  • Set up version control: git init, git add . and then git commit -m "initial commit".
  • Create a new branch and switch to it to help with future collaboration.
  • Assign your upstream repository with git push -u origin <your branch name>.
  • Set up any needed editor configurations and preferences.

4. Create an empty index.html file in the root of your project folder. Create an empty style.css file inside your CSS sub-folder. Even if you have just one file CSS at the moment, it is a good practice to keep it inside a folder: as the project grows, you might end up with more files.

5. Open your index.html file in your code editor. Generate the boilerplate code for your HTML file (<!DOCTYPE html>, etc.). In VS Code and many other code editors, you can type an exclamation sign followed by a tab to generate this boilerplate code using the built-in extension called Emmet.

6. Replace the text in the <title> tag with the actual title of your document. You might want to add any other relevant meta tags, for example <meta name="description" content="Your description">.

7. Within the <head> section of your HTML file, add a <link> tag to connect your style.css file. Set the path based on your folder structure. Example: 

<link rel="stylesheet" href="css/style.css">.

8. Test to see if it works: put a simple rule into your CSS file, such as

body {
  background-color: green;
}

Then open the HTML file (for example, right-click on it and open it with a browser). You should see the page with the style you’ve assigned. If any problem, see if you’ve made a typo somewhere, maybe in the path to your CSS file or the filename. Once it works, congratulate yourself: your project is live!

9. Enable a preview of the document you’re creating. Opening your HTML file in a browser might not be good enough: you’ll need to manually reload it whenever you make changes. An alternative option is to use a Live Server extension in VS Code, which automatically updates the output when you make changes. Different ways to set up a preview are covered in a video on this subject.

Pro tip: a tool such as Vite includes a watch function that will update your project whenever you make any changes. 

Part III. Analyze

10. Examine the design and identify the macro-layout elements, such as the header, sections, aside, footer, etc. Look for potentially reusable components or patterns in the design. It’s helpful to visually represent your macro-layout by sketching it on paper. Determine the main page elements that will be used in your HTML and any repetitive blocks that can be coded once and reused.

11. Identify the requirements and constraints for your project. Read the instructions carefully or ask the person in charge. At least, find out if this website is going to be viewed primarily on mobile or desktop devices: this will tell you how to code it. The project might require you to integrate with the work of others, use a library, focus on accessibility, etc. You want to know the scope before you code away.

Part IV. Create the HTML markup

12. Implement the macro-layout in your HTML file by putting necessary tags for the header, main, sections, aside, footer, etc. Use tag names that are descriptive of their content: for example, use <section> or <figure> rather than a <div>. Consider including “container” divs where you know you’ll need them. If you have both desktop and mobile versions, write your HTML desktop-first, following the desktop layout. When you proceed to CSS later, you will determine if you want to write it mobile-first.

13. Copy and paste the text from the design file into your HTML. This is often done piece by piece using Ctrl+C (copy) and Ctrl+V (paste). If your design is in Figma, follow these steps: right-click, choose “select layer,” navigate to the text layer marked by the letter T, and then copy. Working in the view-only mode makes copying easier.

More details on how to copy from a Figma file

Two modes in Figma

Figma design may be available to you in two modes: view-only or full editing access. View-only mode is sufficient for most tasks you’ll need to accomplish. If you need full editing access, you can save the Figma file into your Drafts, allowing you to edit it without the fear of messing up the design. The location of commands in Figma may vary depending on the mode used. File editing commands are not available in view-only mode.

You can choose to install Figma on your local machine or use it online.  In my experience, a local copy of Figma might occasionally experience indefinite lag when opening a file, requiring a restart. On the other hand, the online version may take some time to load the design but will not hang indefinitely.

Figma Developer Handoff

More resources on writing HTML and CSS code based on a Figma file are available by searching for“Figma developer handoff”: that’s how Figma calls this process. A draft title for this checklist was “Figma developer handoff simplified for first-time users”. While this checklist does simplify Figma developer handoff, it is now broader than that.

Pro tip: Don’t spend much time learning your design program (Figma, Photoshop etc.) the way a designer would; you only need to know a few simple actions that you can rapidly get accustomed to. Sure you can learn it in detail, but don’t veer off from your coding task to learn Figma, like I did at first 😊

Pro tip: If you have a lot of text in the design file, you might use a plugin to export it, but more often than not, it’s simple enough to cut and paste. The section on Fonts below includes instructions on installing a Figma plugin.

14. Focus on your macro-layout. If the design includes many small details, for example in a <table> or a <form>, you might want to skip them for the moment and come back to them after you’ve got your macro-layout working in both HTML and CSS.

Part V. Start writing your CSS code

15. Position the preview of your file alongside the design file on your screen so you can see both simultaneously and check your output as you go.

16. Select the CSS naming methodology you’re going to use. Some programmers use one called BEM (Block, Element, Modifier). You can learn more about BEM in the video referenced here.

Whatever system you use, ensure that the class names are clear to a human (including your future self) who would read your code. For example, class name .h is not very descriptive, while class name .hero is. As part of your system, use mainly class names, rather than tag names or IDs, for your selectors. And don’t increase specificity unless you have to: for example, don’t use a complex selector like .main-form .top .name-input, use just .name-input or .form__name-input.

17. Write any needed CSS styles that apply to the entire document. The common points to consider at this stage are:

  • Set the body margin to 0, as the browser adds an automatic margin of 8px.
  • Create a .container style to define the max-width of your project and to center it.
  • Perhaps use CSS reset or normalize browser default styles if this is preferred by your team, but be aware that there are different perspectives on using CSS resets.
  • If relevant, set max width for images: 
img {
  max-width: 100%;  
}
html {
  box-sizing: border-box;  
}

*, *:before, *:after {
  box-sizing: inherit;
}
:root {
  --theme-color: #314f9b;
}

If you’re unfamiliar with custom properties, you can watch a video or skip them for now.

Part VI. Add the fonts

18. Identify which fonts the designer used by looking through your design file.

Pro tip: If the Figma design seems to have too many fonts, you can use a Figma extension like Font Fascia.

Steps to run Font Fascia or another Figma plugin
  1. If you have the file in a View Only mode, press a down arrow at the top center (after the file name) and select “Duplicate to your drafts.” The word “Drafts” should appear before the file name.   
  2. Open Figma and navigate to the file where you want to use the Font Fascia plugin. As above, it must be an editable copy of your file, not a View-Only version.
  3. Click on the “Plugins” tab in the main menu. The browser version of the Figma app might work faster than the desktop app.
  4. In the Plugins panel, click on the “Browse all plugins” button. This will open the Figma Community page where you can search for plugins.
  5. In the search bar on the Figma Community page, type “Font Fascia” and press Enter.
  6. Look for the “Font Fascia” plugin in the search results and click on it to open its page.
  7. On the plugin page, click on the “Install” button to add the Font Fascia plugin to your Figma account.
  8. Once the plugin is installed, you can access it by going back to the Figma app and clicking on the “Plugins” tab in the top menu bar.
  9. In the Plugins panel, you should now see the Font Fascia plugin listed. Click on it to open the plugin.
  10. The Font Fascia plugin will provide you with a list of font sizes used within the Figma file. You can select different text elements in your design to see the corresponding font sizes.

19. Connect the fonts. There are two main approaches: (1) Use Google Fonts or a similar font hosting service, or (2) download the fonts into your project and connect them from there. Detailed tutorials are available for both approaches. The first option is easier, while the second option provides better load performance.

If using Google Fonts, include the <link> element(s) under <head> in your HTML, above the link to your style.css file. The specific code to use is usually suggested by your font hosting service. In your CSS file, write something like: 

body {
  font-family: Roboto, sans-serif; 
}

If hosting the fonts from your project, you can use Google Fonts Helper. Select the “Modern Browser” option. Copy the @font-face CSS rule(s) into your CSS file, download the zip file with fonts and extract them into the Fonts folder. Make sure that the path to this folder inside the @font-face rule(s) is correct. After your @font-face rule(s) assign the font-familiy exactly the same as above.

A generic font (“sans-serif” in the above example) after the font name in your font-family property is required as a fallback.

Now check to see the new font in your preview!

Part VII. Export images from the design

Note: I found it best to deal with images section by section.

20. Conditional: if an image has rounded corners, or has overlying elements, or has opacity or such effects applied, remove these effects before download. You want to implement these effects in your CSS. For example, if you downloaded an image with the corners rounded at 50px and later your customer says that the corners should be rounded at 20px or 80px, you would have to newly download the image with all of its versions; but if you’ve downloaded the image as itself, with square corners, you can easily adjust CSS border-radius property at any time.

To download from Figma an image without corner-rounding applied, go to the editable Figma file and in the top part of it find the “corner radius” value. Then manually change it to 0 (perhaps in all 4 corners). This only works if you have edit access to the file. Then download the image without rounded corners.

Similarly, extract the images without opacity, overlays, or other effects. Refer to the instructions of Figma or Photoshop for details on how to do this.

21. Export any images from your design file. Use the following guidelines:  

  • Modify the images before export if needed (see below for details).
  • Export icons and simple drawings as SVG files. Export the other pictures as JPG or, where the images have transparency, PNG.
  • Export non-SVG images in at least 2 versions: 1X for the regular display and 2X for the Retina display. Some people also use 3X. If you have a mobile design then add the mobile versions of these images.
  • Optimize your images to improve page performance. There are lots of tools for this purpose; I have used Squoosh for JPG/PNG images and SvgOmg for SVG images. Simply drop your image on the browser page and then download an optimized version of it. Also, create WEBP or AVIF versions of non-SVG images. Squoosh can do it for you. (In my experience, small-size images don’t benefit from format conversion as much as larger-size images do.) 
  • Give each set of images a meaningful name and place it in your Images folder.
  • Ensure you get the favicon image among others.

Figma tip: The location of the Image Export section differs depending on your level of access to the file and the mode you’re using. Refer to the export instructions by Figma: https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma.

Part VIII. Implement images in your HTML and CSS

22. Decide where to implement the image: in HTML or CSS. If an image is purely presentational, such as a background, most commonly it is implemented through CSS. If the image is meaningful, like a logo, it is implemented through HTML. Ask yourself: “If I remove the picture, will the content still make sense?” If yes, then the image serves a decorative purpose and normally belongs in CSS.  

23. When implementing an image in HTML, use the following guidelines:

  • Set the “width” and “height” of the image so that the browser allocates enough space for it. Example: <img src="logo.svg" width="400" height="300" alt="Logo">. The size of the image is available in the “properties” of the file.
  • Always use the alt attribute with descriptive text for screen readers and search engines. If the image is purely decorative or its meaning is rendered by the text surrounding it, use an empty alt attribute. In any case, do not omit it. When there is no alt attribute, screen readers will read the file name and/or file path instead; this might confuse the end user. An empty alt attribute tells screen readers and other assistive technologies that the user can understand the content without being aware that the image exists.
  • If you have different versions of the image, use <picture> element with the srcset and sizes attributes as covered here: https://web.dev/learn/design/picture-element/.
  • For below-the-fold images add loading="lazy" attribute to improve page performance.
  • Use the <figure> and <figcaption> elements for better semantics, especially if the image has a caption.
  • Include a favicon image in the <head> section. Example: <link rel="icon" href="images/favicon.ico" type="image/x-icon"/>.

24. When implementing a background image through CSS, consider using image-set() to specify different versions of a large image. The example below includes providing fallbacks for browsers that do not support WEBP images:

background-image: image-set(
      url('/images/hero@1x.jpg') 1x,
      url('/images/hero@2x.jpg') 2x,
      url('/images/hero@3x.jpg') 3x,
      url('/images/hero@1x.webp') 1x,
      url('/images/hero@2x.webp') 2x,
      url('/images/hero@3x.webp') 3x
    );

25. Set responsive image properties in your CSS for all images. This may include max-width: 100%; background-size: cover, object-fit, etc.

Part VIX. Complete the section at hand

26. Start with a large page block. If you have earlier identified that your website is going to be viewed primarily on mobile devices, then follow a mobile-first approach in your CSS, creating the basic appearance of your page to fit a mobile device and then expanding it with media queries for larger screens.

27. Get the sizes, colors, etc. from your design file as you go along. Use max-width where you don’t want the text to become too wide on large screens.

Pro tip: When you copy CSS properties from Figma or Photoshop file, disregard the positioning or display properties such as position: absolute or display: flex or flex-shrink: 0. Use your own judgment to set these properties; a design file would not know which position or display property would work best in CSS.

Pro tip: the margin/padding sizes usually cannot be copied from the design file and need to be measured by hand.

28. Convert fixed sizes that you see in the design to relative sizes where applicable. Your knowledge of responsive design principles should guide you. You may use percentages or viewpoint width/height values, media queries, fluid font sizes (with relevant em/rem values for paddings and margins), etc.

If you are not familiar with this area as yet, be guided by the requirements of your project to see whether you can skip this step. Also, check out my article that covers the best resources to learn responsive design!

29. Compare your page output to the design as you go along. Check various screen widths using browser dev tools. Also, zoom in and out to see how your page behaves. Zooming in on my project sometimes surprises me 😃

30. Proceed to micro-layout once satisfied with a macro-layout of your page or section. Before coding each micro-layout, analyze it as you did with macro-layouts. Implement a micro-layout in HTML and CSS. Choose HTML tags that best represent the content, use responsive design and the other principles given in this checklist. Preview your micro-layout in different browsers.

Pro tip: Pay particular attention to a <form> in different browsers.

31. Take care of any buttons or links. Style the :hover, :focus, :focus-visible, and :active states for these elements. For example, you might change the opacity or text-decoration. Include an outline-color for the :focus-visible state. Ensure that the styles provide good contrast in the preview. Further, ensure that the buttons are large enough to be pressed easily; add padding where needed. The minimum recommended touch target size is 42px.

Part X. Final test

32. Preview your page with images and ensure everything displays correctly at different screen widths, zoom levels, and in different browsers. If your preview looks different than what you’d expect it to, use the browser’s Dev Tools to help spot the cause. Refer to the relevant tutorials, including the one on Chrome Dev Tools. You will soon see the page that displays the way you want to!

It seems like a lot of writing, but in reality, once you get familiar with it, this is easy. Just go step by step, and you will be rewarded with a beautiful, live page that you’ve created out of nothing!  

Please comment if there is anything to be added to or changed in this checklist. You are welcome to use it elsewhere, but please link to this page so I know that my work has found its users! If you need help with your first steps in front-end development, feel free to contact me with your questions.

Similar Posts

Responsive Web Design Explained: From Fixed Width to Fluid and Adaptive Layouts

Responsive Web Design Explained: From Fixed Width to Fluid and Adaptive Layouts

Responsive web design, a cornerstone of modern website development, emerged in 2011, revolutionizing the way websites are built. Join us as we explore its evolution through fixed, fluid, and adaptive layouts. Witness the transformative impact of responsive design as we compare modern websites to their historical counterparts. Explore the similarities and differences between these layout approaches and uncover the enhancements brought forth by responsive design.

Learning Responsive Design: The Missing Ingredient

Learning Responsive Design: The Missing Ingredient

So, you have a good handle on HTML and CSS, but when it comes to Responsive Design, things get a bit tricky. You struggle to make your designs truly responsive: elements overflow, images get distorted, and you can’t figure out why. Sounds familiar? That’s exactly where I was a few months ago. After wrestling with these challenges for a while, I realized it was time to find a course that would give me a solid foundation in Responsive Web Design. As it turned out, there was more to it than just one course… Read on for the full story!

Leave a Reply

Your email address will not be published. Required fields are marked *