Getting Started with Your HTML Template

What You've Downloaded

After purchasing the template from Envato (ThemeForest), you'll receive a ZIP archive. Inside, you'll typically find the following structure:

• Main Files - the actual template files you'll be working with

• Documentation - a link or file pointing to this documentation

• Licensing - your Envato license details

Extract the archive to a folder on your computer. Inside the main files folder, you'll see something like this:

template/
├── index.html          ← your homepage
├── about.html          ← inner pages
├── contact.html
├── css/
│   ├── style.css       ← main stylesheet
│   └── responsive.css  ← media queries (if separate)
├── js/
│   ├── main.js         ← custom scripts
│   └── plugins.js      ← third-party libraries
├── images/             ← all template images
└── fonts/              ← icon fonts or custom typefaces

The exact file names and folders may vary between templates, but the general structure remains the same.

What Is an HTML Template (And What It Is Not)

An HTML template is a collection of static files - HTML, CSS, JavaScript, images, and fonts. It is not a content management system. There is no admin panel, no database, and no backend logic.

This means:

• You edit files directly in a code editor

• You replace placeholder text and images with your own content

• You upload the files to a web server to publish your site

• Every change requires editing the source files manually

If you're used to WordPress or similar CMS platforms where you manage content through a dashboard, this works differently. An HTML template gives you full control over the code, but it also means you're responsible for every edit.

What You Need

To work with the template, you'll need two things:

A code editor - any text editor that handles HTML/CSS will work. We recommend Visual Studio Code (free, cross-platform) or Sublime Text. Avoid using basic text editors like Notepad, as they don't provide syntax highlighting or proper encoding support.

A modern web browser - Chrome, Firefox, Safari, or Edge. You'll use this to preview your changes as you work.

That's it. No server software, no databases, no command-line tools required for basic editing.

Viewing the Template

To preview the template on your computer, simply open the index.html file in your browser. You can do this by:

• Double-clicking the file (it should open in your default browser)

• Right-clicking and choosing "Open with" your preferred browser

• Dragging the file into an open browser window

You should see the full template with all styles, images, and interactive elements working. Navigate between pages by clicking the menu links.

Note: Some features like contact forms won't function when viewing files locally - they require a web server. This is expected and covered in later articles.

A Note About Demo Images

The images you see in the live preview/demo on ThemeForest are stock photos used for demonstration purposes only. They are not included in your download due to licensing restrictions. The template files contain placeholder images instead. You'll need to replace these with your own images or properly licensed stock photography.

Next Steps

Now that you have the template open and understand its structure, head to the next article to learn how to customize the content, change colors, swap images, and make the template your own.