netobo website development

Website Design - DIY vs. WordPress

There are basically two main methods that are commonly used to create a website. The first method is to learn how to code a website yourself and the second method is to use a "website template system" such as WordPress. One important thing to keep in mind when choosing which method is best for you is that there are several benefits to creating a website of your own from scratch.

First of all, you are in control of everything. You create and own all of the aspects of your website, and you will always have access to the files you need.

Secondly, you will learn how a website is actually coded and works.

So, if you think that you want to give the DIY method of website design a shot, then we have created a simple free responsive website template to get you started in the right direction.

The following free responsive website template will allow you to create a website exactly like our Netobo website. Simply follow the instructions below to get your responsive website online today quickly and easily.

Step 1: Download Our Free Static Responsive Website Template Zip File Below

Click on the link below then "save file" to download our responsive website template:

Download the Netobo Responsive Website Template

Step 2: Open The Zip File To View All The Needed Files

The files listed below will allow you to get your initial website online.

The images folder is where you will store all of the images needed for your website.

The support-files folder is where your .css files are stored. These files control the color and layout of your website.

The .html files are your actual web pages and your include files. Include files are used to add sitewide navigation, ad spaces, footers, and headers.

The .htaccess file controls your website's include files and error pages.

free HTML static website templates files

Step 3: Update Your .htaccess File

Simply click the .htaccess file to open it up in your computer's basic Notepad application. Then replace "YOURWEBSITE" with your actual website's domain name.

Then save the .htaccess file, and you are done with it.

free HTML static website templates htaccess files

Step 4: Update Your .css File

Open the "support-files" folder using your favorite HTML source editor.

So what is an HTML source editor?

HTML source editors are simply used to created properly formatted HTML web pages, that can then be uploaded onto your web host's server.

There are plenty of free HTML source editors and we recommend using: Arachnophilia

Once you download Arachnophilia, you then click on "File" and then "Open" your CSS files.

You will then see the two .css files, one for computers and one for mobile devices. These files will allow you to change the look and feel of your website. You can play around with the color codes until you find the color scheme you desire.

Anything with a standard HTML color code (i.e. #000000 and/or #000) can be changed. Currently the .css files are set to replicate the color scheme of Netobo, which is mostly silver, black and white.

To find other HTML color codes you can visit: HTML Color Codes

free HTML static website template main css file example

Step 5: Edit Your .html Files

Now open up the .html files, one at a time, and replace all the portions that require your website's information. We have labeled the sections that need to be updated with all capital letters refering to "YOUR WEBSITE" as shown in the highlighted section of the image below.

To add additional web pages simply use the index.html file as a template, and then edit it and "save as" your new web page.

When you save a new web page, remember to add a hyphen in between multiple word page names. (i.e. new-page.html)

The Highlighted Image Below Shows What You Need To Replace For Your Web Pages

free HTML static website template main html file example

Step 6: Upload All Folders And Files To Your Web Host

Once you have finished editing all of your folders and files simply upload them all to your web host's server using an FTP client.

So what is an FTP client?

FTP stands for "File Transfer Protocol", and it is simply used to transfer files to and from your web host from your computer. It will allow you to upload things such as web pages and images onto your web host's server.

There are plenty of free FTP clients available and we recommend using: Filezilla

Once you download Filezilla, you then connect to your web host's server using your login information from your web host. Once you are connected to your web host, you will be able to view all of your current files that are on your web host's server pertaining to your website.

Filezilla Setup Example Below

filezilla FTP client login example

Simply click and drag the files you need between your computer and your web host.

filezilla FTP client dashboard example

After you finish uploading all of your files to your web host, you should then be able to view your website simply by typing in your website's URL into any web browser.

How to Create a Website Using WordPress

If the above DIY process of creating a website simply seems too overwhelming to you then there are "website template systems" out there that basically turn web design into a plug-and-publish system, where another company or resource is doing the backend coding for you and all you have to do is write the content.

Millions of web developers rely on website template systems such as WordPress, and while there is nothing wrong with that there are a few things to keep in mind.

The main issue to keep in mind is that there is no guarantee that a particular website template system will always exist or in the case of WordPress be maintained. So what happens if your website template system company or resource goes out of business or simply no longer offers their website template system any longer? This could be a huge problem if you then have to try to move your website to another system especially if you have no real knowledge of coding a website yourself.

So while there is nothing wrong with using a website template system, just keep in mind that there are no long term guarantees when you don't create and own the content delivery system yourself.

If you are interested in learning how to create a WordPress website, then Bluehost offers some great step-by-step videos below to walk you through the process.

Simply follow the instructional videos below to get your WordPress website online:

How To Install WordPress On Your Bluehost Server

Step 1: WordPress Overview & Installation

Step 2: WordPress Login & Admin Area

Step 3: Creating Pages in WordPress

Step 4: Creating WordPress Blog

Step 5: Catagories and Tags

Step 6: WordPress Plugins

Step 7: Customizing Themes in Wordpress

Step 8: WordPress Catagories and Tags

Step 9: WordPress Menu & Widgets

Step 10: Marketing Your Wordpress Website

Continue to Step 3: Website Development