6.

Website Homepage Layout Design Using Photoshop

Step 1: Create a new document

Create a new document (Ctrl+N) in Photoshop with the size 1200px by 750px. Then select the
Gradient Tool (G) and draw a gradient #792700 to #000000 from the top to the bottom of your
document.

Step 2: Add some colors to your background

Create a new layer, select the Brush Tool (B), select a soft brush with the diameter 300px and add
some colors to your layout. I have used red, orange and blue. Name this layer "color."

Step 3: Add a texture to the background

Now we are going to create a texture for our background. Open in Photoshop the leafs image which
you have downloaded at the beginning of the tutorial and move it into your document using the Move
Tool (V). Right-click on this layer and select Convert to Smart Object. Then go to Filter > Artistic >
Film Grain and use the settings from the following image. Then go to Filter > Pixelate > Mosaic, and
again use the settings from the following image. Set the blend mode for this layer to Difference, the
opacity to 30% and name it "texture"

Step 4: Create a dark background for the content

Create a new layer, select the Rounded Rectangle Tool (U), set the Radius to 3 pixels and create a
rounded black rectangle. Then double-click on this layer to open the Layer Style window and use the
settings from the following image for Drop Shadow. Set the opacity of this layer to 70% and name it
"black shape."

Step 5: Use groups to organize your layers

Hold down the Ctrl key and select all the layers which you have created until now and then group
them (Ctrl+G). Name the group "background."

Step 6: Create more groups

Create a new group (Layer > New > Group) and name it "home." Then create another group inside
the "home" group and name it "logo."

Step 7: Add a logo and a tagline

Create a new layer inside the "logo" group. Then select the Type Tool (T) and write the name of your
layout using the color #f4f4f4. Double-click on this layer to open the Layer Style window and use the
settings from the following image. Then create a new layer and write a tagline using the color
#eeeeee.
Step 8: "Sign up" and "login" buttons

Now we are going to create two buttons in the upper right corner of our layout. Create a new group
and name it "Sign up | Login." Then select the Rounded Rectangle Tool (U) and create a rounded
rectangle like I did. Double-click on the shapes layer to open the Layer Style window and use the
settings from the following image. Set the foreground color to white and use the Type Tool (T) to write
the words "Sign up | Login" on your button. Set the opacity of the text layer to 75%.

Step 9: Create a blue line with the height of 1 px

Create a new group and name it "Navigation." Create a new layer, select the Single Row Marquee
Tool and click once on your document to create a selection with the height of 1px. Fill that selection
with the color #406f94 and delete what is outside of the black rectangle using the Rectangular
Marquee Tool (M). Set the opacity of this layer to 40% and name it "Line."

Step 10: Add a gradient to the navigation bar

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did (note:
you can use some guides to help you create the selection). Then select the Gradient Tool (G) and
draw a gradient #35423e to transparent from the bottom to the top of the selection. Hit Ctrl+D to
deselect. Then go to Filter > Noise > Add Noise and use the settings from the following image. Name
this layer "gradient" and leave a distance of 1 pixel between the line and the gradient.

Step 11: Write the names of your layouts pages

Select the Type Tool (T) and write the names of your layouts pages in the navigation bar. Then
double-click on the text layer to open the Layer Style window and use the settings from the next
image. The font which I have used is called Greyscale Basic.

Step 12: Create a separator

Now we are going to create a separator. Create a new layer, select the Single Column Marquee Tool
and click once on your layout. Then select the Rectangular Marquee Tool (M), click on the "Intersect
with selection" button from the option bar and create a selection like the one from the next image. Fill
the selection with white and hit Ctrl+D to deselect.
Step 13

Double-click on the layer which you have created at the previous step to open the Layer Style window
and use the settings from the following image. Name this layer "line 1."

Step 14:

Duplicate the "line 1" layer (Ctrl+J) and name the new layer "line 2." Select the Move Tool (V) and hit
once the right arrow on your keyboard to move this layer 1 pixel to the right. Then double-click on the
"line 2" layer to open the Layer Style window and use the settings from the following image.

Step 15: Convert the "line 1" and "line 2" layers into a smart object

Hold down the Ctrl key and select the "line 1" and "line 2" layers. Then right-click on one of them and
select Convert to Smart Object. Name the smart object "separator."

Step 16: Create a blue highlight

Create a new layer beneath the "separator" layer. Select the Rectangular Marquee Tool (M), create a
selection like the one from the following image and fill it with the color #35423e. Right-click on this
layer and select Convert to Smart Object. Go to Filter > Blur > Gaussian Blur and use the settings
from the next image. Then go to Filter > Noise > Add Noise and again use the settings from the
following image. Set the opacity of this layer to 60% and name it "highlight."

Step 17: Create a mask for the "separator" layer

Click on the "separator" layer in the Layers palette to select it and then go to Layer > Layer Mask >
Reveal All. Select the Gradient Tool (G) and draw a black to transparent gradient from the top to the
middle of your separator.

Step 18: Duplicate the separator

Hold down the Ctrl key and click on the "separator" and "highlight" layers in the Layers palette to
select them. Then select the Move Tool (V), hold down the Alt and Shift keys and then click on your
document and drag the mouse. Now you have duplicated the selected layers. Use the Move Tool (V)
to move these new layers to the right. Repeat this step and create as many separators as you need.

Step 19: Group all the separators

