Create Website Using HTML



code editor colorHTML vs CMS

Don’t be intimidated by the look of the source code. Learning to create and edit HTML pages is easy and fast, and you don’t even need to worry about creating a HTML page from scratch. If you have $19 dollars to spare, you can purchase a professional HTML template, but if you aren’t sure this is the right method for you, you can use a free template from tinysitebuilder.com.

I personally prefer HTML for two reasons:

  1. Maintenance
  2. Performance

Maintenance: I’ve used, still use and will use CMS platforms such as WordPress and Joomla for my projects, however these systems aren’t easy to maintain as many think.
WordPress is an app or platform that needs regular updates, and on top of that, you have themes and plugins that also require regular updates. Not doing so, can present a great security risk as many WordPress website users have found in the past.
HTML on the other hand is easier to update and maintain, and since the files are local and usually don’t rely on a database or complicated php and js scripts, they are easier to update.

Performance: I try not to use WordPress or any other CMS unless it’s absolutely necessary or petitioned by the customer. The reason for that is that these Content Management Systems are power hogs.
WordPress is an app that uses a lot of RAM out of your system, and in addition to that, your website’s theme and its plugins are additional processes that increase memory usage. The more plugins you add, the slower the website.

If you’re learning to code, you can start by learning how to make minor changes to a local HTML file that can run on your browser. No domain or hosting needed!!

Tools for working with HTML website

If you’re like me back in my learning days, maybe you have no clue where to begin, and here is a short list of the tools I recommend you get. There’s no need of fancy computers, and pretty much any will do the work.

  1. Download and install a source code editing software such as Notepad++. It’s free and has many options.
  2. Download and install an FTP client. We use WinSCP (only available for windows) but there are other options such as Filezilla for other systems. They are free.
  3. Download and install Google Chrome browser. Any major browser will work, but Chrome has better tools.

If you’ve already added these tools to your arsenal, we can then move onto the next step.

Setups and configurations

The great thing about HTML is that it can run on your computer without the need of an internet connection. No domain or server needed either. However our goal is to get you familiar with the entire process, from purchasing hosting to setting up FTP access and customizing a website. Therefore we highly recommend you purchase a hosting plan, configure your domain, and set up some other necessary accounts. We can then plug your website to the world wide web!

For our example we will need:

  1. Linux Hosting from your preferred hosting provider.
  2. A domain name (high five if it came included with your hosting!).
  3. Learn to access your cPanel.
  4. Add your domain to your hosting account using your cPanel (link your domain name to your root folder).
  5. Create an FTP account through cPanel. Make sure it’s configured to access the root folder (www or public_html).
  6. Buy a cheap HTML template from Themeforest, or get a free HTML template from tinysitebuilder.com.

Once you have setup all these services, you will be able to upload your website source code and make changes on the fly. Changes are live instantly and anyone with a browser and internet connection can see it.

Additionally, we recommend you learn how to use Google’s Chrome for editing your HTML and CSS local stored files. These changes are only made to the files Chrome downloaded to display your website, and your original source code won’t be affected. Refreshing the page will restore original files.

NOTE: For briefness sake, I will create additional tutorials that explain the setup and configuration of some of these services.

Your first HTML website

FREE website templates and website builder

For our example, we will be using a free HTML template we downloaded from tinysitebuilder.com. You can go there and download many free templates or build your own.

Here is the one we built.

1. Setup your WinSCP FTP client

Create Website Using HTML

By now you should’ve already setup an FTP account through your cPanel. Use those credentials to connect your app to your server root folder. You will need:

  • FTP protocol.
  • Host name.
  • Port number (use 21 if you don’t know).
  • Your FTP username.
  • Your FTP password.

Click on login.

If your connection is successful and depending of your FTP client settings, you may see 1-2 folders. If you’re using a different hosting provider other than our a2hosting recommended one, it may look different.

Our example shows 4 files; 3 folders and an .ftpquota. It’s ususally these 2:

  • .well-known
  • cgi-bin

computer files and online files

The left side panel are locally stored files (aka your computer files). On the right side panel are your online files.

If you connected your FTP account directly to your root folder, you will be taken there when you first login.

2. Visit your website.

Using Google’s chrome or any other browser, navigate over to your domain. You will see the following screen.

Create Website Using HTML

3. Upload your website files.

upload website files

You must first extract or unzip your website files, then upload them to your server. There are a couple ways you can do this.

  • You can drag and drop.
  • You can select all, and right click to upload.

Make sure you’re uploading to root folder.

4. Verify upload

In order to verify that your website was uploaded correctly, you need to refresh your window. You then will see your website!

Create Website Using HTML

5. Learn to edit your HTML files.

We have created a couple tutorials that will teach you how to edit HTML tags and CSS files. Click on these links.

tinysitebuilder.com allows you to edit and save changes to your website content as you work on your project, you can also export, then import files for editing!

We recommend you learn to edit files directly through WinSCP client, since these changes are faster.






Search