New Check out the curated list of the finest design resources I've gathered for you! Take a look →

My Custom HTML Templates

In this article, I will share a collection of component HTML templates. The idea behind this collection is to make it easier for me to work on upcoming web development projects.

HTML Templates for PSD to HTML, WordPress Development and Front-End Web Development
HTML Templates for PSD to HTML, WordPress Development and Front-End Web Development

Component HTML Templates

I have worked on over 250+ website projects, including PSD to HTML projects, WordPress development, Webflow development, and front-end (react.js) web development. Almost 90% of the projects I have worked on are white-label, so when I’m not too busy, I start creating a collection of HTML component templates from the projects I have worked on.

CSS Framework for HTML Templates

For the majority of projects, I have used the Bootstrap framework. However, for the component templates that I have collected, I use the Tailwind Utilities framework. The simple reason I use Tailwind is that if I have hundreds of component SCSS files in the future, it will become larger, and if I split them into several main primary components, it might be a bit more difficult. Therefore, Tailwind Utilities framework is the right choice.

I was also inspired by the client-first Finsweet design from the style guide, so I use some of their designs.

JavaScript for HTML Templates

For JavaScript, I try to use pure vanilla JavaScript. For web interactions, I use GSAP and trial various plugins. Of course, if a project requires web interactions using GSAP, I will ask my client to pay for the license. 😀

Build Tools

For build tools, I use Parcel because it is more practical.

Others

To manage the HTML component templates more structured, I use PostHTML-Include to create partials. I also use @parcel/transformer-sass, where I use Sass as the main style with the CSS development method from Tailwind. It can be a bit confusing, but it is more practical than having to install many packages when using PostCSS. 😀

I keep all my code in a private repository on my GitHub account and set it up to auto-deploy to a subdomain of my website.

You can check out the collection of HTML component templates here.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment