How-To Guides📅 July 14, 2026⏱️ 6 min read

Complete Guide to Installing an HTML Template (Step-by-Step)

Learn how to install an HTML template in 7 easy steps. From downloading to customizing, this complete guide covers everything you need to know.

#html#installation#tutorial#beginner#setup#guide#web-development

Introduction

Installing an HTML template is easier than you think! Whether you're a complete beginner or a seasoned developer, this step-by-step guide will walk you through the entire process—from downloading your template to launching your website.

In this guide, you'll learn:

How to download and extract your template files
Understanding the folder structure
Uploading to a web server (hosting)
Running your template on localhost
Customizing content for your brand
Testing and launching your site

Let's dive in! 🚀

📦 Step 1: Download & Extract

Download your template as a ZIP file
Extract the ZIP file using WinRAR, 7-Zip, or built-in extractor
Locate the /HTML folder – this contains all your website files
Open the /HTML folder to access all files

Folder Structure:

HTML/
├── index.html              ← Homepage
├── assets/
│   ├── css/                ← Stylesheets (main.css, responsive.css)
│   ├── js/                 ← JavaScript files
│   ├── images/             ← All images
│   ├── php/                ← PHP files (contact form)
│   └── vendors/            ← External libraries
└── pages/                  ← Inner pages (if any)

📁 Step 2: Understand the Structure

Key Files:

📦 root/
├── 📄 index.html                 # 🏠 Homepage
│
├── 📁 assets/
│   ├── 📁 css/
│   │   ├── 🎨 main.css          # Core styling
│   │   └── 📱 responsive.css    # Mobile responsive styles
│   │
│   ├── 📁 js/
│   │   ├── ⚡ script.js         # Core interactions
│   │   ├── 🎯 scroll-spy.js    # Navigation highlights
│   │   ├── 🖼️ portfolio.js     # Filtering & popups
│   │   ├── 🔢 counter-up.js    # Number animations
│   │   └── ✉️ message.js       # Contact form validation
│   │
│   └── 📁 php/
│       └── 📤 submit.php        # Email configuration
│
├── 📄 .gitignore
└── 📄 README.md

CSS Structure:

/* main.css */
/*------------------------------ Global CSS ------------------------------*/
/* 0- Global CSS */
/* 1- Heading CSS */
/* 2- Button CSS */
/* 3- Logo Area CSS */
/* 4- Header Area CSS */
/* 5- Footer Area CSS */

/*------------------------------ Sections CSS ------------------------------*/
/* 1- Home */
/* 2- About */
/* 3- Skills */
/* 4- Services */
/* 5- Resume */
/* 6- Portfolio */
/* 7- Testimonials */
/* 8- Blogs */
/* 9- Contact */

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Title, CSS Libraries, Custom Stylesheets -->
</head>
<body>
    <a href="#" class="scroll-top">...</a>
    <header class="header">...</header>
    <section class="home" id="home">...</section>
    <section class="about" id="about">...</section>
    <section class="skill" id="skill">...</section>
    <section class="services" id="services">...</section>
    <section class="resume" id="resume">...</section>
    <section class="portfolios" id="portfolios">...</section>
    <section class="testimonials" id="testimonials">...</section>
    <section class="blogs" id="blog">...</section>
    <section class="contact" id="contact">...</section>
    <footer class="footer">...</footer>
    <!-- JavaScript -->
</body>
</html>

💡 Pro Tip:

To edit a specific section, find the label in the CSS file and modify the appropriate styles.

🌐 Step 3: Upload to Server

cPanel Method:

Login to hosting cPanel
Open File Manager → public_html
Upload all template files
Your site is live!

FTP Method (FileZilla):

Connect to your server
Navigate to public_html
Drag and drop all files
Visit your domain

Localhost Method (XAMPP):

Install XAMPP
Start Apache
Copy files to C:\xampp\htdocs\
Visit http://localhost/your-folder/

⚠️ Important:

Upload the contents of /HTML folder, not the folder itself
Ensure index.html is in the root directory

✏️ Step 4: Customize Content

Update Logo:

<a class="logo" href="#">
    <h2>Your Name</h2>  <!-- Change this -->
