Before we get on to linking your domain to your host, here is a quick talk about domains and what you should be thinking about if your haven’t got one yet.

So if you have tried to come up with catchy names for websites before then you may realise how hard it can be to pick one.

A good rule of thumb is to keep them short, try for a two word domain if you can and make sure its a .com first and foremost ,if you can’t get a .com suffix then the next best thing is .org then .net.

These are considered top level domains located in the root zone of the Domain Name System’s name space. (This is an actual thing )

If that all sounds a bit like a “Galaxy Far Far Away”, then all you really need to know is those three are the most popular extensions.

Just remember over 50% of sites searched by google are .coms

Right, back on subject…

How to Point Domain to Host

So, by now, you may have found a domain you like and you might also have found some reasonably priced hosting packages…

So how do you link the two together?

Here are the following steps to link your domain:

• Setting your domain to point to your host
• Adding your domain to your Hostgator account

In this example I am going to be using the Namecheap for my domain registrar and Hostgator for the web host, as these are the two main products I use personally.

I have found they are very compatible as Namecheap allows me to buy all my domains for a decent price ( over 40 and counting ) and Hostgator allows me to install as many sites as I like on their popular baby plan option.

Now if you are using other products then that’s fine this method is pretty much the same whatever registrar or host provider you are using.

First of all we need to set up your hosting:

If you have chosen a host, or have a hosting plan already, then these steps should be fairly straightforward as the hostgator cpanel is pretty much identical to most of the hosting control panels around.

Register or log into your account, you should see a set up like the following below, some control panel screens might look slightly different visually, but all have pretty much the same layout and functionality.

You want to click on the control panel option on the right of the screen, do so and you will be transported to the main control panel section…

This is the main hostgator cpanel where all your add-ons and plugins live, its layout is designed to show everything available to you on one screen

So now from here we need to find our Name Server addresses, this will be further down on the right hand side of the screen, you will have to scroll down a bit first.

These are the servers we need to point our domain to.

You have the primary name server and the secondary name server.

Take note of this information or keep this window open for copying and pasting into namecheap.

Next you want to go over to the Namecheap site, if you haven’t already got a domain then you can simply search for one in the main search bar on the front page.

By typing the domain into the box Namecheap will search to see if that particular name is already taken, if it is you could then see if the .org or .net versions are available.

On the other hand if the .com is available then it usually only costs around $9 to register it.

When you register a domain the usual period of registration is a year, you can increase this to 2 or 3 years, its up to you.

Just know you are only ever really renting a domain, you never actually own it, but as the registrant you can use it pretty much indefinitely, as long as you Keep paying for it.

If you are buying a domain for the first time then you will have to register for an account, this is very simple and can be done in a few minutes.

Once you have bought your domain you will be able to see it in your dashboard, this is a convenient and easy place to view all you domains in one place.

you can choose at this point to set the auto renew switch in the middle to on, this will make sure that it is re-registered again when it comes up for renewal.

Now we want to click on the manage button just off to the right side of our screen, this will take us to our domain settings.

This gives you the option to choose what names servers to link you domain to.

You want to change the domains setting to Custom Domain and put in your hosts Name Servers copy and past both the primary and secondary server references in to the boxes.

When we link our domain to our host we are essentially linking a human readable domain name to an IP address, This is your hosts address where you site will be located.

Once you have entered the server name information save the settings, this will now ensure that your domain is pointing to your host.

Now we will go back to to our host to add our domain to our account.

Once you are back into the main control panel window scroll down until you see the Addon Domains option ( as seen below).

You will now be taken to another page where you can enter the domain that you want to add on.

Put your website address into the top box, the other boxes should auto fill.

Now click on the Add Domain box.

This should then successfully link and create a directory for your domain name.

Once this is done you will be given the option to install a WordPress site in this domain directory.

You can create many sites this way, by simply linking them individually to your hosting and creating a separate WordPress installation for each of them.

This is a super quick way to create a simple site quickly.

If you want read a more complete guide, one that shows you how to do all of the above, plus how to set up your WordPress account and add your first post…

Then download the free PDF here – How to create a website with wordpress PDF

Now there are many themes out there to choose from when creating your site with WordPress, how do I choose the right one?

( You can speed past the first section about content and find the 5 best free WordPress themes by clicking here “Quit your jibba jabba” )

The trick is to not over complicate matters with your design, unless you are going for some high concept visually-centric piece, you want to keep your visuals fairly simple.

Overall choose a theme that is related to your content.

If your text related content is key to how you want to get your message across then it should easy to see and easily digestible, and separated into bite size chunks.

You also want your main hook or opening lines to be above the fold (upper visual half of the screen) having a large image may look good visually when someone first lands on your site, but if by doing so it knocks you first 2 paragraphs off and below the fold then its pretty pointless.

Most of the time people generally want to find information fast and be able to consume it quickly, think about your own habits when you are searching online and you will know this to be true, most of the time.

It is often misconceived that people want newer and better visually designed websites, but these over-the-top so called visual stunning sites can just simply confuse and distract people from the actual content of the site.

Keeping you design easy and simple can most times be a benefit to you and the user, making it easy for you visitor to get the information they want from you is key to getting your message across, whether that be a product or latest blog post.

Also mobile devices struggle with these over complicated themes as a lot of the elements wont display on the smaller phones aspect ratio.

There has been a massive sea change the last few years with mobile browsing vs desktop browsing, mobile phones are now pretty even with around 50% of all searches being from mobile devices.

