If you have little to no experience in web design or HTML, the task of building your first website can be daunting, but here is a walk through on how to get your website up and running – without any help or cost to you (after the purchase of domain and hosting, of course).
1. Figure out what you want layout-wise.
On a sheet of paper or on the computer, draw out the layout you want for your website. For ideas, you can visit other websites with similar themes to yours. Typically you will have your logo, a navigation bar with links to each of your subpages, and maybe some graphics.
2. Figure out what you want content-wise.
First make a bulleted list of all of the things you want on your website. Selling a product? Include 'pricing' and 'reasons the product works'. Promoting a service? Include 'what makes this service different' and maybe 'previous work'. Often people will also include 'contact' and 'about' pages. Next, divide your bullet points into sections, which will later become pages. You can write the content of these pages now or later, but be sure you have divided everything up so you know what you will put under 'home', 'FAQ', 'about', and whatever else you choose to add to your site .
3. Find a free template you like.
If you're Google for "free web template" or the like, you can find multiple types of templates, most of which are written in CSS and HTML which you can edit. I will talk about editing these later. Find a template you like, and download it.
4. Modify that template to fit your website for content.
This is the HTML editing part – but it can be very simple. Typically a template will come with some "junk" content. Look at their unedited template to see where everything is on the page. If there is a part on the page which says "Lorem Ipsum", but you want it to say your content, open up your HTML file, find the part of it which says "Lorem Ipsum", and replace it with the text you have written. Continue to replace text until you have filled the pages with your content.
Secondly you need to update the links. There will likely be a navigation bar with links to "Home", "About", "Contact", etc. You will want to change not only the names of these links, but where they point.
Some sample HTML is:
This means the website says the word "Home", and when the user clicks on it, it redirects them to yoursite.com/index.html. To change it to point to yoursite.com/index2.html and show the word "Index 2" to the user, change it to
If you want it to point to a website which is not a subsection of your domain, type out the entire URL, as follows:
5. Modify that template to fit your website for style.
If you want to change the colors in your template, open the .css file that came with it. In your HTML, each section will have an "id" or a "class". If the section says "class = header" or "id = header", then there will be a section in the css file called header. In this section, there will be appropriately named elements like "font-size" and "color". Modify these as you wish. Colors are denoted by Hex codes, or 6-digit combinations of numbers and AE letters. You can easily search online to find the Hex codes for your favorite colors. Enjoy your website!
