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.
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.
If someone is crafting their very first webpage, direct them to the more detailed explanations of each step in my blog.
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.
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!
Please leave a comment on the unabridged version of this checklist on my blog or use the contact information in my profile.
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.
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.
Select a code editor you will use for this project.
Choose a name for this project.
If you are a new dev, follow the beginner-friendly version. Otherwise do this:
npm create vite@latest. (Or you can use another npm create command.)cd <your new project name> and install relevant dependencies: npm install.npm install -D eslint, npm install -D sass.src and/or assets folder, public or dist folder, etc. based on your preferred setup..prettierrc.json, etc.)..gitignore file and specify what should be ignored by Git.git init
git add .
git commit -m "initial commit"git remote add origin <your repo path>, git push -u origin main. Replace main with your branch name if different.git checkout -b <branch-name>.Review the files in your folder, locate index.html and style.css files that would’ve been generated by npm create.
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.)
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">.
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.
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! 👏
watch function that will update your project whenever you make any changes. Or you might use a Live Server extension in VS Code.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.
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.
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.
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.
Copy and paste the text from your design file into your HTML.
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.
Position the preview of your file alongside the design file on your screen so you can see both simultaneously to check your output.
Select the CSS naming methodology or library you’re going to use. (Maybe BEM or something else.)
Write any initial CSS styles that apply to the entire document. The common points to consider at this stage are:
body margin to 0, as the browser adds an automatic margin of 8px..container style to define the max-width of your project and to center it.:root {
--theme-color: #314f9b;
}
*, *: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](https://gwfh.mranftl.com/) 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](https://squoosh.app/) for JPG or PNG images and [SvgOmg](https://jakearchibald.github.io/svgomg/) for SVG images. Also, create WEBP or AVIF versions of non-SVG images; [Squoosh](https://squoosh.app/) 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
); ```
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.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.
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.
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.
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.
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.
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.
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!