FrontEnd web
Published in

FrontEnd web

HTML,CSS and JavaScript

Bad habit to design an HTML template.

Avoid mistakes in HTML template Designing.

The first step of a project is a template design. After the Temple design is finished in Figma or Adobe XD. The next major step is to write HTML and CSS code for the HTML template.

Avoid mistakes in HTML template Designing
Avoid mistakes in HTML template Designing.

Who I’m

I design a lot of templates in my job and personal projects. For example, I recently designed a template for my website with tailwind CSS.

In my Past life, I create a lot of mistakes. However, I do not mistake in CSS and HTML—all errors in project steps. For beginner person, the project step helps to write code faster and more Effectively.

This article summarises all steps you need to start designing convert into an HTML template.

  1. Make a design with Figma and Adobe xd. both design tools are suitable for the app, website, and other software design.
  2. Summaries your design layout with an image or use Figma or adobe xd interaction preview.
  3. Collect all image and SVG assets like logo fonts used in the template for creating time.
  4. Choose a CSS framework like bootstrap and tailwind. Then, you start work without farmwork.
  5. Setup your project with IDE and Download plugin related to HTML, CSS, CSS Framework.
  6. Create a Folder according to the project. The most common folder is a public folder, an assets folder.
  7. After in assets folder, assets folder sprit into according to folder wise Icons, image, fonts, SVG, CSS, JS, and Build folder.
  8. Rename your file into a mean-full name and give a short name. i.e. twitterIcon.svg to twitter.svg.
  9. Always design your template from top to bottom step by step.
  10. Design components one by one, always design header and emergently add header responsively.
  11. When your design is finished, then compress your CSS and javascript.

The mistake that avoids you from creating an HTML template.

  1. For a single developer, Never be designed multiple pages at a time.
  2. Never be combine all assets in one folder.
  3. All choose one CSS framework and stick with it.


  1. Design your Index or home page first with zero CSS problems and reuse HTML and CSS code for other pages. For example, i.e., I design a blog Index page and resue HTML and CSS code for the tag page and author page because some parts are always the same in website designing.
  2. Allways design website response mobile to desktop. because mobile responsiveness is the first approach
  3. Always use a CSS framework in your project.
  4. You always focus on the stable version of the template, and something is broken, you can fix it later.
  5. Always add comments in the template with a full description.


The best framework is the tailwind CSS framework. However, if you do not feel familiar with Tailwind CSS, you use any other CSS framework according to your requirement and understanding.

Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.

Read More content on the frontend web. Sign up for a free newsletter and join the frontend web community on medium.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer ||