How to create HTML website using a free HTML template
The image above illustrates a couple of the coding languages (css and html) you will need to learn to develop HTML websites. Learning is easier than it seems and you just need to understand the basic structure.
The first thing you have to realize is that you don’t need to master HTML or CSS to get started! For our first HTML website, we will be using a free template from tinysitebuilder.com, but before we go there you need to setup the environment in which we will be working.
Tools for working with HTML template
Here is a short list of the programs you will need to install in order to setup our HTML template. I’m using a Dell Windows 10 running CORE i7 but you can use any Windows PC. I also recommend you use these specific tools in order to have the same visuals you will see in this tutorial.
The following are FREE programs you need to install:
1. Build your free HTML template
You can request a free template by providing your name and email, but for our example we will build a very simple page using their website builder tool.
Head to tinysitebuilder.com and click on WEBSITE BUILDER or FREE BUILDER.
Once on the website builder, “drag and drop” elements to build a simple page.
Our example consists of 4 blocks:
- The navigation
- The hero
- The content
- The footer
You need to drag and drop each block like so:
2. Export your HTML template
Once you build your basic HTML page, you will have to export it from tinysitebuilder.com
- Click on “Export”
- Click on “Export Now”
- “Download” zip file
Depending how your browser is setup, your zip file maybe downloaded in the downloads folders or somewhere else. Make sure you can find them.
3. Unzip files
Once you download your zip file, you will need to unzip it.
You should see these folders and files, and we will upload all of them.
4. Upload your HTML template using FTP client
- Launch your WinSCP client
- Login to you server
Once you connect your WinSCP client to your server, you will see two sections. On the right side you will see all your server files, while on the left your local or computer files.
- Navigate to where you’re storing your HTML files
- Select all the files
- Drag from the left and drop to the right side
That’s it! Now you have to check to make sure the files were uploaded correctly. Just refresh the page as we did with our demo page.
The next step is to learn to edit or customize your HTML template. Click on the button and learn how!