How to create HTML website


edit html and css

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. WinSCP
  2. Google Chrome

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.

website builder

Once on the website builder, “drag and drop” elements to build a simple page.

Our example consists of 4 blocks:

  1. The navigation
  2. The hero
  3. The content
  4. The footer

You need to drag and drop each block like so:

tinysitebuilder free html template

Here is the one we built

2. Export your HTML template

Once you build your basic HTML page, you will have to export it from tinysitebuilder.com

export html template

  1. Click on “Export”
  2. Click on “Export Now”
  3. “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.

unzipped files

You should see these folders and files, and we will upload all of them.

4. Upload your HTML template using FTP client

  1. Launch your WinSCP client
  2. 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.

  1. Navigate to where you’re storing your HTML files
  2. Select all the files
  3. Drag from the left and drop to the right side

 

transfering html files

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.

How to create HTML website

The next step is to learn to edit or customize your HTML template. Click on the button and learn how!

Continue to next step




Search