This was as expected and makes complete sense because our mobiles are always with us, and in turn, this matches up with why most of the traffic and transactions are though our mobile.

Finding the Right WordPress Theme

Now with all this in mind, let have a look at some simple responsive WordPress themes

( If you find a theme you like and need help setting up your web page then download the free How to create a website with wordpress PDF guide

This guide takes you from choosing the right domain name and linking it to you hosting account, it also shows you how to quickly set up your settings and your first page ).

Twenty Sixteen

This is the modern version of a popular series of themes, it is simple by design and is great for blog style layouts. The theme I use for this site is actually just a customised version of a twenty sixteen theme.

Twenty Sixteen is a free theme that you can fully customise to meet you own requirements, it doesn’t have to be used for blogging either, by simply changing a few of the settings you could create a decent business page as well as a plethora of other different structured sites .

You can take out the side bar widget and create a great single column site or keep the extra column for blog links or pictures if you need to add further navigation or branding.

Kubera

Kubera is a great free GPL licensed WordPress theme that has a pleasing warm orange and grey colour scheme. It has a great de-saturated style and nice block elements, it is also fully customisable too!

You can use is for blogs, designs, portfolios, even for your own e-shop

This theme has a very “low-fi” indie feel to it and would be great for artists or developers wanting a stylish grungy style website.

Asura

Asura is another great GPL theme that is again stylistic but not overly complicated, it has an interesting default colour scheme, but is also fully changeable.

Asura has lots of customisable functions and layouts that allow you a lot of freedom when designing the websites structure and tweaking it style settings.

This also has quite an indie feel to it and is much more image orientated than some of the other more text based themes.

Its style and layout are dynamic and so are designed to scale, this will ensure it looks impressive on all devices and aspect ratios.

Wordstar

Wordstar is very text centric WordPress theme that would be great a for blog orientated website. This is a theme that is built for clarity and post elements are clearly defined and separated well.

The design is simple and eye catching in a modular way, each of the posts are separated into simple block forms that are designed to grab your attention.

Quick headline style posts, good white space and uncomplicated navigation make for a very sleek and minimalist design.

Lark

Lark is another great text orientated GPL licenced theme that looks great and is easy to use. It has a clean structured design that is perfect for bloggers.

It has simple fluid typography that scales well for readability on all types of devices and has a good amount of white space.

This again is very modular and each post stacks in a visually pleasing way, the interface isn’t too complicated and works well with its two column layout design.

So these are my top 5 free themes that I would suggest if you are looking to get a site built quickly without having to worry about buying a WordPress theme.

The themes I chose are very good for scaling, so should support most devices. Having good scale-ability for your websites is essential in today’s world as your web page could be viewed on a multiple of devices by a multitude of people.

I personally use a customised version and predecessor to the twenty sixteen theme and this works great for me!

If you have found a theme that you like, whether its one I suggested or not, and need help to set it up or connect it with a domain name, then download my free guide:

This will help you find a related keyword domain, which is an underrated and very important step, and then connect it to your site by pointing it to your hosts name servers .

So you have had your idea, you have finally created your site and slaved over the content. So well done, take a breath you have done a fine thing.

So it would be nice to think people will flock to your site, but alas, this isn’t the case and you have a little bit more work to do.

How do I get people to come to my website and see what I have to say? and how do I get real free traffic to my website?

Now if you have a site up and running then you know how hard it can be just to get to this point, you have had to solve the following problems:

• Having an idea for a site
• Finding the right domain
• Pointing the domain to your host
• Building the actual site and theme
• Writing the content and creating images for your site

If you aren’t tired and haven’t given up by now, then you know that you have one last big hurdle, There is this question of driving traffic to your site.

Google and other search engines will rank your site based on quality, original content and what keywords you are targeting. It needs this information to know how to categorise you site and where to display it.

Google spiders will crawl your site, find the keywords in your text and then display your site based on these factors.

One of the most important things is that you give value to the visitors and create rich long content that stands out from the rest.

Google likes original content and it likes nice interlinking pages that are all related to a main theme, Google also doesn’t respond well to duplicated content.

If you just copy and paste content from other pages google will know and will respond in kind by sending your site to the void where it will never be seen again.

Lots of gurus online will say that content is king, this can be true and if you make large content rich sites, then over time they will rank well.

This is a good avenue to go down if you are going for organic traffic and if you pick a good non-competitive niche you might only have to write a 4 -5 pages to get some decent traffic to your pages.

Some might say that sites with very targeted keywords and phrases, but little content, are doomed to fail.

This actually isn’t true you can make smaller sites with just a few pages, but still get visitors to your site, its more about the quality of your content and if you can answer a question with fewer words, why wouldn’t you?

Many visitors may want an answer to a question, if this is the case less content may be better and keeping the answer above the fold may be an advantage.

If that same visitor has to trawl through pages and pages of writing to find the answer they may just end up going elsewhere.

Keywords and key-phrases are actually search query’s that people input into google everyday in order to get some relevant answers back.

Keywords give us the exact intent of what searchers are looking for.

So on one side we have a site with content on it and keywords relating to a theme or niche, on the other side of the equation you have people that are actively searching for these phrases or from there point of view answers to specific question or search terms.

It makes sense now that if you can find out what people are searching for and use the same search terms to drive the people to your site then…

Booooooooooooooom!

Now there are keywords that you will want to rank for and some that you don’t, some will have very high competition which means it will be almost impossible for you to rank for them.

If people are searching for keywords or key-phrases google wants to serve them the most relevant information from the best quality highest rank sites.