Select all the "separator" and "highlight" layers in the Layers palette and hit Ctrl+G to group them.
Name the group "separators."`

Step 20: Create a button for the active page

Now we are going to create a background for the active menu page to differentiate it from the others.
Select the Rectangle Tool (U) and create a rectangle like I did. Put this layer beneath the text layer
which contains all the pages names. Double-click on this layer and use the settings from the following
image for Gradient Overlay. Then name it "active menu" and set its opacity to 50%.

Step 21: Create the search bar

Create a new group (Layer > New > Group), name it "search" and put it above the "navigation" group.
Select the Rounded Rectangle Tool (U), set the Radius to 3 px and create a rounded rectangle like I
did using the color #104f59. Name this layer "text field" and set its opacity to 80%.

Step 22: Create the search button

Select the Rectangle Tool (U) and create a rectangle like I did. Put this rectangle in the right side of
the search bar. Double-click on this layer and use the settings from the following image for Gradient
Overlay. Then right-click on this layer and select Create Clipping Mask.

Step 23: Write the word "search" on your button

Select the Type Tool (T) and write the word "search" using the white color. Set the opacity of this layer
to 75%.

Step 24: Create a vertical line for the search bar

Select the Line Tool (U) and create a vertical line using the color #123036. Name this layer "line", put
it beneath the "button" layer and move it between the search bar and the button using the Move Tool
(V).

Step 25: Create a blue rectangle

Create a new group (Layer > New > Group) and name it "Showcase." Create another group inside
this one and name it "background." Select the Rectangle Tool (U) and create a rectangle using the
color #219aad. My rectangle is 983 px wide by 273 px height (you may want to open the Info palette
- Window > Info before you create the rectangle, so you can see the exact size of your rectangle).
Set the opacity of this layer to 55% and name it "bg4."
Step 26: Add a texture to the blue rectangle

Open in Photoshop the "pixelated blue rectangle" image, move it into your document and put this
image above your blue rectangle. Set the opacity of this layer to 55% and name it "bg3."

Step 27: Add a gradient to the blue rectangle

Ctrl-click on the "bg4" layers vector mask to select it, then create a new layer, select the Gradient
Tool (G) and draw a gradient #56b8e5 to transparent from the bottom to the top of your selection.
Then hit Ctrl+D to deselect.

Step 28: Create a smaller blue rectangle

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Select
the Gradient Tool (G) and draw a gradient #0f2b42 to #2a607f from the bottom to the top of your
selection. Then hit Ctrl+D to deselect. Name this layer "bg1."

Step 29: "Sign up" button

Create a new group (Layer > New > Group) and name it "sign up button." Select the Rounded
Rectangle Tool (U), set the Radius to 2 px and create a rounded rectangle like I did. Double-click on
this layer to open the Layer Style window and use the settings from the following image. Then select
the Type Tool (T) and write the words "sign up" using the white color.

Step 30: "Learn more" button

Repeat the previous step to create another button, but this time write the words "learn more" on your
button. Then create a new layer, select the Custom Shape Tool (U) and create a white arrow like I did.

Step 31: Create a button in the left side of the rectangle

Create a new group (Layer > New > Group) and name it "left arrow." Select the Ellipse Tool (U) and
create a circle using the color #406f94. Double-click on this layer to open the Layer Style window and
use the settings from the following image.

Step 32: Create an arrow inside the blue circle

Create a new layer and use the Custom Shape Tool (U) to create a white arrow. Double-click on this
layer to open the Layer Style window and use the settings from the following image. Set the opacity of
this layer to 50%.

Step 33: Create another arrow in the right side of the rectangle

Repeat the previous two steps to create another arrow in the right side of the blue rectangle.

Step 34: Create a featured image

Create a new group (Layer > New > Group) and name it "image." Put a small image in this group and
name the layer "image." Double-click on this layer to open the Layer Style window and use the
settings from the following image.

Step 35: Add a shadow to your image

Go to Layer > Layer Style > Create Layer. This will create a new layer beneath the original one with
the style of that original layer. Now go to Layer > Layer Mask > Reveal All, select the Gradient Tool
(G) and draw a black to transparent gradient from the bottom to the middle of your small image.
Name this layer "shadow."

Step 36: Add some text

Create a new group (Layer > New > Group), select the Type Tool (T) and add some text. Name this
group "text."

Step 37: Create a white rectangle

Create a new group and name it "content." Create another group inside this one and name it
"shadows." Select the Rectangle Tool (U) and create a rectangle like I did using the white color. Name
this layer "white shape" and set its opacity to 90%.

Step 38: Add a top shadow

Ctrl-click on the vector mask of the "white shape" layer to select it. Then create a new layer, select the
Gradient Tool (G) and draw a gradient #8f8f8f to transparent like I did. Set the opacity of this layer to
50% and name it "top shadow." Then select the Move Tool (V) and hit the down arrow on your
keyboard two times.

Step 39: Create two vertical shadows

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then
use the Gradient Tool (G) to draw a gradient #8f8f8f to transparent like I did. Add a mask to this layer
and use a big black soft brush to mask the center of the shadow. Set the opacity of this layer to 30%
and name it "vertical shadow 1." Duplicate this layer (Ctrl+J), name the new layer "vertical shadow 2"
and move it to the right.

Step 40: Create a horizontal line

Select the Line Tool (U) and create a horizontal like with the weight of 1 px and the color #aebcc7.
Name this layer "line."

Step 41: Add some text

Select the Type Tool (T) and write the content of your layout. You can also use images and anything
else you want.

Step 42: Create a gradient for the footer

Create a new group and name it "footer." Create a new layer inside this group, select the Rectangular
Marquee Tool (M) and create a selection like I did. Then set the foreground color to #555555, select a
big soft brush and paint with it over the top edge of the selection. Set the opacity of this layer to 50%
and name it "gradient."

Step 43: Add a line with the height of 1 px to the footer

Create a new layer, select the Single Row Marquee Tool and click on your document. Fill the
selection with white and hit Ctrl+D to deselect. Go to Layer > Layer Mask > Reveal All, select a big
black soft brush and mask this layer like I did. Take a look at the following image for reference. Set
the opacity of this layer to 15% and name it "line."

Step 44: Add some text to your footer

Select the Type Tool (T) and add some text for your footer

Output
We're making a very simple website here, with four basic elements: header, content,
sidebar and footer, the layout is going to look something like this:

Step 3 - Getting Started

Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. I'm
making it pretty narrow because I'm working on a laptop here, but feel free to go wider if you like more
space to work.

Now, I'm not going to go into the debate about screen resolutions and optimal website width here. All
you need to know is that the content of our page is going to be 800px wide, and that that's okay. So,
on our 1000px wide document, we're going to drag in guides at the 100 and 900px marks to set the
width. Our design has a sidebar, and I've decided to make it one third the width of the page. Two
thirds of 800 is about 530, so let's put in one more guide at 630px. We'll also set a nice background
color of #ebe8e8.

Step 4 - Header

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high
and the color is #23b6eb. Next draw a skinny, dark grey bar at the very top of the page, I used
#5d5a5a

Step 5 - Highlight
Now we're going to add a bit of a lighting effect on the blue header area. Create a clipping mask
above the blue layer, then Grab a big, soft brush (400px wide) and pick a color a bit lighter than the
blue background.

Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it
subtle, and try not to let the lighter color reach the edges of the page (this will be clear later). And set
the blending mode to screen.

Step 6 - Navigation Bar

Now we're going to add another bar to the bottom of the blue one, we can make it grey, but we're
going to add a gradient overlay so it doesn't really matter.

In the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees.
Step 7 - Footer
Next, let's draw a grey box at the bottom of the page,
I picked a color a bit darker than the grey from the bar
at the top.

Step 8 - Logo
Background

For the logo, we're going to draw a rectangle and add

another anchor point at the end, then drag it out to the
side. To get rid of the rounding, option-click on the
point.

Next, add some layer styles: a gradient overlay and a

1px stroke: Gradient from #aec457 to # cdf399
Text

Now for the text: big and bold.

Font: Myriad Pro

Style: Bold
Size: 60px
 Color: #36809a
To give it some depth, add an inner shadow:

Step 9 - Tagline
Next I just added in a short tagline:

Font: Arial
Style: Bold
Size: 30pt
Color: #e4dfdf

Step 10 - Navigation
Write in the navigation links nice and big, spread
them out and space them about evenly.

Font: Arial
Style: Bold
Size: 30pt
Color: #676666
Step 11 - Main Content
Time to paste in some dummy content. I used one bit
header, which will be h2 and the smaller one will be
h3 link to html ipsum.

Make the text boxes about The width of the first 2

thirds of the page. Text styles:

h2 Header:

Font: Arial
Style: Bold
Size: 36pt
Color: #0e5d7a
h3 Header:

Font: Arial
 Style: Bold
Size: 24pt
Color: #444444
Paragraph:

Font: Arial
Style: Normal
Size: 14pt
Color: #595858

The dates under "latest updates" are going to be

wrapped in a small tag, the font is the same as the
paragraph, but 12pt. I copied the news item twice,
cause I'm lazy.
Step 12 - Sidebar
Links

Next draw a skinny rectangle over our sidebar region,

color #d4d6d3, with a 1 px stroke of #bebdbd

Fill up the sidebar with some more dummy content,

you can get the free icons I used here. The fonts are:

h3 Headers:

Font: Arial
Style: Normal
Size: 24pt
 Color: #044055
List items:

Font: Arial
Style: Normal
Size: 18/14pt
Color: #373737

Button

Next we're going to add a "join our team" button

beneath the contributors links. The button is just a
rectangle with the same gradient as the logo, and a
1px stroke color c7c7c7. The text is:

Font: Arial
Style: Normal
Size: 24pt
Color: #434343

Step 13 - Footer
To finish off the mockup, just add a bit of dummy
copyright text, or whatever you want, to the footer.
The font is:

Font: Arial
 Style: Normal
Size: 14pt
Color: #e0e2e2

And that's it for the page design, it's nothing special,

but its simplicity will make it easier for you to follow
the rest of the process.

Slicing the PSD

Now that we have our lovely completed psd, it's time
to chop it up into pieces we can use. The idea here is
to use as few images as possible, and to make them
as small as possible. Okay, so let's start with the
header. We want it to stretch out across the whole
screen, no matter how wide it is. To do that, we're
going to grab a tiny little sliver of the header, and
have it repeat across the screen again and again, no
matter how wide.

Step 14 - The Slice Tool

Now you probably haven't had to use the slice tool
before, but it's really very simple. It just lets you slice
your file into teeny tiny pieces which can be exported
for the web.

Header

So, let's go ahead and grab a little slice of our header.

Click and drag to create the slice, just like the
rectangular marquee tool. Be careful to take the slice
from the side of the image, so you don't get any of the
highlight.
Now that we have this little stripe, we can repeat it
along the x-axis. The highlighted area, however, is
non-repeating, so we have to cut out the whole thing.
Slice the section of the header between the two
guides that denote our 800px width.

Footer

We use the exact same process for slicing the footer,

grab a skinny piece of the footer.
Everything Else

We just need a couple more images: the "subscribe"

icons and the "join our team" button.

Because the icons and the logo are irregularly

shaped, we're going to save them as transparent .png
files, so we're going to come back and grab them
separately.

Okay, so to slice the button, we can use the same

technique as the header and footer, but this time we
only need the one thin slice. When you make the
slice, be sure to not include the 1px stroke, (we're
going to add that in later) you might need to zoom in
really close for this.
Step 15 - Export for the Web
Now that we have our images all sliced up, let's save
them as optimized jpegs and put them someplace
useful.

Go to File/Save for web and devices... In the popup

window, hold down shift and click to select each of the
slices (again, you might want to zoom in) Check that
the "preset" drop-down menu is set to JPEG-High,
uncheck the "convert to srgb" and click "save"
In the next window that pops up, pick a name and
location for your images, I'm just going to save to the
desktop for now.

Make sure it's set to "images only", "default settings",

and "selected slices only."

Next, check out the location you saved your files to.
Instead of seeing the individual images, you'll just find
a folder labeled "images" where all your pictures are
located. The computer will give each image a number,
which isn't very useful. Check that you have the right
images, then name them appropriately.

Now, back to those pesky icons and the logo. Be sure

to hide all the background layers, then take out the
slice tool again and cut out nice little boxes around
each icon and the logo.
Now we go through the same process of exporting for
the web as we did with the jpegs, only this time be
sure to select PNG-24 from the "preset" dropdown
menu, and that the "transparency" box is
checkmarked. Rename these files too, and your
images folder should look something like this:
Alright, that's it, we're done cutting up our psd, and
we have all the images we need. Don't close
Photoshop just yet, though, we'll still need to pick out
colors, fonts, dimensions, etc.

Part 3 - HTML

Step 16 - Getting Started

Alright, time to dive into some html. The first thing
you're going to need is a code editor of some kind.
This is often an area of personal preference,
but I recommend starting off with a free one. For mac
and PC, I highly recommend Komodo edit as a first
code editor. It has a lot of features that are ideal for
beginners and advanced users.
One of the best features is the syntax-checker, which
is like the spell-check in word processors, which will
identify and explain little mistakes.
For PC, there are a lot more options, none of which
I'm very familiar with, but check out Andrew Burgess'
article 22 Neat Code Editors for Windows

In this tutorial, we're going to use Komodo edit, but

the principles are the same in every editor.

Step 17 - Setting up our

Folders
First things first, we need to set up a place to hold all
the files related to our site. Create a folder for your
website, mine is called "MySite", inside this folder,
create another folder containing the images we just
sliced.
Name this folder "images". Now we open up our code
editor, this part will be a bit different depending on
what software you're using:
If you're following along in Komodo, select "create
new project" and save/move the .kpf file to the
"MySite" folder. When you open up the file, the file
browser at the side of Komodo should display the
contents of the folder.
Next right-click on the project file, and scroll to "add"
and select "new file". In the window that pops up,
select "html(xhtml)" and name the file "index.html".
If you're using another editor, the process should be
similar, but the essentials are the same: you need to
create an index.html file, and it needs to be in the
"MySite" folder along with the images folder.

Step 18 - Setting up our

index.html File
The first thing we need to do is declare the doc type,
character encoding, and create the <html> tags.
Many editors will do this for you, but if not, it should
look something like this:
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
4</html>
between the html tags, we need a "head" section,
which contains all sorts of important information about
the site which isn't displayed within the body of the
site.
For us, at this point all it's going to contain is the title
of the page, like this:
1 <head>
2 <title>MySite</title>
3 </head>

below the head, logically, we add the body, also

contained within the <html> tags. Okay, so far we
have:
0
1
0
2
0
3
0 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
0 <head>
5 <title>MySite</title>
0 </head>
<body>
6 <!-- content goes here -->
0 </body>
7 </html>
0
8
0
9
1
0
This is a basic page setup, you might want to save
this clip somewhere for future use.
So remember when we said we'd have header,
content, sidebar, and footer sections?
Good, now each of these is going to be within its own
<div>, and will be given an appropriate id.
01 <body>
<div id="header">
02 </div><!--end header -->
03
04
05 <div id="content">
06 </div><!--end content-->
07
08 <div id="sidebar">
09 </div><!--end sidebar-->
10
11 <div id="footer">
</div><!--end footer-->
12
13 </body>
14
NOTE: it's a good idea, especially when you first start,
to add comments at every </div> so you can keep
track of the hierarchy of divs.

Now let's take another look at our psd - remember

how we want the footer and header slices to repeat
indefinitely out to the sides?
We're going to need a way to let these elements
stretch out, but at the same time, we need the main
content ("content" "sidebar")
to be contained within a specified width at the centre
of the screen.

To handle this, we need a big div holding our

expanding elements, and a div to contain the main
content.
We should also notice that the footer text is centered
too, so we need to repeat the same process for the
footer.
To do this, we need to wrap some divs around the
ones we already have. We have two basic sections,
the main section, and the footer section.
Each is going to be contained within one big, unruly
div with an unspecified width,
and the content of each will be wrapped in individual
divs that specify width and centering.

We want to use the same rules for the main and

footer content, so instead of (or in addition to) specific
id's, they will have specified classes,
which means you can create a set of rules to define
all div's with the same class.

So the main content is going to be wrapped inside a

div with the id "main" and our footer will be wrapped
in a div with the id "footer." If it helps to visualize the
structure, here's a diagram:
And the markup looks like this:
01
02 <body>
<div id="main">
03 <div id="header">
04 </div><!--end header -->
05
06 <div id="content">
07 </div><!--end content-->
08
09 <div id="sidebar">
</div><!--end sidebar-->
10
11
</div><!--end main-->
12
13 <div id="footer">
14 </div><!--end footer-->
15
16 </body>
17
Now we wrap each section in a containing div, with
the class of "container."
01 <div id="main">
<div class="container">
02
03
04 <div id="header">
</div><!--end header -->
05
06
<div id="content">
07 </div><!--end content-->
08
09 <div id="sidebar">
10 </div><!--end sidebar-->
11
12 </div><!--end main container-->
13 </div><!--end main-->
14
<div id="footer">
15 <div class="container">
16 </div><!--end footer container-->
17 </div><!--end footer-->
18
I know all these wrapping divs seem redundant, but
they will become relevant when we start styling the
page.

Step 19 - Adding Content

Now that the structure of our page is set, we can start
adding content, from top to bottom. Here's an outline
of the html elements that will make up our page:
Header

At the very top we have our header, and within the

header we have 3 main elements: a logo, a tagline,
and a navigation menu.
So let's create a div for our header, and to keep things
clean, we'll put the logo and tagline in their own divs.
1 <div id="header">
2 <div id="logo">
3 </div>
4 <div id="tagline">
</div>
5
</div><!--end header -->
6
Because it's the most important heading of the page,
the Logo is going inside an <h1> tag. We have more
options for the tagline, depending on how relevant it is
to your site. In this case, I'm using an <h3> tag.
For the navigation, standard practice is to place menu
items within an unordered list, with each list item
containing an anchor tag.
So we have:
01
02 <div id="header">
03 <div id="logo">
04 <h1>Logo</h1>
</div>
05 <div id="tagline">
06 <h3>And a little tagline, too.</h3>
07 </div>
08 <ul id="menu">
<li><a href="#">Home</a></li>
09 <li><a href="#">About</a></li>
10 <li><a href="#">Portfolio</a></li>
11 <li><a href="#">Contact</a></li>
12 </ul>
13 </div><!--end header -->
14
NOTE: the "href" value in the anchor tags would
normally specify where the link goes, but in this case,
the pound symbol just means "link to top of page."

Main content

Looking at our main content area, we have 4 different

styles of type: a big heading at the top, a smaller one,
and an even smaller one heading for the news item
titles, plus some paragraphs, and the small little dates
on news items.
We're going to call these <h2>, <h3>,<h4>, <p>, and
<small>, respectively. Now it's just a matter of pasting
in your content, which isn't much fun, but it is pretty
easy.
0 <div id="content">
<h2>Lorem ipsum, Dolor sit</h2>
1
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
0 <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
2 Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget v
0 Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
3 Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctu
0
4
0
5
0
6
0
7
0
8
0
9
1
0
11
1 Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget v
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur
2
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputat
1 <div id="news">
3 <h3>Latest Updates</h3>
1 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
4 <small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arc
1 facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sod
5 Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read Mo
1 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
6 <small>June 1, 2009</small>
1 <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales
7 Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</
1 </div><!--end news-->
8 </div><!--end content-->
1
9
2
0
2
1
2
2
2
3
2
4
2
5
I've added anchor tags with the value "Read More" at
the end of each news item.

Sidebar

On to the sidebar now. The sidebar has three

elements, each of which will be wrapped in its own
div.
Each div will contain an <h3> header, and an
unordered list, and each list item will again contain an
anchor tag.
So go ahead and copy and paste your text in, and it
should look something like this:
01
02
03 <div id="sidebar">
04 <div id="subscribe">
05 <h3>Subscribe!</h3>
06 <ul>
07 <li><a href="#">Subscribe via RSS</a></li>
<li><a href="#">Get Email Updates</a></li>
08 <li><a href="#">Follow us on Twitter</a></li>
09 </ul>
10 </div>
11 <div id="popular">
<h3>Popular Items</h3>
12 <ul>
13 <li><a href="#">Lorem ipsum dolor site amet</a></li>
14 <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
15 <li><a href="#">Lorem ipsum dolor site amet</a></li>
16 <li><a href="#">Proin tempor erat sit tene</a></li>
</ul>
17 </div>
18 <div id="contributors">
19 <h3>Contributors</h3>
20 <ul>
<li><a href="#">John Smith, freelance writer</a></li>
21
<li><a href="#">Jack McCoy, designer</a></li>
22 <li><a href="#">Lenny Briscoe, editor</a></li>
23 <li><a href="#">John Smith, martketing</a></li>
24 </ul>
25 <a href="#">Join Our Team</a>
</div>
26 </div><!--end sidebar-->
27
28
29

Footer

We may as well put the footer in before checking it in

the browser, it should only take a second.
Worth noting is that any symbols you want to use in
your text have special codes in html, for example, the
copyright symbol is coded as
1 <div id="footer">
<div class="container">
2
<p>Copyright 2009 MySite <br />
3 All Rights Reserved</p>
4 </div><!--end footer container-->
</div><!--end footer-->
5
6
And that's about it for the markup, let's take a look:
looks pretty good, no? Well, no, not yet. But it does
contain all the information we need, and is ready for
styling.

Part Four - CSS

Step 20 - Adding CSS

Now, this is where the magic happens.
Create a new file in our site folder, and call it
"style.css".
Now we need a way to tell the browser that this css
file belongs to our index.html file, so we link to it with
the "link href" tag. Put this line of code into your
<head> section, beneath the title.
1 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Now our html file can access our css file, so whatever
changes we make to the css will affect the html file.

Step 21 - Basic Cleanup

There are a couple ugly things about our site that we
can fix right away: we want to change the default font,
we want the content to be 800px wide and centered,
and we want to get rid of all those spaces between
the elements.

First, we're going to pick a font for all text within the
body of the page, which will be displayed unless
otherwise specified:
1 body { font-family: Arial, Helvetica, sans-serif; }

Next, let's define the width and margins of our

"container" class divs.
1 .container {
2 width: 800px;
3 margin: 0 auto;
}
4
the margin: 0 auto property is shorthand meaning that
there is no margin at the top, and that it will be
automatically centered horizontally.
Let's take a look.
Much better. The next step is going to make things
look much worse, but stick with me.

CSS reset

All browsers use default padding and margin values

for each element, which makes unstyled pages look
nice, but for us they just get in the way of our own
styles.

To get rid of all these messy margins, we're going to

use a very simple css reset, which is just a rule that
gets rid of the default padding and margins on the
elements we're using. Put this at the top of your css
file:
1 '
2 body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

now let's look:

Step 22 - Header
Okay, so everything's all squished up and ready for us
to manipulate! Now we get to start adding our own
styles, again, from top to bottom.
Let's get the tricky part out of the way first: setting the
background images for the header.

We'll star with the repeating slice we took of the

header. The repeating image is going to be within the
"main" div, which has an undefined width. We need to
let the browser know where the image is, and what to
do with it (repeat, no-repeat) to set a background
image, we use the property "background" and specify
the location of the image or 'url': in our case, the
image is in our images folder, so we specify the
location like this:
1 url (images/header_slice.jpg)

then specify that we want it to repeat along the x-axis:

1 #main {
2 background: url(images/header_slice.jpg) repeat-x;
3 }

Check it out:
awesome, right? Try stretching out your browser, it
just goes on and on and on... But we're still missing
the highlight on the blue bar, and since we cut out an
800px part of our header, we can put it inside our
"container" div. Problem is, we have two of those (one
for the main div, one for the footer) so we need to
specify that we want the div with the class "container"
that lies within the div with the id "main"
set the image the same way as before, but this time
we need to specify "no-repeat":
1 #main .container {
2 background: url(images/header.jpg) no-repeat;
3 }

Take a look:
great! the highlight is sitting just where we want it, and
blending in to the repeating sides.

Step 23 - Logo Image

Replacement
Our logo is pretty complicated, right? we're using an
image background, and a non-html font with an inner
shadow. We can't do that in css, so we have to
replace the text with an image.
"why not just put the image in place of the <h1> line?"
you may ask. Well, on the internet, the <h1> header
is basically the 'name' of your page, and important,
powerful robots (google) scan for this property when
searching for keywords. If you don't have an <h1>
header, your site could be called kalamazoo, but it
wouldn't turn up in a search for that exact word.
There are various other techniques which have their
advantages over this one, (see here, especially
technique #8) but this is the simplest and the most
appropriate technique for this situation.

So, to fix this problem, we use a devious little

technique called "image replacement" to use the
image that we want, while keeping the <h1> header in
our markup. First, let's add the image as a
background to the #logo div.
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 }

if you look at your browser, you'll see that our logo

has been chopped in half. This is because we haven't
given it any room, we can solve this by specifying the
dimensions of the image:
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
}
5
Better, but we still have the original <h1> text in our
way, but we can fix it! All we're going to do is set the
text-indent value to something ridiculous, like
-9999px, way off the page, so no one will ever see it,
except the search engine robots.
1 #logo h1 {
2 text-indent: -9999px;
3 }

now take a look, and our logo image is happily sitting

where our <h1> text used to be. But it still looks pretty
bad, all cramped up at the top there. When we want
to move an item from its original position on the page,
we can use both the padding and the margin
properties. We're going to try both to see the
difference

First, let's try adding a margin to the top of the h1 tag.

We can find out how big to make it with the ruler tool
in Photoshop.
1 #logo h1 {
2 text-indent: -9999px;
3 margin-top: 40px;
}
4
Oops! We managed to move the logo, but it took the
whole page with it! Let's try adjusting the padding
instead:
1 #logo h1 {
2 text-indent: -9999px;
3 padding-top: 40px;
}
4
Now take a look, and the damn thing went back to
where it started! This is because the margin property
moves the whole element, but the padding only
moves the content of the element, leaving the
background where it is. So, if our screen was, say ,
19999px wide, we would see our outcast <h1>
header move down 40px, but this is not what we were
going for.

So, to move the background image of the logo, we

need to move the div above it, because the whole
logo div is the "content" of the header div. let's try it
out:
1 #logo h1 {
text-indent: -9999px;
2
}
3
4
#header {
5 padding-top: 40px;
6 }
7

Much better! Now our logo looks just like it does in

our psd, in exactly the right spot. If only we could fix
that tagline...

Step 24 - Floating the Tagline

So now we need to find a way to get that tagline out
beside the logo. Problem is, html elements naturally
stack vertically, pushing eachother up and down the
page.
We have a few options to fix this, but I'm going to use
floats, which are a little tricky, but seriously useful
once you get the hang of them.
Okay, so what's a float? Well, that's complicated.
Basically, when you tell an element to 'float', it sticks it
to the side of a page or element, and also takes it out
of the normal "flow" of the page. Confused? Let me
demonstrate.
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
float: left;
5 }
6

Well, as you can see, we managed to get our tagline

out to the side, but it took the navigation menu with it.
I think of it this way: a normal element (for example, a
div, or an h1 header, or an image), even if it's really
small, invisibly occupies all the space to the side of it,
like one big long horizontal bar.
This is why all the other elements stay beneath it,
instead of cozying up beside. When you float an
element, You take away all the extra space to the
side, and restrict it to only the space it directly takes
up, allowing other elements to wrap around it.
Now that you know how floats work, how can we fix
our present situation? First, we have to isolate the
tagline into a float of its own, so it too lies outside the
normal "flow" of the page:
1 #tagline {
2 float: left;
3 }

Take a peek in the browser, and look at that, we made

it worse. Now the menu items are wrapping around
our tagline! What we need here is to restore the
normal flow of the document after the floated
elements. There are a couple ways to do this, but
we're using the most straight-forward method. Go
back to your index.html file, and add in a new div
beneath our floated divs. Instead of adding a class or
id to this div, we're going to give it a style (yes it's an
inline style, but only a teeny little one) clear: both.
1
<div id="header">
2 <div id="logo">
3 <h1>Logo</h1>
4 </div>
5 <div id="tagline">
<h3>And a little tagline, too.</h3>
6 </div>
7
8 <div style="clear:both"></div>
9
Resave your html file and check in your browser: you
should see the tagline out beside the logo, with the
menu below. Now all we have to do is get that tagline
into shape, and put it where it belongs. Let's start by
copying the font styles over from Photoshop:
1 #tagline h3 {font-size: 30px; color: #e4dfdf; }

and then add a bit of padding at the top and left:

1 #tagline {
2 float: left;
3 padding-top: 20px;
4 padding-left: 20px;
}
5
take a look: now we're getting somewhere!
Step 25 - Navigation Bar
now we need to get our navigation menu in a straight
line. First things first, though, we're going to style the
font so we can space things out accordingly. When
you style the font of a list of anchor tags, you need to
specify not only that you are referring to list items, but
to the anchors within them. We're specifying our
specific unordered list, so that we can deal with the
other ones separately. We also need to get rid of the
underlines and the bullet points.
1
ul#menu {
2 list-style: none;
3 }
4
5 ul#menu li a {
6 font-size: 30px;
color: #676666;
7 text-decoration: none;
8 }
9
Great, now, we need to find a way to get all our links
in a row. How? More Floats! We're going to set the
list-items to float left, so that each item sticks to the
one beside it.
1 ul#menu li {
2 float: left;
3 }

If you look in your browser, you'll notice the same

problem we had before with floated items: other
elements are wrapping around it. Just like before, we
can insert our clearing div right after the unordered
list.
1 <ul id="menu">
<li><a href="#">Home</a></li>
2 <li><a href="#">About</a></li>
3 <li><a href="#">Portfolio</a></li>
4
5 <li><a href="#">Contact</a></li>
</ul>
6 <div style="clear:both"></div>
7 </div><!--end header -->
8
All our list items should be in a line now, we just have
to space them out and move the menu down a bit. So
first measure the distance from the bottom of our logo
to the top of the menu text, and we get about 55px.
the first item is about 30px left of our guide, so let's
set the list item padding to 30px left.
1
ul#menu {
2 list-style: none;
3 padding-top: 55px;
4 }
5
6 ul#menu li {
float: left;
7 padding-left: 30px;
8 }
9
We still need to put more space between each item, if
we measure the space in our psd, it's about 105px,
but since we already have 30px padding between
each, we only need to add 75px padding to the right
of each item.
1 ul#menu li {
2 float: left;
3 padding-left: 30px;
4 padding-right: 75px;
}
5
And finally, admire our work:
Perfect! Our menu is just like the psd. On to the
content!

Step 26 - Content
Top area

The first thing we're going to do here is set all the

fonts, so we can see the spacing we have to work
with. just plug in the font info from Photoshop:
01 #content h2 {
font-size: 36px;
02
color: #015878;
03 }
04
05 #content h3 {
06 font-size: 24px;
07 color: #444444;
}
08
09 #content h4 {
10 font-size: 18px;
11 color: #373737;
12 font-weight: normal;
13 }
14
#content p {
15 font-size: 14px;
16
17
18 color: #595858;
19 }
20
21 #content small {
22 font-size: 12px;
color: #373737;
23 }
24
25 #content a {
26 color: #0f6c8d;
27 font-weight: bold;
28 text-decoration: none;
}
29
30
31
We get something like this:

At this point you may notice that we haven't set a

background color for the content area yet. This is
because... I forgot. So let's just do that now, shall we?
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 background: #ebe8e8;
}
4
Alright, now we're ready to add some padding to
space everything out.
first, the distance from the bottom of the nav menu to
the top of the h2 heading is about 25px:
1 #content h2 {
2 font-size: 36px;
3 color: #015878;
4 padding-top: 25px;
}
5
Next, the distance from the bottom of the h2 heading
to the top of the h3 heading is also around 25px, so
repeat basically the same code:
1 #content h3 {
2 font-size: 24px;
3 color: #444444;
4 padding-top: 20px;
}
5
Now, the distance from the bottom of the h3 heading
to the top of the first paragraph is about 45px, but if
we set the padding-top to 40px, we will also end up
with 40px of padding between the two paragraphs.
Since the paragraphs are only about 20px apart, we
need to split the padding into top and bottom: add
20px of padding to the bottom of the h3 heading, and
20px of padding to the top of the paragraph.
01
02 #content h3 {
font-size: 24px;
03 color: #444444;
04 padding-top: 20px;
05 padding-bottom: 20px;
06 }
07
08 #content p {
font-size: 14px;
09 color: #595858;
10 padding-top: 20px;
11 }
12
Check out the results:
News section

The spacing is a little different in the news section,

first of all, we need to push it down the page a bit.
There's also too much padding beneath the h3
heading, so we're going to remove a bit.
We also need to reduce the padding above the
paragraphs, and add some padding between the two
news items.
01
02 #news {
padding-top: 10px;
03 }
04
05 #news h3 {
06 padding-bottom: 10px;
07 }
08
#news p {
09 padding-top: 10px;
10 padding-bottom: 14px;
11 }
12
Which looks like this:
There, now all we need to do is get the sidebar out to
the side, and we're done the main content.

Step 27 - Floating the

Sidebar
first, we need to set the width for the content section:
1 #content {
2 width: 510px;
3 }

Now, to get the sidebar out there, we will once again

be using floats, setting both the content area and
sidebar to float left.
1 #content {
2 width: 510px;
3 float: left;
4 }
5
6 #sidebar {
float: left;
7 }
8
If you take a look in your browser, you will notice that
our footer text has wrapped around the sidebar. We
know how to deal with this problem by now: we just
need to add our little clearing div to the markup:
01
02 <div id="contributors">
03 <h3>Contributors</h3>
04 <ul>
<li><a href="#">John Smith, freelance writer</a></li>
05 <li><a href="#">Jack McCoy, designer</a></li>
06 <li><a href="#">Lenny Briscoe, editor</a></li>
07 <li><a href="#">John Smith, martketing</a></li>
08 </ul>
<a href="#">Join Our Team</a>
09 </div>
10 </div><!--end sidebar-->
11 <div style="clear:both"></div>
12
13 </div><!--end main container-->
14
15 </div><!--end main-->
16
Alright, next step is to just copy over the font styles
from our psd for the sidebar:
01
#sidebar h3 {
02 font-size: 24px;
03 color: #044055;
04 font-weight: normal;
05 }
06
07 #sidebar ul li a {
font-size: 14px;
08 color: #393838;
09 }
10
Remember that to style the font of the links in an
unordered list, we need to refer to the anchor tag,
rather than the list item itself.
Now, if we look over at our psd again, we'll notice that
the text for the list items in the "subscribe" widget is
slightly larger than in the rest of the sidebar. To fix
this, we need to target the specific unordered list, so
we need to add an id value to the subscribe ul in our
markup:
1 <ul id="subscribe">
2 <li><a href="#">Subscribe via RSS</a></li>
3 <li><a href="#">Get Email Updates</a></li>
4 <li><a href="#">Follow us on Twitter</a></li>
</ul>
5
Then we can refer to it in our css:
1 ul#subscribe li a {
2 font-size: 18px;
3 }

Now we need to style our sidebar: add padding,

margins, backgrounds and borders. First let's get rid
of the bullets:
1 #sidebar ul {
2 list-style: none;
3 }

OK so it's still way in the wrong spot, so let's fix that

by adding margins to the top and left. When
measuring in your psd, measure to where the border
of the sidebar begins.
1 #sidebar {
2 float: left;
3 margin-left: 55px;
4 margin-top: 35px;
}
5
Now for the background: underneath the margin-top
property, add the background and border properties:
1 background: #d4d6d3;
border: 1px solid #BEBDBD;
2
Next we'll add 15 px of padding on all sides:
1 padding: 15px;

And then add the padding to our text styles to space

out our menu:
01
02
03 #sidebar h3 {
font-size: 24px;
04 color: #044055;
05 font-weight: normal;
06 padding-bottom: 20px;
07 padding-left: 15px;
}
08
09 #sidebar ul {
10 list-style: none;
11 padding-bottom: 25px;
12 }
13
14 #sidebar ul li a {
font-size: 14px;
15 color: #393838;
16 }
17
18 ul#subscribe li {
19 padding-bottom: 5px;
}
20
21
ul#subscribe li a {
22 font-size: 18px;
23 }
24
25
Our sidebar already looks almost perfect, we just
need to add in the icons in the subscribe section, and
style that "join us" anchor tag.

Okay, so let's get those icons working. Adding images

to an unordered list can seem confusing, but if you
take things step by step, it makes perfect sense. But it
is a bit tedious.
To start, we're going to have to make some room for
the icons. We're going to set them as background
images, so if we use the padding property to move
our list items over a bit, the images won't be affected.
The icons are about 26px wide, so we'll add some
padding to the left of the list items:
1 ul#subscribe li {
2 padding-bottom: 5px;
3 padding-left: 30px;
}
4
Now we need a way to target each separate list item,
so we'll add some id's in the markup:
1 <ul id="subscribe">
2 <li id="rss"><a href="#">Subscribe via RSS</a></li>
3 <li id="email"><a href="#">Get Email Updates</a></li>
4 <li id="twitter"><a href="#">Follow us on Twitter</a></li>
</ul>
5
Now we add background images to each list item:
01
li#rss {
02 background: url(images/rss_icon.png) no-repeat;
03 }
04
05 li#email {
06 background: url(images/email_icon.png) no-repeat;
07 }
08
li#twitter {
09 background: url(images/twitter_icon.png) no-repeat;
10 }
11
At this point it occurred to me that perhaps 18px was
a bit too big for the links here, so I reduced it to a less
dramatic 16px, which allowed me to add in a teeny bit
more padding on the left without stretching the
sidebar out.
1 ul#subscribe li {
2 padding-bottom: 5px;
3 padding-left: 35px;
}
4

Our spartan little sidebar is almost complete! Now to

style our button:

We need to target the button, so let's add a class to

the markup: (im using a class instead of an id this
time, which is common practice, as we could
hypothetically add more buttons later)
1 <a href="#" class="button">Join Our Team</a>

So let's just fix up the text style and add in our

repeating background slice:
1 a.button {
color: #393838;
2 text-decoration: none;
3 background: url(images/button_slice.jpg) repeat-x;
4 }
5

as you can see, our background image is there, but it

only appears directly behind the text, we need to give
it space to spread out. First, let's give it a margin to
get it into the centre of the sidebar:
1 margin-left: 30px;

and some padding on each side so our button

spreads out:
1 padding: 13px 23px;

This is a short-hand way to write the padding

properties, and is entirely acceptable, and even
encouraged, since it saves space. In this case, it
specifies 13px of padding on the top AND bottom, and
23px of padding on the left and right.
the button looks great, but oops! it moved to the right
23px, so let's reduce our margin a bit to compensate:
1 margin-left: 14px;

Now let's just give it some space underneath by

adding padding to the entire sidebar div:
1
#sidebar {
2 float: left;
3 margin-left: 55px;
4 margin-top: 35px;
5 background: #d4d6d3;
border: 1px solid #BEBDBD;
6 padding: 15px 15px 30px 15px;
7 }
8
here's that shorthand property again: it goes in this
order: top, left, bottom, right. So here it says 15px on
all sides except the bottom, which should be 30px.
finally, we just need to add that 1px border to the
button class:
1 border: 1px solid #c7c7c7;

And there we have it, one sidebar!

Step 28 - The Footer

Last but not least, our simple little footer. We'll set the
footer the same way as we set the header:
Using a repeating slice within an div of unspecified
width, and then adding the content inside a fixed-
width, centred div.
This is where our .container div comes in handy,
because we don't need to specify the 800px or
margin:auto this time, because it's already done.
Let's start with the repeating slice:
1 #footer {
2 background: url(images/footer_slice.jpg) repeat-x;
3 }

It's a start, but it's really tiny. let's add some padding,
and make the text white:
1 #footer {
2 background: url(images/footer_slice.jpg) repeat-x;
3 padding-top: 20px;
4 padding-bottom:60px;
5 margin-top: 40px;
color: #fff;
6 }
7

and the whole thing:

Step 29 - Little Changes
In a browser, stuff looks a bit different than in
Photoshop, so we might want to make some minor
changes. For example, I'd like a bit more padding
above the main content and sidebar. We'll add it to
the bottom of the menu.
1 ul#menu {padding-bottom: 50px}
I also decided that I wanted the menu to align to the
left, so I'm going to remove the padding-left. Now the
items are closer together, because we had padding of
75px on the right and 30px on the left, for a total of
105. Now that we've taken away the left padding, we
need to add it to the right to make up the difference:
1 ul#menu li {
2 float: left;
3 padding-right: 105px;
4 width: 95px;
}
5
And the grand finale:
So next... wait? what? we're done?
We're done!

Now just some housekeeping to worry about:

Validation.

Advertisement

Step 30 - Validation
Now validation is a crucial step in website design, I'm
not going to go into the endless reasons here
because this article does it for me. Here I'm just going
to walk through the process:

HTML Validation

Go to the w3.org Validation Service, select validate by

file upload, and select your index.html file, and click
"check."
Next... The moment of truth:

RED (Red is bad!)

Don't worry, it's not so bad; let's review what went

wrong:
looks like I only have one error:
They caught me using the same id tag twice, which
could cause serious confusion. Since we have lots of
styles defined for the ul with the id "subscribe", we're
just going to change the name of the div instead: let's
call it "feeds"
Now we need to check that we haven't defined any
styles for #subscribe, and we haven't!
To be safe, let's reload our page to make sure there
were no unintentional changes.
Looks good! Now let's run the validation again:

Success! Our page is now valid XHTML. You can

even download an icon if you want to brag.

Note: I was pleasantly surprised to find only one error,

if you're not so lucky, read the suggested info at w3
shcools, or check out this article by Glen Stansberry.

It seems we're done! Ah, but if only it were that easy.

We still have to validate our CSS!

CSS Validation
Head over to The w3 CSS Validator and go through
the same process as with the html, only this time
select your style.css file. Checking...

We're Valid!

However, we did get a couple warnings. To stay within

the good graces of the church, we should certainly
pay attention to them:

It's just a few little problems: we should have declared

widths for all our floated items. Again, these
suggestions are optional, but it's best to listen to
constructive criticisms.
Cleaning Up: our tagline, menu unordered list items,
and sidebar all need to have widths declared. We
also want to do this without changing the appearance
of the page.
First up, the tagline. We can just make a rough guess
on this one, it's about 400px wide.
1 #tagline {
2 float: left;
3 padding-top: 20px;
4 padding-left: 20px;
width: 400px;
5 }
6
And reload: no change, excellent. Next, the menu list
items. this is a little trickier: Our page is 800px wide,
so that's the maximum total width of all the list items
together. If we divide by the four list items, and set the
width to 200px, the items get mixed up and list
vertically. This is because we have padding on either
side of each list items: 30px on the left and 75px on
the right. Subtract that 105 from 200, and the
remaining width is 95px.
1 ul#menu li {
2 float: left;
3 padding-left: 30px;
4 padding-right: 75px;
width: 95px;
5 }
6
Same idea with the sidebar: let's first take a look at
the width of the content area: 510px. The remainder
in our 800px page is 290px, but first we need to
subtract all the padding on the left and right: 290-
30=260. Next subtract the left margin, and we're left
with 205px. One last problem: our 1px border, so let's
subtract another 2px, and set the width of the sidebar
to 203px. Check it again, no change.

Excellent, if we validate again, no errors, not even a

warning!
Our webpage, as far as w3c standards are
concerned, is perfect.
Conclusion
So there you have it, one very simple, well-coded
website. Throughout this tutorial, my hope is that you
picked up some valuable skills to apply to your own
designs, and are now ready to get started coding your
own sites. Take your web design skills further, or work
with one of our ready to use HTML Templates, which
are responsive and ready to customize to your project
needs.