So you have read my first tutorial designers become front enders part 1 and now you want to start using some of what you have learnt with html and css. Well ok let’s go for it!

Well actually before you even start coding let’s talk setting up a site structure. This is completely up to you but to have some order and structure is a very good idea for maintainability and ease of use for yourself and anyone else who may have to pick up your site and work from it.

I am sure you already use a bit of structure when you do a new design, you probably have a main file a folder of assets a folder for the brief perhaps and maybe even a folder full of inspiration. Well setting up your site is sort of the same thing. You have components that contribute towards your final web page. You have your main html file, your pictures on that page, your styles to layout that page and colour it etc, then you may have your javascript files for plugins or certain javascript functions. Of course you could have these all lying in one place and your page would work fine but imagine re-visiting that to work on it in the future, what a mess!!

What I like to do is have my main file – index.html called index as that is the first page any browser will look for when someone navigates to your site (more info here: http://webdesign.about.com/od/beginningtutorials/f/index_html.htm). Then you have a folder called images where you can keep all your images for a small page or perhaps even a small site, for a larger site you are likely to have sub-folders in that images folder such as portfolio (for portfolio pieces), profiles (for staff members head shots), assets (for any icons you might use, general graphics you use across the site) again this all if it suits you but just some ideas. Then following suit you have a styles folder for your css stylesheets, again these could also include sub folders in larger sites. If you are using javascript then I would also use a scripts folder again possibly containing sub fodlers. Then that is about it! it is then time to start your webpage build!

Let’s do a real example, you get this design to build into html:

Where to begin?

So you would have seen in my previous tutorial how a basic site is set up in the head.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Site</title>
</head>
<body>

Great! so now it is ready to become a webpage. What I like to do is get the main structure in place first, putting all the divs in place etc. So here is how I would split this site apart:

Let’s get coding! Inside the opening <body> tag we put the overall container div.

<body>
    <div id="container">
    </div>

That is your main container controlling your site you will end up setting your site width with this and centring it, but more of that later.

Next down inside your container is the header area so we put a div inside that with an id of navigation, these id’s will be used for targeting styles with later. Now we have:

<body>
    <div id="container">
        <div id="header">
        </div>

</div>

I am sure you are seeing a pattern here. Then inside the header we have the logo area and the navigation area:

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="navigation">
            </div>
        </div>
     </div>

Cool so that is your top of the site ready to start work on, after the header we have the hero area, main content area and the sidebar area. As you build more complex sites these will probably have further div’s inside of them but let’s start simple for this tutorial.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="navigation">
            </div>
        </div>
         <div id="hero">
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
    </div>

Finally we have the footer:

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="navigation">
            </div>
        </div>
         <div id="hero">
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

There we go all your div’s are in place. One note on the logo, some old school sites might still use the H1 tag for their logo but this is a bad idea for SEO as every page will then have the same H1 so now we use a div. Also with the logo you could obviously just slap your image tag in that logo div to have your logo sat in place but it is much better practice to have it as a background image and real text in place, again more of that later.

Time to add some content! Inside your logo text you would put your company name in this case “my site” this would also usually be a link back to the homepage so let’s wrap it in a link tag, we are only coding the homepage so it does not need to go anywhere, for that we can just put a # in the href. One thing I have not explained so far is tabbing. To keep your code nice and neat and easy to decipher it is a really good idea to tab each element in. So body is there then inside the body is your container so you tab that in, then inside the container you have the header div, inside that your logo div then inside that the logo text etc. This really helps you see what elements are inside what and to easily find the spot you need to edit in your code and you can follow the chain for CSS styles too.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
            </div>
        </div>
         <div id="hero">
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

Moving on to the navigation these are list items so let’s put an unordered list in place and these will also be links to other sections of the site (we are not building them today so we will put links to # for now).

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

Onto the hero, for this example we are keeping it very basic so no slider or anything like that just a standard image for this one. Of course if we was doing this more advanced this is like to be a slider of some sorts and we would use the font as real text and position the purple bar over the image and maybe animate it in etc but that is further down the line in your learning. When using images don’t forget them important alt tags.

<body>
                 <div id=”container”>
                                 <div id=”header”>
                                                 <div id=”logo”>
                                                                 <a href=”#”>My Site</a>
                                                 </div>
                                                 <div id=”navigation”>
                                                                 <ul>
                                                                                 <li><a href=”#”>Home</a></li>
                                                                                 <li><a href=”#”>About Us</a></li>
                                                                                 <li><a href=”#”>Gallery</a></li>
                                                                                 <li><a href=”#”>Contact</a></li>
                                                                 </ul>
                                                 </div>
                                 </div>
                                 <div id=”hero”>
                                                 <img src=”images/hero.jpg” alt=”welcome to my site” />
                                 </div>
                                 <div id=”main-content”>
                                 <div>
                                 <div id=”sidebar”>
                                 </div>
                                 <div id=”footer”>
                                 </div>
                 </div>

The main content div will consist of a H1 for the main title and then paragraphs for all the text.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
             <img src="images/hero.jpg" alt="welcome to my site" />
         </div>
         <div id="main-content">
             <h1>What is this page about?</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan turpis sit amet elit sollicitudin, ac imperdiet metus blandit. Donec eu tempor turpis, dignissim fringilla velit. Ut eleifend tortor massa, eget mattis leo aliquam id. Nunc varius et urna et blandit. Proin sit amet lacinia sapien, in ornare ante. Phasellus at sagittis est, in rhoncus mauris. Maecenas suscipit ultrices tortor vel dapibus. Donec vel semper sem, vitae malesuada turpis. Morbi ut magna nec risus faucibus posuere.</p>

             <p>Cras condimentum congue commodo. Vivamus placerat facilisis feugiat. Curabitur fermentum ac augue nec dapibus. Proin non blandit sem, sed facilisis diam. Ut felis diam, porttitor non eros a, porta luctus lorem. Nunc faucibus porta dui, ut porta neque ullamcorper porttitor. Maecenas nunc magna, cursus ut felis eu, ullamcorper pellentesque purus. Fusce sit amet faucibus lectus. Phasellus ultrices commodo nisi, a iaculis massa aliquam at. Sed bibendum felis id magna auctor, sit amet mollis ante ornare. Vivamus porttitor accumsan metus sit amet mollis. Maecenas convallis rhoncus turpis, semper mattis ante bibendum nec. Vivamus quis gravida erat. Aliquam quis turpis ligula. Nam eget metus diam. Sed vehicula, est sit amet fringilla gravida, massa mi fermentum augue, eget laoreet est augue quis ligula.</p> 
             <p>Vivamus rhoncus risus at dictum bibendum. Donec at consectetur lectus. Aliquam vehicula eleifend arcu, vel egestas ante tincidunt condimentum. Maecenas eleifend tincidunt dignissim. Aliquam accumsan, dolor eu placerat iaculis, sem nunc blandit velit, id facilisis justo massa non turpis. Nulla viverra eget tellus sit amet vestibulum. In rutrum, enim sit amet aliquam sodales, metus lorem dignissim massa, quis fringilla risus dui vel est. In laoreet id mi eget eleifend. Vestibulum tempus lacinia libero id dictum. Nam volutpat rhoncus augue in mattis. Nunc nec ultricies augue, eu vulputate metus. Integer sollicitudin nunc eu elementum pretium.</p>
             <p>Sed porta consectetur turpis. Mauris varius elementum cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas purus ut nisl blandit, non ornare justo lacinia. Maecenas posuere at elit ut accumsan. Cras pretium, ligula non condimentum vehicula, lorem turpis suscipit quam, nec varius orci nisl quis mauris. Curabitur cursus non orci vel tempor. Praesent egestas dolor mi, in molestie tortor imperdiet eu.</p>
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

Wow looks like a lot now right? But you can see as step by step your webpage grows without you even realising it and looks more complex than it actually is. Time for the sidebar content. This will consist of a H2 tag for the heading and then images with links around them as these would usually link off to the portfolio piece or activate a lightbox etc. Again as I keep saying this is just a basic tutorial to get some structure and styles in place so we will just have these as images in the page with links again to nowhere we use # for them. Finally we will have the button at the bottom this wil just be an anchor tag which will style up later to appear like the button and add hover states etc. As with the hero the button uses a special font but we will just use an image when we style it later on.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
             <img src="images/hero.jpg" alt="welcome to my site" />
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

The main content div will consist of a H1 for the main title and then paragraphs for all the text.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
             <img src="images/hero.jpg" alt="welcome to my site" />
         </div>
         <div id="main-content">
             <h1>What is this page about?</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan turpis sit amet elit sollicitudin, ac imperdiet metus blandit. Donec eu tempor turpis, dignissim fringilla velit. Ut eleifend tortor massa, eget mattis leo aliquam id. Nunc varius et urna et blandit. Proin sit amet lacinia sapien, in ornare ante. Phasellus at sagittis est, in rhoncus mauris. Maecenas suscipit ultrices tortor vel dapibus. Donec vel semper sem, vitae malesuada turpis. Morbi ut magna nec risus faucibus posuere.</p>

             <p>Cras condimentum congue commodo. Vivamus placerat facilisis feugiat. Curabitur fermentum ac augue nec dapibus. Proin non blandit sem, sed facilisis diam. Ut felis diam, porttitor non eros a, porta luctus lorem. Nunc faucibus porta dui, ut porta neque ullamcorper porttitor. Maecenas nunc magna, cursus ut felis eu, ullamcorper pellentesque purus. Fusce sit amet faucibus lectus. Phasellus ultrices commodo nisi, a iaculis massa aliquam at. Sed bibendum felis id magna auctor, sit amet mollis ante ornare. Vivamus porttitor accumsan metus sit amet mollis. Maecenas convallis rhoncus turpis, semper mattis ante bibendum nec. Vivamus quis gravida erat. Aliquam quis turpis ligula. Nam eget metus diam. Sed vehicula, est sit amet fringilla gravida, massa mi fermentum augue, eget laoreet est augue quis ligula.</p> 
             <p>Vivamus rhoncus risus at dictum bibendum. Donec at consectetur lectus. Aliquam vehicula eleifend arcu, vel egestas ante tincidunt condimentum. Maecenas eleifend tincidunt dignissim. Aliquam accumsan, dolor eu placerat iaculis, sem nunc blandit velit, id facilisis justo massa non turpis. Nulla viverra eget tellus sit amet vestibulum. In rutrum, enim sit amet aliquam sodales, metus lorem dignissim massa, quis fringilla risus dui vel est. In laoreet id mi eget eleifend. Vestibulum tempus lacinia libero id dictum. Nam volutpat rhoncus augue in mattis. Nunc nec ultricies augue, eu vulputate metus. Integer sollicitudin nunc eu elementum pretium.</p>
             <p>Sed porta consectetur turpis. Mauris varius elementum cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas purus ut nisl blandit, non ornare justo lacinia. Maecenas posuere at elit ut accumsan. Cras pretium, ligula non condimentum vehicula, lorem turpis suscipit quam, nec varius orci nisl quis mauris. Curabitur cursus non orci vel tempor. Praesent egestas dolor mi, in molestie tortor imperdiet eu.</p>
         <div>
         <div id="sidebar">
             <h2>Some work from my portfolio</h2>
             <a href="#"><img src="images/portfolio/placeholder1.jpg" alt="placeholder" /></a>
             <a href="#"><img src="images/portfolio/placeholder1.jpg" alt="placeholder" /></a>
             <a href="#">View my portfolio</a>
         </div>
         <div id="footer">
         </div>
    </div>

Finally the footer we can add the colour and padding and everything needed with styles so all we need here is some simple text.

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
             <img src="images/hero.jpg" alt="welcome to my site" />
         </div>
         <div id="main-content">
         <div>
         <div id="sidebar">
         </div>
         <div id="footer">
         </div>
    </div>

The main content div will consist of a H1 for the main title and then paragraphs for all the text. The design just asks for some simple copyright text, for the copy simple use the html code ©

<body>
    <div id="container">
        <div id="header">
            <div id="logo">
                 <a href="#">My Site</a>
            </div>
            <div id="navigation">
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contact</a></li>
                 </ul>
            </div>
        </div>
         <div id="hero">
             <img src="images/hero.jpg" alt="welcome to my site" />
         </div>
         <div id="main-content">
             <h1>What is this page about?</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan turpis sit amet elit sollicitudin, ac imperdiet metus blandit. Donec eu tempor turpis, dignissim fringilla velit. Ut eleifend tortor massa, eget mattis leo aliquam id. Nunc varius et urna et blandit. Proin sit amet lacinia sapien, in ornare ante. Phasellus at sagittis est, in rhoncus mauris. Maecenas suscipit ultrices tortor vel dapibus. Donec vel semper sem, vitae malesuada turpis. Morbi ut magna nec risus faucibus posuere.</p>

             <p>Cras condimentum congue commodo. Vivamus placerat facilisis feugiat. Curabitur fermentum ac augue nec dapibus. Proin non blandit sem, sed facilisis diam. Ut felis diam, porttitor non eros a, porta luctus lorem. Nunc faucibus porta dui, ut porta neque ullamcorper porttitor. Maecenas nunc magna, cursus ut felis eu, ullamcorper pellentesque purus. Fusce sit amet faucibus lectus. Phasellus ultrices commodo nisi, a iaculis massa aliquam at. Sed bibendum felis id magna auctor, sit amet mollis ante ornare. Vivamus porttitor accumsan metus sit amet mollis. Maecenas convallis rhoncus turpis, semper mattis ante bibendum nec. Vivamus quis gravida erat. Aliquam quis turpis ligula. Nam eget metus diam. Sed vehicula, est sit amet fringilla gravida, massa mi fermentum augue, eget laoreet est augue quis ligula.</p> 
             <p>Vivamus rhoncus risus at dictum bibendum. Donec at consectetur lectus. Aliquam vehicula eleifend arcu, vel egestas ante tincidunt condimentum. Maecenas eleifend tincidunt dignissim. Aliquam accumsan, dolor eu placerat iaculis, sem nunc blandit velit, id facilisis justo massa non turpis. Nulla viverra eget tellus sit amet vestibulum. In rutrum, enim sit amet aliquam sodales, metus lorem dignissim massa, quis fringilla risus dui vel est. In laoreet id mi eget eleifend. Vestibulum tempus lacinia libero id dictum. Nam volutpat rhoncus augue in mattis. Nunc nec ultricies augue, eu vulputate metus. Integer sollicitudin nunc eu elementum pretium.</p>
             <p>Sed porta consectetur turpis. Mauris varius elementum cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas purus ut nisl blandit, non ornare justo lacinia. Maecenas posuere at elit ut accumsan. Cras pretium, ligula non condimentum vehicula, lorem turpis suscipit quam, nec varius orci nisl quis mauris. Curabitur cursus non orci vel tempor. Praesent egestas dolor mi, in molestie tortor imperdiet eu.</p>
         <div>
         <div id="sidebar">
             <h2>Some work from my portfolio</h2>
             <a href="#"><img src="images/portfolio/placeholder1.jpg" alt="placeholder" /></a>
             <a href="#"><img src="images/portfolio/placeholder1.jpg" alt="placeholder" /></a>
             <a href="#">View my portfolio</a>
         </div>
         <div id="footer">
             &copy; My Site 2014. All rights reserved
         </div>
    </div>

Start To Style

Right so we have all our structure and content in place. Now it is time to lay this out and actually start making it look like the design. The first place to start is to use a reset css. You can make your own or use one some kind folk have already made for us. A reset basically makes your elements appear the same in all browsers. As browsers set their own rules on margins and paddings on elements such as paragraphs a reset will make them all the same straight away rather than try and tackle them individually later on when you have set your own. I usually use Eric Meyer’s css reset but there are many more out there.

To include this in your site you just need to use the link code in your <head> section:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=" styles/reset.css" type="text/css" rel="stylesheet">
<title>My Site</title>
</head>

Then to start adding our own styles to layout all these divs add the font styles the colours and everything else you would include all your stylesheets you use. Generally for sites I use files such as structure.css for the layout of the site, typography.css for all the different font styles I use, a main.css file for all your specific styles over the site such as button styles etc, then this could grow too many other files depending on the size and complexity of the site. In fact when it comes to the images for assets I mentioned before I would use sprites too but that is a whole other kettle of fish and as again I repeat this is super basic to get you started so we will use separate images (maybe some small sprites for hovering image elements) and just one stylesheet called main.css so let’s create that and hook it up in your head again after the reset.css so the browser will load all the resets first and then work on your styles to make it appear how you desire.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=" styles/reset.css" type="text/css" rel="stylesheet">
<link href=" styles/main.css" type="text/css" rel="stylesheet">
<title>My Site</title>
</head>

The whole background other than the site container is black so we colour the body background black, we use the html tag in there too as some browsers add a little border:

body,html {
     background-color: #000;
}

The bulk of this page uses the font arial for all the type other than the graphical pieces which we are using plain images for with the text saved on them. Let’s start our stylesheet with an overall rule for making the text be arial with fallbacks in place and most of our text is 14px so we can set that too, most of our text is also black so let’s set that as a general rule.

body, p, h1, h2, h3, h4, h5, li, a, div {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #000;
}

I am sure you are fed up of looking at your page in a huge mess so let’s get the structure in place next.

Starting with the container we know this site is 980px wide and we will want it to be centred in our browser window, easy, but don’t forget there is 40px padding around in this container too on the top and both sides, so we have to reduce that off the total width, don’t forget to make this have the background white as well:

#container {
     width: 900px;
     margin: 0px auto;
     padding: 40px 40px 0px 40px;
     background-color: #fff;
}

I have used the short hand margin css there, so it is adding 0px margin to top and bottom and auto to left and right which basically as it says does an auto margin to keep the site in the center of the window.

Next down we have the header. So this has the logo and navigation inside it which will be floated and the navigation which will also be floated, that is coming up shortly so don’t worry. This can sometimes cause elements below to end up floating in strange places so what we have to do with the header is put a clear in place and then we will add the padding to have the white space above and below the header area. What is best practice for clearing elements is to add in a clearfix rule we would add this class to whatever elements we needed to clear that could have an expanding or fluid height.

This is how the clearfix rule would sit in your styles:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

So simply add that class to your header, while we’re at it let’s add that class to the container too as that will have floated elements inside of it that could cause problems:

<div id="header">
<div id="container">

Then your specific styles for the header padding which has padding bottom of 30px:

#header {
    padding: 0px 0px 30px 0px;
 }

That is about it for the header container, next up the logo styling.

We have the image for the logo saved out as a transparent png (doesn’t have to be but it is best to incase your site background colour changed or something like that). It is 245px wide and 70px high so we know the div that will contain this logo would need to be 245px by 70px. This div also needs to be floated t the left so that it floats to the left of the screen and then other elements can float alongside it, just like the navigation will. We write that like this:

#logo {
    width: 245px;
    height: 70px;
    float: left;
 }

So that’s great we have the block there floating in place, now we need it to be the actual image logo. Where we want this to be a link and anchor tags are not block level elements and we need this to have the set height and width we need to make it a block, simply by using display: block simple ey! Here is how that looks with the same height and width set as the logo image.

#logo a {
    display: block;
    width: 245px;
    height: 70px;
}

Time to get it looking like your logo! To get the image in place we simply use the background-image css property:

#logo a {
     display: block;
     width: 245px;
     height: 70px;
     background-image: url(../images/logo.png);
}

Cool so we are starting to get some graphics in there, but hang on that text is still visible overlaying your logo! We need to do a little trick here to hide that but keep the text in the html. I use the following technique but if you give it a quick google there are a few options out there.

#logo a {
     display: block;
     width: 245px;
     height: 70px;
     background-image: url(../images/logo.png);
     text-indent: -9999em;
     overflow: hidden;
}

What this does is indent the text -9999em off the area which obviously makes it appear way off the screen so you cannot see the text over the logo anymore. However that wouls still be visible on the screen if you scrolled miles off to the left and makes your site appear very wide. Adding in the overflow hidden makes it not visible and like magic it isn’t there anymore!

As you can see that makes it float lovely to the left and we see the logo but stacked up next to it is the navigation list that does not look right. We need that over to the right and all on one line. To move it to the right is simple enough we tell it to float right:

#navigation {
     float: right;
}

Cool! Now to get the list items to display in one line we tell them to float left:

#navigation li {
     float: left;
}

Now to add the padding and the little bar separators. The bars could be put directly into the code as the | character but let’s do it with a border style.

#navigation li {
                 float: left;
                 padding: 0px 20px;
                 border-right: 1px solid #3c1053;
 }

Great apart from that last iten “contact” that should not have the padding on the right or the border according to the designs. To tackle that we can give it its own class to remove that, like so:

<div id="navigation">
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Gallery</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</div>

#navigation li.last {
     padding-right: 0px;
     border: none;
}

Looking good! Now to have the actual links in there looking correct. Pretty simple really, we just have to remove the text decoration as it is known in CSS (basically remove the underline) and colour it correctly and while we are at it let’s give it a hover colour of a deep grey too. Plus the words are all in caps, again we could do this direct in the code but when a site gets larger and you might have this menu on multiple pages you would have to edit it on every one (depending on how you have set your site up) so it is a lot easier to do it in styles with text-transform:

#navigation li a {
     text-decoration: none;
     color: #3c1053;
     text-transform: uppercase;
}
#navigation li a:hover {
     color: #333;
}

We are now pretty much there with the header area but have you noticed the navigation is aligning to the top of the logo instead of the bottom? To fix that we just go back into our header styles and margin it down by 55px in this case:

#navigation {
     float: right;
     margin-top: 55px;
}

Now the header is all done, let’s go down to the next block which is the hero. It is pretty much there we just need to add the purple 2px border and margin below it to space the content out:

#hero {
                 border: 2px solid #3c1053;
                 margin-bottom: 30px;
 }

We are moving along nicely now. Time to put the main content block into place. From the design we can see that this is another block that has to float to the left as the sidebar has to sit to the right. We can also see that this has padding on the sides as it is slightly indented from where the hero image aligns on the left. The main content are also sits in two thirds of the available space. A quick bit of maths to figure out how wide it should be is this:

980px (total width) – 80px (left and right padding on container) =900px

900px /3 = 300px (one third)

300px * 2 = 600px (two thirds)

600px – 40px(padding left and right of main container) = 560px

So there we have it your main content div needs to be 560px wide with padding left and right of 20px each and we will add some margin to the bottom too so it always has that breathing space, your styles will look like this:

#main-content {
                 float: left;
                 width: 560px;
                 padding: 0px 20px;
                 margin-bottom: 30px;
 }

Now it is just styling the text inside of that div. The H1 needs to be a font size of 18px and be bold and have 20px margin below:

h1 {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 20px;
}

The paragraphs are already set up font family and size wise from out beginning styles so now we just have to add the bottom margin of 20px we need:

p {
     margin-bottom: 20px;
}

Now we can move onto the sidebar. Although this looks like it is appearing in the correct spot if this sidebar content went longer that the main content area it would shoot all the way over to the left instead of being contained in the sidebar column. So we just have to float it left and give it the width of a third we figured out earlier and also add the same margin like we did for the main content area so that it will always have breathing space below it:

#sidebar {
     float: left;
     width: 300px;
     margin-bottom: 30px;
}

Now to style the elements inside starting with the H2. This appears the same as the H1 so what we can do here is concatenate them styles by simply adding a “,” to separate the different elements it should apply to:

h1, h2 {
    font-size: 18px;
     font-weight: bold;
     margin-bottom: 20px;
}

Then the portfolio images inside of that just need a margin bottom:

#sidebar img {
     margin-bottom: 20px;
}

Cool, now for the button again we need to make this a block element so we can set the width and height and then use a background image and our little text indent trick again. But let’s do a very small sprite for this so we can get a hover effect without having to load in a second image. It is really easy honest! Just create a graphic out of the button like this:

Basically it is your two state sin one graphic then using background position we can adjust it as you hover over it, we adjust it by minus 295px as the hover graphic is 295px over from the left of the start of the image:

.button {
    display: block;
    width: 255px;
    height: 50px;
    text-indent: -9999em;
    overflow: hidden;
    background-image:url(images/button.png);
    background-position: 0px 0px;
}
.button:hover {
    background-position: -295px 0px;
}

When you get further into your developer learning sprites are a real super tool and a bit of a saviour! But you will learn that, maybe I will teach you one day.

Your right near the end, well done! Finally we have the footer. This is simple enough we clear it just to make sure it won’t float up into the content anywhere and give it a background colour and the padding, simple and you are probably a whizz at that sort of stuff by now! Plus we need to make the text white and add some margin to the top to keep it nicely spaced away from the content above, again easy stuff for you now:

#footer {
                 clear: both;
                 background-color: #3c1053;
                 padding: 20px;
                 color: #fff;
                 margin-top: 30px;
 }

That my friends is about it! You have built your first webpage! This still might not be quite pixel perfect but I have done that a little intentionally so you can go through find the little discrepancies and fix it and learn by doing so yourself. Well I can’t just hand you everything can I!

I hope you have enjoyed your first steps and you are now excited to play around more, learn more and try more. That is the best way to learn I find, just look around there is tons of stuff out there to help you along then just play and have fun and the more you do it the more you will remember everything and suddenly you will be building full websites with ease.
Of course if you want to check out the full code then you can download it here. If you need any help or anything like that feel free to drop a comment and I am sure I or someone else can help you.

Blog

Pure CSS Hover Menu With Less Pain Points

Create a checkbox toggle switch

Increase spaces in dashed border

Future of CSS

Sticky Header and Nav with CSS and jQuery

Owl Carousel Zoom Image Function

Implementing and Styling Owl Carousel

Draw using pure CSS and HTML

Fixing Picturefill Firefox Bug

What you might not know about text-decoration

Responsive Dropdown Multi-Level Menu

Remove The Gaps On inline-block

Gzip with 1and1

Coding Your Own Responsive Grid

Flexslider Zoom Using Elevate Zoom

Flexslider With Zoom Image Function

Responsive Web Design and Wireframing

Designers Become Front-enders Part 2: Coding Your First Webpage

The Gift Finder

Designing responsively

Animating layout at breakpoints

Implementing, Styling and Extending Flexslider

What are Frameworks? 20 Best Responsive CSS Frameworks Explained

Retro Website Inspiration

47 Inspiring CSS3 Animations

jQuery The Basics Part 2

CSS3 2D and 3D Transform Techniques

Why I <s>like</s> LOVE WordPress

Jquery &#8211; The Basics

The Use of Basic Shapes and Colour in Design / The Influence of the Bauhaus

Designers Become Front-enders Part 1

Jquery – The Basics