If there are other high authority sites out there that are targeting the same keywords but doing a better job of it then they will obviously rank higher

The idea would be to target other keyword and phrases that don’t have so much competition.

You want to aim for the lower hanging fruit the keywords that have less searches and lower competition

If you want a really quick way to increase website traffic start by typing your niche or interest into the search bar, you will notice that google will try and predict what you are looking for based on other searches other user have made.

It does this by showing you a drop down list of related searches, this is great information because this is google telling us what other people are looking for.

This is a great way to look for alternate search phrases that you can include in your site, you can then use those keyword to optimise your pages to give more relevant information for terms that people are actually searching for.

Another thing you can do is after searching for your chosen keyword, scroll down to the bottom of the page and have a look at the related traffic search terms that google has suggested again related to your keywords.

Now we know that these phrases are being searched for because these are the search terms that another person has actually entered into the search bar.

We also know that this is good information because it is simply google wanting to provide the most relevant data to its users.

And we know that this information will benefit your user experience and aims to get you to the right information quicker.

You could now take all this data and target these specific keywords and optimise you site with those, rather than targeting some random keywords or phrases that you made up and that have absolutely no search volume.

So this is part two to creating a simple web page if you need to brush up on a few html basics then make sure to follow that link otherwise continue on.

The aim is to create a very simple scale-able web page template that can show how, with a very simple html script and CSS file, you can create a simple but nice looking one page site without too much fuss.

Now this is pretty much where we got last time:

Now granted if you are coming from part one there are a few changes I made to the HTML as seen below:

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Simple Web Page</title>
     <link rel="stylesheet" href="simple_page.css">  
  </head>
  <body>
    <div id="banner">
       <h1>Header</h1>
       <h2>sub header</h2>
   </div>
    <div class="section">
       <p>Hamburger sausage corned beef chuck doner spare ribs tongue 
         prosciutto kielbasa ground round. Tri-tip venison filet mignon 
         andouille beef ribs picanha jerky corned beef boudin. Kevin 
         landjaeger ham biltong. Jowl turducken alcatra, brisket pork 
        loin porchetta rump drumstick kielbasa prosciutto chicken 
        swine. Tongue sausage leberkas beef ribs. Landjaeger bresaola 
        short loin pig, doner sausage jerky flank cow picanha hamburger 
         ground round meatball rump. Burgdoggen landjaeger fatback 
        meatball ham.</p>
     </div>
      <div id="footer">
        <p> © Footer 2019</p>
      </div>
  </body>
 </html>

I have changed the banner text to something more suitable and have added a variation of Lorem Ipsum text called Bacon Ipsum

Lorem Ipsum, if you don’t already now, is an almost random text generator that creates text with enough form that makes it convincing as a temporary filler.

This of course is just placeholder text, but has a realistic look and flow and is more agreeably than just plain gibberish, this helps you to quickly fill out parts of the page when designing it.

You can find the regular Lorem Ipsum here the variation I used is called bacon ipsum and the main difference is it includes a lot of bacon-centric words mixed in.

The CSS has changed a little too:

body {
	color: black;
	background-color: black;
}
#banner {
	background-color: white;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
.section{
	background-color: white;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
#footer{
	background-color: white;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}

I have just changed the bodys background colour to black and added a background attribute to each of the other selectors with the value of white this makes them pop out a bit more than before.

Now this is all very well but it still isn’t very colourful and wouldn’t win any prizes for best site of the year.

What we need are some images and a bit more text formatting…

If you need images to quickly fill out a site with, but don’t have any of your own that are suitable, then a great site for free images is Pixabay.

The reason why this is great for images is because the photos are donated to the site and are free for commercial use, also most of them require little to no attribution.

Here are the images I downloaded from Pixabay plus a few I created myself.

Now its important to resize your images for use in your website because if your images are too big they will drastically slow down your sites performance.

I edited all my images down in size and have include the dimensions of each in the collage image above.

Going back to our Search Engine Optimisation people wont’ stick around for very long if your site isn’t loading fast, in fact its at the very top of every SEO specialists priorities for improving site bounce rate.

Find out more about your sites bounce rate.

If you want to use different images you can, other wise I will soon give you links to all of the above images individually.

The above dimension are there as reference, so if you need you can convert all your images to match the same dimensions.

If you need to change the size of your images at any time then you can use Windows Paint and then save the file with the extension .PNG

The PNG – Portable Network Graphics format will keep any transparency that is present in your image.

If you want to use a great free photo editing program, that’s a bit more sophisticated than paint, then I would recommend using Gimp

This software is open source and is very much like its richer cousin Photoshop and has many similar tools.

If you need the exact photos I used to create this web template then you can download them here:

Grab all these images, or download your own from Pixabay, remembering to resize them in Gimp or the graphics app of your choice.

Create a folder call images, in the folder where your HTML and CSS is, and place the images here.

Now we need to connect the images to our site, to do this we will first add the reference to the images to our HTML script.

Lets edit the HTML again

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Simple Web Site</title>
     <link rel="stylesheet" href="simple_page.css" />  
  </head>
  <body>
    <div id="banner">
       <h1>Header</h1>
   </div>

    <div class="section">
      <h2>Nice Header</h2>
       <p>Hamburger sausage corned beef chuck doner spare ribs tongue 
          prosciutto kielbasa ground round. Tri-tip venison filet 
          mignon andouille beef ribs picanha jerky corned beef boudin. 
          Kevin landjaeger ham biltong. Jowl turducken alcatra, brisket 
          pork loin porchetta rump drumstick kielbasa prosciutto 
          chicken swine. Tongue sausage</p> <img 
          class="box_image_right" src="images/record.jpg" alt="vintage 
          record and turntable"/>
             <br />
               <hr>
             <br />
       <p>leberkas beef ribs. Landjaeger bresaola short loin pig, doner 
         sausage jerky flank cow picanha hamburger ground round 
         meatball rump. Burgdoggen landjaeger fatback meatball ham.
       </p> 
         <img class="center_image" src="images/bunting_big.png" 
          alt="indie decorative border" />
     </div>

     <div class="section">
      <h2>Second Section</h2>
       <p>Hamburger sausage corned beef chuck doner spare ribs tongue 
          prosciutto kielbasa ground round. Tri-tip venison filet 
          mignon andouille beef ribs picanha jerky corned beef boudin. 
          Kevin landjaeger ham biltong. Jowl turducken alcatra, brisket 
          pork loin porchetta rump drumstick kielbasa prosciutto 
         chicken swine. Tongue sausage</p><img class="box_image_left" 
          src="images/musician.jpg" alt="musician playing guitar"/>
            <br />
              <hr>
            <br />
       <p>leberkas beef ribs. Landjaeger bresaola short loin pig, doner 
          sausage jerky flank cow picanha hamburger ground round 
          meatball rump. Burgdoggen landjaeger fatback meatball ham.
       </p><img class="center_image" src="images/bunting_big.png" 
            alt="indie decorative separator" />
     </div>

     <div class="section">
        <h2>Great Crowd!</h2>
         <img class="box_image" src="images/concert.jpg" alt="concert 
          full of people"/>
     </div>
      <div id="footer">
        <p> © Greatest Footer 2019</p>
      </div>
  </body>
 </html>

Now we have added some more bacon ipsum text and separated the text into two paragraphs,

In between the paragraph we have added an image which also has a custom class selector called box_image_right (can you guess what this is going to do?).

We also then add a <br/> tag in between the two paragraphs, this is used to create a line break between two elements and is great for adding spacing in between the these two tags.

We now add a <hr> tag (this stands for horizontal rule) to create a line that will go from one side of an element to the other.

Then with the magic class selectors we re-use the section class and just simply copy and past the section again.

We make it slightly different to the one before by just adding different text and images.

One other thing you might notice is that I have added another custom class to the image in the second block and called it box_image_left this puts the image to the opposing side offsetting it from the image in the section above.

At the bottom of both sections I add another PNG image called bunting, this is a little decorative effect that sits at the bottom of each box section creating a nice visual book end.

Again I copy the section for a third time add a separate image with another custom tag called “box_image” and I use another <h2> for the title text.

Lastly I add a footer which has its an id selector, this is because the footer is only going to be used once for the bottom of the page and therefore will need to be styled slightly differently.

You could get away with just using the section class but if you wanted to make the footer unique to the page, by maybe having its colour different to the other sections, giving it its own selector will make this easier

I have added whats called an entity as follows © this is for outputting the copyright symbol to our text.

Open up the web page in the browser and you should see the following:

This is already looking much better, and if you wanted you could stop here and have a very basic looking blog style post page, which is fine.

Lets add some more CSS to Spruce up this web template page

body {
	background: url("images/static_green.jpg") no-repeat;
	background-size: cover;
}
h1 {
	color: #fff;
	font-size:60px;
}
h2 {
	background: url("images/scribble.png") no-repeat;
	background-size: cover;
}
#banner {
	background:#151e28 url("images/pinkcloud.jpg") no-repeat top right;
	background-size: cover;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
.section{
	background: #fff url("images/cloud_semi_trans.png") no-repeat;
	background-size: cover;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
.center_image{
	margin: 0 auto 5% auto;
	width: 100%;
}
#footer{
	background: #fff url("images/cloud_semi_trans.png") no-repeat;
	background-size: cover;
	text-align: center;
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}

Now there is a lot that’s changed here, most of it we have seen before, but lets have a look at a couple of the new boys.

You will notice that I have added a background image to a lot of the selectors using the following

body {
background: url(“static_green.jpg”) no-repeat;
background-size: cover;
}

You can also add images to your page using CSS this is usually done for including background images to your elements using an URL location.

The no repeat attribute stops the image from looping.

For background size I am using cover, this makes the image stretch to fit the container, even if it has to slightly cut of the edges, you can if you wish also use contain and auto.

I have also added the following to the <h1> tag:

h1 {
color: #fff;
font-size:60px;
}

Also the other significant change is the hexadecimal value used for setting the font colour

Hexadecimal values can seem quite complicated, for now all you need now is #fff is full white and #000 is complete black.

Find out a bit more about hexadecimals at mathsisfun.com

Make the rest of the changes to the script and open it in your browser.

Adding a few images and CSS selectors we have changed the aesthetic of the site, it looks more interesting and has made better use of white space to separate its elements.

We can take it a bit further by adding some more CSS rules.

body {
	background: url("images/static_green.jpg") no-repeat;
	background-size: cover;
	font-family: "Arial";
}
h1 {
	color: #fff;
	font-size:60px;
}
h2 {
	background: url("images/scribble.png") no-repeat;
	background-size: cover;
	font-size:38px;
	color: #fff;
	text-align: center;

}
#banner {
	background:#151e28 url("images/pinkcloud.jpg") no-repeat top right;
	background-size: cover;
	border: 4px solid #000;
	border-radius: 55px;
	margin: 0 auto 0 auto;
	padding: 5% 5% 10% 5%;
	max-width: 60%;
	
}
.section{
	background: #fff url("images/cloud_semi_trans.png") no-repeat;
	background-size: cover;
	border: 4px solid #000;
	border-radius: 55px;
	margin: 2.5% auto 2.5% auto;
	padding: 5% 5% 10% 5%;
	max-width: 60%;
	font-size:17px;
	color: #fff;
}
.box_image {
  	display: block;
  	margin: 5% auto 5% auto;
  	max-width: 90%;
}
.box_image_right {
	background: url("images/pic_bunting.png") no-repeat;
	background-position: center;
	background-size: contain;
	width:50%;
	float: right;
	padding: 6% 8% 6% 8%;
}
.box_image_left {
	background: url("images/pic_bunting.png") no-repeat;
	background-position: center;
	background-size: contain;
	width:40%;
	float: left;
	padding: 6% 8% 6% 8%;
}
.center_image{
	margin: 0 auto 5% auto;
	width: 100%;
}
#footer{
	background: #fff url("images/cloud_semi_trans.png") no-repeat;
	background-size: cover;
	text-align: center;
	border: 4px solid #000;
	border-radius: 55px;
	margin: 0 auto 0 auto;
	padding: 2% 5% 2% 5%;
	max-width: 60%;
	
}

We have changed the font-family in the body element level selector to Arial.

We added a font size of 38px to the <h2> tags, changed the colour to white and centre aligned them.

We changed the thickness of the border around each element to 4px rather than 2, this makes it pop out of the screen more effectively, we also added the following to the banner section.

margin: 0 auto 0 auto

This automatically adjusts the horizontal alignment of the elements based on the windows size whilst keeping the vertical position at zero.

There are also different variations of this margin rule for some of the other elements, the section margin also includes a 2.5% vertical margin, this is what gives the space between the section blocks.

We add padding to each of the sections, this is the inner spacing rather than the outer margin spacing.

Also for each of the elements we give a max-width property, this means whenever the window is scaled the elements will adjust their width to 60% of the current window size.

Adding percentage sizing to elements means that they will be scale-able and adjust to many different screen sizes.

Also any child elements within the parent with adjust accordingly to the percentage set.

We will now also change the text size and colour to the section class

Next we have added a new .box_image class selector

.box_image {
       display: block;
       margin: 5% auto 5% auto;
       max-width: 90%;
 }

Using the display block and auto margins we can center the image and give it a maximum width property.

Now when we scale this image it will stay in the center of the element and at a size ratio of 90% of its parent, this being the section element.

Next we add:

.box_image_right {
     background: url("images/pic_bunting.png") no-repeat;
     background-position: center;
     background-size: contain;
     width:50%;
     float: right;
     padding: 6% 8% 6% 8%;
 }

We add this class selector to the section images, this gives them a width that is 50% of the parent element, we also add padding left, top, right, bottom as a percentage too.

The Float right property takes the element out of the natural flow of the html and forces it to the right of the element.

We have also added a background image to the back of the foreground images this is the border decoration you can see round the outside.

We make the background image size cover the whole of the element and center it so it sits perfectly in place.

.box_image_left

This selector is almost identical to the Box_image_right except it floats the image left rather than right, obviously.

We next add a center_image selector which keeps the sections footer image within the bounds of the element

Again we add some simple margin rules and a width of 100% as we want it to span from one side to the other

Lastly but not least we style the footer much the same as we did with the other elements the one difference is that this text is aligned to the center using the text-align property

Open up the page again in your browser your should now have something that resembles the image below.

Now i’m no artist so the images you create for your site could look a lot better than the ones I edited or created.

In retrospect I think some of the images were a bit lower in resolution than I would have liked, but all in all I think it turned out looking pretty good.

I hope at the very least this tutorial has shown you how a simple sprinkling of CSS can be very effective at enriching your HTML, and that with a simple site structure you can create a nice scale-able web page.

To see some great sites made with just HTML and CSS visit CSS Design Awards

So what are Unique Visitors?

These are the visitors that are coming to your page for the first time, the way google analytic measures this is by collecting the sessions users IP address when they land on the page.

When a unique visitor then clicks onto one of your other pages of your site that page view will recorded as a visit and not another unique visitor viewing the page for the first time.

So a A unique visitor can visit as many other pages on your site, but can only be a unique visitor once.

Having a consistent amount of unique visitors lets you know that you are getting a lot of first time visits, meaning you site has good visibility and must be ranking well in the search engine.

How do I track my visitors? 

Well you can do this for free by simply creating a google account and then register you web page on the google analytics site.

Once you put in your website details you will be given a small snippet of code that you can include on your site, this will link your account with google analytics and allow you to get back data relating to visitors that land on your page.

Whats Google Analytics?

Google Analytics allows you to track people that visit your site by adding session cookies to the computer when they land on your page. This not only allows you to track your page hits, but also visitors behaviour

Cookies will hold information about what pages you jumped to, what links you clicked on and what page you exited from, this and a vast amount more.

For other websites, such as amazon, cookies can hold a whole host of information, including what interactions you have, what you are buying, or what offers to display to returning customers based on previous sale data.

This is all information that can be used by websites to improve the user experience.

Why Web Analytics is Important?

Analytics is essential for any websites growth because it give insight into the failing of a site and highlights areas in which to improve.

With the data about bounce rate, page views and exit rate alone you could target and diagnose most of your sites problems.

I have but touched on a few of the metrics available with in google analytics, for the full gamut of tool available and a better incite into implementing tracking for your site, I suggest visiting the google analytics official site to find out more.

Now that’s all fine and dandy, but I have created a site, installed the code tracking snippet and people are coming to visit, but looking at my google analytics people are leaving just as quickly as they come in, why?

Trouble is having lots of visitors is great, but if you have a high bounce rate or exit rate your content probably isn’t up to scratch.

Bounce rate is how many people come to your web site and then click off after only viewing a single page, this could be for a few different reasons:

• Content isn’t engaging or interesting enough
• The site is too confusing or overwhelming e.g too overloaded with pictures or ads
• Difficulty finding content or links to related content
• Your site doesn’t relate to the keywords or key phrases you have targeted

Many people may be too focused on getting traffic through keywords and trying to please the search engines, rather than trying to write content to please or engage its users.

A good rule of thumb is to always look at your page views, this will tell you how many pages a visitor has looked at when they have viewed you site, if this is high then you probably have something that they like.

If a visitor didn’t like your site or didn’t find your content engaging they will probably click off straight away and the page views for this visitor will be one.

Most people will have heard of the term “hits” in regard to web page visits, but using this as a guide to see how many people visit your site is actually wrong.

When a computer sends a request to a server to display a page in the browser each element that is loaded in will be considered a hit by google analytic terms.

So if you have a page with four images and a main text field, this will be regarded as five hits not one, when that visitor then clicks on to one of your other pages that has a further four images and a text field, this will end up registering as another five hits.

So in total you have ten hits accumulated by just one visitor over two pages, this is why you shouldn’t measure your site by how many hits its gets and go by how many unique visitor it gets instead.

How to Increase website engagement

Google have for along time now been wise to people trying to usurp the search engines by just creating web pages full of keywords and affiliate ads.

Because most sites like these are just filled with keywords its generally pretty unreadable and hard to understand them, people just wont stick around to read material like this, they will look else where.

It also very easy for google to find these kinds of sites and will just simple send them into the void where no one will ever see them again.

Googles mantra is to give value, then think about marketing later, this means that your priority is the content to your users, everything else being secondary.

So always write good rich content and if you want to rank better make your content long, try to hit two to three thousand words per page this will greatly effect your ranking ability over time.

So we have established it is important to produce great sticky content that will provide value to our visitors.

We need to understand the questions our visitors are asking us, using keywords or key phrases that they may already be searching for, and respond by answering these questions in an efficient and engaging way.

It is important that we have a good amount of unique visit, but also a good rate of returning traffics to the site.

Returning visitors means we have good content and by having lots of unique visitors means that we have good presence, whether it is in the search engines or through links from our social media sites.

For this purpose I am providing you with four of my top choices, here are the best html books for beginners.

HTML & CSS – Design and Build Websites

This book is the perfect introduction to HTML and CSS, it covers all the basics and essentials in a clear and concise manner. 

This book is in full colour, so is a visual treat, with code examples using the same colour structure as most modern IDE’s.

There are plenty of examples listed as you go through he book, so you can put in practice what you have learnt.

It teaches you from a scripting point of view rather than a programmer and only touches on light coding for simple behaviours and interactions.

This book is great at introducing concepts in an engaging way and breaks down content in to bite size chunks. 

This is perfect for the designer, hobbyist and anyone else who wants to dive into the world of HTML and CSS without having to delve too deep into programming.

Responsive Wen Design with HTML5 and CSS3

This book is a great introduction into the world of scale-able web design.

With the ever growing demand for responsive web design for mobiles and tablets, this book is a must have.

Because around 50% of people browse using their phones, this book details the importance of adapting your website for multiple platforms.

This book teaches you from the beginning the mindset of fluid and responsive design.

It also shows you what tools you can use for testing your script and how to convert your existing pages and make them responsive too.

This book with show you how to make fluid web design that will response quickly and efficiently to any device.

HTML Canvas For Games and Entertainment

This Books is a fantastic step into the world of HTML and the canvas element.

It teaches you how to utilise the canvas capabilities to draw, manipulate and animate images on the screen.

It will take you through how to use JavaScript to add behaviours to your html document.

This will begin with simple image manipulation, after a while you will move onto more complex things like making a simple animation using objects drawn to the screen.

Towards the end of the book you will build two complete games using this framework, one of them is a space bowling game the other is and asteroid avoidance game.

This book will give you a great understanding of the canvas element and how you can utilise it to add interactivity to your site

This book is a great stepping stone into the world of games design using HTML5.

A simple web page made with minimal HTML and a small amount of CSS

So you want to build a simple html page template for your site? Now there are a number of ways to do this. One of the quickest way would be to create a WordPress site

If you want to take out all the complications of scripting download: how to create a website with wordpress PDF

WordPress is a great option if you want to quickly create a site for your business or hobby, and there are many free downloadable themes that you can use to get your site looking good in a matter of minutes.

If on the other hand you want to take a bit longer to create a very simple site using HTML and CSS then continue.

Also if you want to skip the basic html template we are going to create below and move on to creating the html page in the title image then move on to creating a simple Html Basic Template

Otherwise lets get to it…

The following will be a quick lesson in how to learn html, after that we will be creating the simple web page that will scale to work on tablets and mobile phones.

For this html tutorial all you will need is a text editor and a web browser, now unless you have a very limited computer set up these should be native to any system.

I use a program call Sublime Text, this is a free text editor that has some great tools for debugging script and code, another good editor is Notepad++ this again is a free text editor that is pretty much the same.

If you don’t want download anything new then you can simply use the regular Note Pad you get with Windows, they will all work the same.

Create a new folder first by right clicking on your desktop New>Folder name it simple site and then within the folder right click and select New>Text Document, we want to call the text file Simple_site with an underscore.

This is what our setup will look like:

HTML stands for – Hyper Text Markup Language and CSS stands for – Cascading Style Sheets. Both of these names can sound ambiguous at first, but simply one structures text within your document by marking it up with tags, the other will depict the style (how it looks) using selectors.

Now take the following text and copy it into your simple site text file

 Title  -   peter piper
 sub header - picked a peck of pickled peppers

paragraph -
   Peter Piper picked a peck of pickled peppers.
   A peck of pickled peppers Peter Piper picked.
   If Peter Piper picked a peck of pickled peppers,
  Where's the peck of pickled peppers Peter Piper picked?

This text document has a header, a sub header and a paragraph, to create the same thing in html we would mark the lines of text up with <tags> as follows…

To create the same thing in html we would mark the lines of text up with <tags> as follows…

 <h1>peter piper</h1>
 <h2>picked a peck of pickled peppers</h2>


<p>Peter Piper picked a peck of pickled peppers.
   A peck of pickled peppers Peter Piper picked.
   If Peter Piper picked a peck of pickled peppers,
   Where's the peck of pickled peppers Peter Piper picked?</p>

• H1 stands for Header 1
• H2 stands for Header 2
• P stands for paragraph

We use brackets <> to signify that this is a tag and that the text in between is being formatted in some way.

To show the start and end of the element we have to have both an open tag <p> and a corresponding closing tag </p> this is denoted by the forward slash.

Now as it is this wouldn’t be a valid html document because we haven’t told the browser to treat it as one. To do this you need to add the following tag to the top of the page:

<!DOCTYPE html>

This explicitly specifies the rules of the document so that the browser can render its properties correctly.

We will go back to the example and add the DOCTYPE deceleration and a few other tags that I will explain

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Peter Piper</title>  
  </head>
  <body>
     <h1>peter piper</h1>
     <h2>picked a peck of pickled peppers</h2>

     <p>Peter Piper picked a peck of pickled peppers.
     A peck of pickled peppers Peter Piper picked.
     If Peter Piper picked a peck of pickled peppers,
     Where's the peck of pickled peppers Peter Piper picked?</p>

  </body>
 </html>

Now the Above code is compliant and will show properly in a web browser.

If you ever want to find out if you code is cosha then you can add a link to your page or just simply add some html script directly into the text window here at the world wide web consortium page

The W3 provides a set of specifications that your web page should adhere to in order to meet a common standard within the world wide web.

If your html page meets the standards you have the prestige of displaying their approved icon on your page.

Back to the html….

We start off with the <!DOCTYPE html> this sits at the very top of the page providing the browser with rendering information.

The next tag is the <html> tag this specifies where the html script starts.

Between the opening tag and the corresponding closing tags, all the way at the bottom, comprises everything in your html page.

Now the next tag is the <header> this holds meta data about the document, this includes the title, external links to scripts and style sheets and information about
data encoding within the document.

The <meta charset> is providing more information about the document, in this example the character encoding UTF-8.

Next is the <title> tag, this is not to be confused with the title within your page, this will usually be a <h1> tag, it is actually the text that appears in the tab when you open your page in a browser.

Your title is considered very important when it comes to Search engine optimisation (SEO), this is the act of making your site visible to the search engine after you have created it.

The word or phrase you put here can help a lot when google spiders crawl your site and deciding how to rank it.

So when it come to choosing your title take some time make sure its something that people might search for and don’t make it too long.

Now we close the header section with the </head> tag denoted by the forward slash.

It very important you don’t forget the closing tags without them your site may experience problems.

If in doubt validate it with the W3 world wide web consortium page

Now these first lines of script including the head tag, meta tag and Doctype deceleration can be confusing, but just know that the main part of you web sites structure is within the next segment of the page the <body></body>

Apart from adding some links to external files and scripts (we will go into this soon ) you don’t have to worry about the first part too much, in fact you can create and save a template of an html document with the following:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
	<title>x</title>
</head>
<body>

</body>
</html>

This will stop you from having to type the same script out every time.

The body tag is the daddy of tags because between the opening and closing of these is essential the entirety of yours site.

A site usually comprises of a banner, a main logo, individual divisions or sections that make up the body of our page, and the footer of our page.

The <body> is where the HTML magic happens…

In our script we will be adding a <h1> tag a <h2> tag and a <p> tag. The different headers vary in size from 1 – 6 respectively:

The <h1> should really only be used once within your page, this is mainly for SEO reasons because you main <title> and <h1> tags are important for distilling your site down and determining its context.

That and a strong first few paragraphs and you site will have a much better chance of reaching people.

On the other hand if you aren’t too worried about this you can use it repeatedly – nothing is stopping you!

It is better to use the <h1> once and the use either <h2> or <h3> you can also change the settings of your header tags with CSS by adding ID’s or Classes to them (more on this later ).

For the this example we will add the main heading using the <h1> tag and a sub heading using the <h2> tag.

We then add the main paragraph to the body using the <p> opening and closing tags respectively.

Now anything you place between these tags will be formatted as a paragraph this means that it will automatically have a line break added to the end ( vertical space ).

We then close off the </body> and close of the </html> tag signifying the end of the html page.

The last thing will be to check this simple html page in your browser of choice…

Now personally I use Chrome as my browser of choice, but you can use any one of the browsers out there, just be sure to test your html page on as many browser as possible as they can act kinda differently to your script.

To check what effects different elements of your web page will have on different browsers, or just for an all round compatibility check you can visit caniuse.com

Lets have a look at what this looks like in a web browser, so what ever text pad you have been working in, whether it is the simple windows text pad or sublime text, save it with the extension .html

Once you add the .html extension the file association will change to your current browser, the icon will also change from a note pad to what ever your browser app icon is.

In my example it is a chrome icon, double click on it and it will open the file in your browser of choice.

Now you may be thinking all this work for that, but this is a very important first step.

This page may not look like much now, but with CSS the more stylish brother of html we will make it look a whole lot better.

We will be adding an external CSS file to our html document we will do this first by creating a new text document and saving it with the name simple_page and the file extension .css

It doesn’t matter that we are using the same name as our html file because it is a different file type.

Like with the .html extension it will now associate the file as a CSS file and data will be read from this file accordingly.

Your folder should now look like this:

We now have two files, your html file with the structure of our page and a new CSS file that will be the style of our page.

Separation of files is seen as good practice, this will give you site a solid foundation and lends well to progressive enhancement.

This more modular approach to web design will also make it easy to make changes to your documents in the future.

First open your CSS file and add the following text at the top of the page.

body {
	color: white;
	background-color: black;
}

This is what we call a selector this will select an element or your page and allow your to change its properties.

In this case we are changing the color ( short for text-colour) to white and the background-color to black thus inverting the colours.

If you refresh you screen you will notice that nothing actually happens this is because we haven’t told the html document where to find the CSS file.

To do this we will add the following to the header of the html document:

<link rel=”stylesheet” href=”simple_page.css”>

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Peter Piper</title>
     <link rel="stylesheet" href="simple_page.css">  
  </head>
  <body>
     <h1>peter piper</h1>
     <h2>picked a peck of pickled peppers</h2>

     <p>Peter Piper picked a peck of pickled peppers.
     A peck of pickled peppers Peter Piper picked.
     If Peter Piper picked a peck of pickled peppers,
     Where's the peck of pickled peppers Peter Piper picked?</p>

  </body>
 </html>

We us the <link> tag to connect a CSS file, we tell it the link is in relation to a “stylesheet” which is exactly what it is, and then finally we give it the location.

The location of the file is in the same directory so you can simple put the filename and extension here.

Now we have added the link to the html file all of the style changes we make to the CSS file will automatically be applied when you refresh your browser.

Now if you refresh you browser you should get the following:

Now again this is nothing special, but it shows us that the html document is correctly referencing the CSS file and allows us to start making it more colourful and exciting.

If at anytime you want to check the validity of you CSS script then as before you can check it using the world wide web consortium page script checker, just make sure you use the tick box so it knows to expect CSS.

We are now going to be adding <div> tags to the html page to separate it out slightly.

The <div> tag is short for division this will enable us to divide the page into segments that will contain other elements within.

Having them separated in this more modular way will make it easier to apply styling or other behaviours to them later.

We will also be adding classes and Ids to out divs to enable us to specifically target our elements.

Lets have a look at how the script looks now:

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Peter Piper</title>
     <link rel="stylesheet" href="simple_page.css">  
  </head>
  <body>
    <div id="banner">
       <h1>peter piper</h1>
       <h2>picked a peck of pickled peppers</h2>
   </div>
    <div class="section">
       <p>Peter Piper picked a peck of pickled peppers.
       A peck of pickled peppers Peter Piper picked.
       If Peter Piper picked a peck of pickled peppers,
       Where's the peck of pickled peppers Peter Piper picked?</p>
     </div>
      <div id="footer">
        <p> © Peter Piper 2019</p>
      </div>
  </body>
 </html>

I have included the <div> opening and closing tags to signify where the division starts and finishes and have given the divs an id or class name.

We have a banner which will hold the header tags, an individual section that will hold the body text and a footer which will sit at the bottom of the page.

The difference between an ID and a class attribute is that the ID is generally used once for a specific element that will only be created once whereas a class can be use for any multiple instances.

So rather than given two identical segments different properties we can create one set of properties and use them on multiple divisions.

If you reload the page nothing actually happens, but if we start to make some more changes to the CSS file we can smarten things up a little.

Make the following changes to the CSS file:

body {
	color: white;
	background-color: black;
}
#banner {
	background-color:blue;
}
.section{
	background-color:red;
}
#footer{
	background-color:green;
}

I now have two ID selectors and one class selector, the class selector is denoted by the (.) symbol and the ID selector is denoted by the (#) symbol.

This is the way we can now laser target our on page elements and style them on an individual basis.

Start off by changing the background properties on each of the divs

This has created separation to our elements and we can start to see them as separate entities, lets make a few more changes to the CSS and make it look more like a web page.

body {
	color: black;
	background-color: white;
}
#banner {
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
.section{
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}
#footer{
	border: solid 2px black;
	border-radius: 55px;
	padding: 5%;
}

Now all we have done is add a border radius attribute to the divisions of 55px, inverted the colours back to black on white and added a padding to each division of 5%;

Load it back in the browser…

This is essentially the power of CSS because once you have the html marked up well and classes and IDs applied appropriately you can make vast changes with just a few amendments to the CSS.

Well this is the main work done, well done fore getting this far.

In the next section we will improve on this design and make a fully scale-able simple HTML page with images and filler text.

Go to making a simple site Html Basic Template