</a>

Update Text Content:

Open index.html and replace placeholder text with your own content.

Replace Images:

🖼️ Image Size Requirements

Image Type	Size	Location
🏠 Home	400 × 400 px	`images/Home/`
🖼️ Portfolio	600 × 400 px	`images/Portfolio/`
💬 Testimonials	200 × 200 px	`images/Testimonials/`
📝 Blogs	600 × 400 px	`images/Blogs/`
🌄 Backgrounds	1500 × 1000 px	`images/Background/`

📌 Pro Tip: Use high-quality images for backgrounds (1500×1000px) to avoid pixelation on larger screens.

Customize Colors:

Open /assets/css/main.css and modify:

:root {
    --primary-color: #2563eb;    /* Change this */
    --secondary-color: #7c3aed;  /* Change this */
}

📧 Step 5: Configure Contact Form

Create Google App Password:

Enable 2-Step Verification on your Google Account
Go to Security → App passwords
Select Mail → Other (custom name)
Click Generate – copy the 16-character code

Update `assets/php/submit.php`:

// Your Gmail ID (SMTP server)
$mail->Username = "your_email@gmail.com";

// Your App Password (not regular password!)
$mail->Password = "your-app-password";

// Where to receive emails
$mail->addAddress("your_email@gmail.com", "Your Name");

// Subject
$mail->Subject = "(Template) New Contact Info";

⚠️ Important:

Your regular Gmail password will NOT work. You MUST use the App Password.

⚙️ Step 6: JavaScript Customization

Update Portfolio Categories:

In portfolio.js:

// Change categories
const categories = ['all', 'web', 'design', 'photography'];

Update Counter Animation:

In counter-up.js:

$('.counter').counterUp({
    delay: 10,
    time: 1000  // Change animation speed
});

🧪 Step 7: Test Everything

Testing Checklist:

☐ 🏠 Homepage loads
☐ 📋 All sections work
☐ 🖼️ Images display
☐ ✉️ Contact form sends email
☐ 📱 Mobile responsive
☐ 🌐 All browsers work
☐ 🎯 Portfolio filters work
☐ ✨ Scroll animations work

Test Mobile:

Open Developer Tools (F12)
Click mobile icon (📱)
Test on different devices

🚀 Step 8: Launch!

Launch Checklist

📤 Upload all files
✏️ Update content
🖼️ Replace images
✉️ Configure contact form
📱 Test on all devices
🔍 Update SEO meta tags
📊 Add Google Analytics

💡 Final Tips:

Backup your files before major changes
Test every page after each update
Use a staging site for big changes

❓ Frequently Asked Questions

What is an HTML template?

A pre-built website you can customize with your own content, images, and branding.

Do I need coding knowledge?

Basic HTML/CSS helps, but you can edit text and replace images without coding experience.

What tools do I need?

VS Code or Notepad++ for editing, FileZilla for FTP, XAMPP for local testing.

Does the contact form work?

Yes! You need to configure it with your Gmail and App Password (instructions above).

Ready to Build Something Amazing?

Browse our collection of premium HTML and React templates

View All Templates →

Complete Guide to Installing an HTML Template (Step-by-Step)

Introduction

📦 Step 1: Download & Extract

Folder Structure:

📁 Step 2: Understand the Structure

Key Files:

CSS Structure:

HTML Structure:

💡 Pro Tip:

🌐 Step 3: Upload to Server

cPanel Method:

FTP Method (FileZilla):

Localhost Method (XAMPP):

⚠️ Important:

✏️ Step 4: Customize Content

Update Logo:

Update Text Content:

Replace Images:

🖼️ Image Size Requirements

Customize Colors:

📧 Step 5: Configure Contact Form

Create Google App Password:

Update assets/php/submit.php:

⚠️ Important:

⚙️ Step 6: JavaScript Customization

Update Portfolio Categories:

Update Counter Animation:

🧪 Step 7: Test Everything

Testing Checklist:

Test Mobile:

🚀 Step 8: Launch!

Launch Checklist

💡 Final Tips:

❓ Frequently Asked Questions

📤 Share this post

Ready to Build Something Amazing?

Update `assets/php/submit.php`: