Design-to-Code Frontend Checklist

A design. A static picture. Let’s breathe life into it and transform it into a webpage. This checklist guides you through every step of the way.

🚀 Who Would Benefit

Anyone looking to transform a design into code.

Even a seasoned dev might slip and forget a detail or two if they don’t create a new webpage every other day. Just open this checklist and let it guide you.

🏗️ Helping a New Dev

If someone is crafting their very first webpage, direct them to the more detailed explanations of each step in my blog.

⚙️ Usage

This checklist is designed to give common actions for creating any webpage. While it covers the essentials, your frontend project may have more specific requirements on top of that. This checklist doesn't delve into every detail but rather serves as a universal starting point.

For more specialized checklists, you might want to explore resources like Front-End Performance Checklist or Front-End Design Checklist.

🟩 Why This Checklist

I used to work in book production QA. We were big on making sure each person on the line had a checklist and followed it. This eliminated 90% of QA issues.

So when I transitioned into web development, I looked for a checklist like this and did not find one. So I created it myself. I hope it proves as helpful to you as it has been for me.

🌟 Please star the repo if you like it, so I know that my work has found its users!

💬 Contact

Please leave a comment on the unabridged version of this checklist on my blog or use the contact information in my profile.

👏 Contributing

Found an issue or have a suggestion? Open an issue, and let's make this checklist even better together!

If you'd like to make any additions, corrections, or improvements, please fork the repo, create a new branch for your changes, and submit a pull request to the main branch.

---

The Checklist

I. Take a deep breath.

0. Do not panic. The checklist will guide you even if the project seems complex. Just focus on doing one step at a time, and you’ll arrive.

1. Select a code editor you will use for this project.

II. Set up the workspace

2. Choose a name for this project.

3. If you are a new dev, follow the beginner-friendly version. Otherwise do this:

• Open the project's parent folder in your terminal.
• Create your project. In this checklist we will use Vite: npm create vite@latest. (Or you can use another npm create command.)
• If prompted "Need to install the following packages:... Ok to proceed?", press Enter.
• When prompted for "Project name," enter the project name you've selected for this project.
• If prompted for "Package name," you may accept the suggested value by pressing Enter.
• When prompted "Select a framework," use arrow keys to select one and press Enter. If no framework, select "Vanilla": this means that regular JavaScript will be used. (If your terminal program does not recognize arrow keys, switch you another terminal.)
• When prompted "Select a variant", use arrow keys to select one and press Enter. Select JavaScript if you don't know TypeScript.
• Navigate into the new project with cd <your new project name> and install relevant dependencies: npm install.
• Install any additional dependencies you know you’ll need. Maybe linters or SASS: npm install -D eslint, npm install -D sass.
• Create/modify the folder structure if needed: include src and/or assets folder, public or dist folder, etc. based on your preferred setup.
• Set up any needed editor configurations and preferences (perhaps .prettierrc.json, etc.).
• Create/copy a .gitignore file and specify what should be ignored by Git.
• Set up version control: git init git add . git commit -m "initial commit"
• Assign your upstream repository with git remote add origin <your repo path>, git push -u origin main. Replace main with your branch name if different.
• Create a new branch for development and switch to it: git checkout -b <branch-name>.

4. Review the files in your folder, locate index.html and style.css files that would've been generated by npm create.

5. Run npm run dev. The terminal should give you a url, for example: http://localhost:5173/. Copy and paste it in your browser. You should see a default page that npm create has set up for you. (Now the terminal is busy serving your page; if you need to do something else in it, use a new terminal window.)

6. Open your index.html file in your code editor. Replace the text in the <title> tag with the actual title of your document. Add any other relevant meta tags, for example <meta name="description" content="Your description">.

7. Make sure your style.css file is linked. If no framework, put it in the <head> section of your HTML file. Example: <link rel="stylesheet" href="css/style.css">. For a framework, you will most likely have the boilerplate code that you'd want to replace.

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

body {
    background-color: green;
}

Then the browser should automatically update (if using Vite), and 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. If not using Vite, enable a preview of the document you're creating. Many tools include a watch function that will update your project whenever you make any changes. Or you might use a Live Server extension in VS Code.

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. It's helpful to visually represent your macro-layout by sketching it on paper.

11. Identify the requirements and constraints for your project. At least, find out if this website is going to be viewed primarily on mobile or desktop devices. Add any needed steps to this checklist based on your specific requirements: maybe you need to focus on accessibility, integration, etc.

IV. Create the HTML markup

Note: The following steps of the checklist may be done by sections of your design. That is, you code one section as below, then the next section, etc.

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, follow the desktop layout in the HTML.

13. Copy and paste the text from your design file into your HTML.

14. Focus on the 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.

V. Create the first part of the CSS code

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

16. Select the CSS naming methodology or library you’re going to use. (Maybe BEM or something else.)

17. Write any initial 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.
• Create any needed custom properties in the root, for example for the theme-color:

:root {
  --theme-color: #314f9b;
}

• Perhaps use CSS reset or normalize browser default styles if this is preferred by your team.
• If not using reset, perhaps you want to set box-sizing for the entire project:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

• If relevant, set max-width for images:

img {
  max-width: 100%;
}

VI. Add the fonts

18. Identify the fonts used in the design.

19. Connect the fonts.

• If you use Google Fonts or a similar font hosting service, include the <link> element(s) for the font(s) under <head> in your HTML, above the link to your style.css. Be aware that while this option is easier, it might not be as performant.
• Alternatively, download the fonts into your project and connect them from there. Google Fonts Helper might help. 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.

Then, in your CSS file, assign the font and provide a generic fallback font. Example:

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

You should now see the new font in your preview.

VII. Export images from the design

20. Conditional: if an image has rounded corners, or has overlying elements, or has opacity or such effects applied, remove these effects before exporting your image so you can then implement these effects through CSS.

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

• Modify the images before export if needed (as above).
• Export icons and simple drawings as SVG files. Export the other pictures as JPG or, if they include 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. I've used Squoosh for JPG or PNG images and SvgOmg for SVG images. Also, create WEBP or AVIF versions of non-SVG images; Squoosh can do it for you.
• Give each set of images a meaningful name and place it in your Images folder.
• Ensure you get the favicon image among others.

VIII. Implement images in your HTML and CSS

22. Decide where to implement an image: in HTML or CSS. You can ask yourself: “If I remove this picture, will the content still make sense?” If yes, then the image serves a decorative purpose and commonly gets implemented through CSS.

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

• Set the “width” and “height” of the image. Example: <img src="logo.svg" width="400" height="300" alt="Logo">.
• Always use the alt attribute. If the image is purely decorative or its meaning is rendered by the surrounding text, use an empty attribute alt=''.
• For different versions of the image use <picture> element with the srcset and sizes attributes.
• 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 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. Ensure that your CSS includes responsive image properties. This may include max-width: 100%, background-size: cover, object-fit, etc. Preview your images on the page and ensure they display correctly at different screen widths, zoom levels, and in different browsers.

VIX. Complete the section at hand

26. 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. Start with a large page block.

27. Get the sizes, colors, etc. from your design file as you go along. Measure margin/padding sizes. If your design file provides such properties as position: absolute or display: flex, disregard them and use your own judgment to set these.

28. Where applicable, convert fixed sizes to relative sizes to create a responsive webpage. This may include percentages or viewpoint width/height values, media queries, fluid font sizes (with relevant em/rem values for paddings and margins), etc.

29. Compare the output of your code to the design as you go along. Check various screen widths using browser dev tools. Also, zoom in and out to see how your code behaves.

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.

31. Take care of any buttons or links. Style the :hover, :focus, :focus-visible, and :active states for these elements. 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. The minimum recommended touch target size is 42px.

Part X. Final test

32. Preview your completed section or page 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. You will soon see the page that displays the way you want to!

---

It may seem like a lot, 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!