Design

This is often the most difficult part for many small business owners and probably why many just stick with a blog or the "free" drop and drag websites. If you are not familiar with CSS and HTML I recommend that you contact us and we can help create a template for you. If you are familiar with HTML and CSS or want to learn more read on.

Test your knowledge!

I recommend you taking the quiz to really test your knowledge. If you need to brush up on a topic, you can learn as much as you want in an interactive way at www.w3schools.com We will assume that you are comfortable editing HTML and CSS for the remainder of this section.

Select a template for HTML and CSS, since our goal is good SEO it is recommended you use CSS and not just pure HTML

Think about the content that you have written and how it could be best arranged on the page. There are a lot of free templates on the market, use them! If you knew how to properly code a CSS page and full website using HTML you wouldn't be reading this. Do not reinvent the wheel spend your money and time on content, research and good SEO. When selecting a template make sure that you will be able to manipulate it match your brand. Look at the CSS are there descriptions for each section of code telling you what it does? Our templates are free to use and come with documented sections for ID and class selectors in the CSS and suggested content in the HTML files.

Load and Test templates to server

Rather than use the control panel provided by your host, I use Filezilla, it is a free download and makes transferring files easy. Load the HTML and CSS templates onto your server. The template file for the HTML should be named index.html NOTE: if you have an existing site you will want to create a separate directory called test or sandbox so that you do not overwrite any current files. On the HTML page make sure you link to the CSS page.

Test

Go to the browser and check to see that everything is working. Before getting to excited lets check to make sure the writer used valid code using Site Validator Fix any errors now so that you will have a good template to start with.

Open the HTML and CSS files in a text editor.

Do not edit these files in a word processor software. I recommend downloading free software from Notepad++

Read the CSS and HTML page

Know what each ID and Class tag does and how it effects the website. You can experiment with changes here, just make sure that you have a copy saved in case you make a mess of things.

Alter CSS and make it your own (remember you shouldn't take out the credits of the original writer)

Make sure that the CSS is sufficient to layout content the way you need. If necessary add more classes in the CSS to meet your needs. Test again!

Add links for Navbar(s)

Depending on how your template is laid out you will now add the link information on your navbar. Please note that every template is different and you should read the readme.txt file that came with it, if there was one.

Name your pages for SEO

Name your pages logically but keyword rich. In my bubbles example a page name might be groom_long_haired_dogs.html

Analytics Code

We are going to get ahead of ourselves for a minute here but it will save you later. If you don't already have a google analytics account, create one. Follow the directions and get the code to add to your site just above the closing body tag.

Save file as index.html in the root directory and a copy as blank.html in the info folder.

This will be your new template, create a new page using this template for every link in your navigational bar.

Did we help? Show your appreciation.