How to design a website
A fully comprehensive step by step tutorial, from design to HTML & CSS.
First before you begin, please check out my new site DesignCourse.com. I highly recommend it to all of my visitors who want to become awesome designers!
HTML
Subscribe to the DesignLetter
Subscribe to our weekly newsletter and receive the latest in the web's best design trends, tutorials, information and more.
Okay this is the next step. I do this step in its’ entirety before I continue on with the CSS. I basically hand code all of the HTML in dreamweaver (though you can use anything you want, including notepad because it’s all hand-written).
First let me say this before I proceed. There are many ways to accomplish certain things in HTML and CSS. The ultimate goal however is to choose the way that is most efficient, with the least amount of coding. So inevitably there will be those reading this who will try to nitpick every little thing I do - but I have it down decently well as I’ve done a lot of sites in the tableless css / xhtml method.
So what I’ll do is just paste certain parts of the coding and cover each element 1 by 1. Here we go! (Hang on, it’s going to get wild, har har).
The <head>
The doctype is noted as being XHTML. It’s important that it’s in xHTML else certain elements will not render correctly.
The two “<link href=”’s are important. Those are the files that our CSS will be contained within. Nothing too significant to note here though.
The Header HTML
The Header CSS
 |
There’s only 15 lines of actual HTML which is great, because that’s a pretty minimalistic amount given the graphical appearance of the header. However if you look at the CSS, there’s quite a lot going on. The first tag is <body />, which you can see is the first thing referenced in the CSS. That’s where we specify the universal font, 0 margins and padding, and the background image information. Repeat-x means repeat horizontally only. Now #clear is something I designate in every one of my CSS files. Which I’ll explain when we get to use it. P and A are just paragraph formatting, so that every time a p or an a tag is called, that formatting will apply to it. #header_contain designates the full width of the design (remember the width of our photoshop document? :) as well as the “rough” bottom portion of the header background image. “margin:0 auto;” centers the div. #header_contain p.logo and p.logo a, create the actual logo image. If you look at the actual HTML coding, you can see we have a link with the anchor text “Website Reviews”. But that text doesn’t actually get shown at all. With CSS in the p.logo a portion, you can see “text-indent: -5000px;” - This makes the actual text go off the entire browse. It’s important that we get the anchor text at least in the code however, because it’s good for SEO purposes! In the top “p.logo”, you can see how the height and width of the image is specified as the exact dimensions, and then in the second “p.logo a” (a represents the a tag, the link), we actually display the background-image logo.gif. As you can see I decided to add a top navigation in the black area. That’s what #top_header is. They’re referenced in the CSS as “ul”, meaning unordered list. Each link item is referred to as “li” aka list. The ul#top_header list-style-type: none; means don’t add any bullets to the list as it would by default. Float: right; means you want it to align to the very right of the parent element which is #header_contain. “clear: right;” means nothing (like ul#bottom_header) should not show up to the right of it. And margin-top: 9px; means there should be a 9px margin from the top of the parent element. ul#top_header li, references specifically to the actual list items themselves. “float: left;” means each list item should float to the left of each other. “margin-right: 20px;” means there should be a margin of 20px in between each item. And finally ul#top_header li a, references to the actual link tag / text. This is where you format the text of each list item. And then the same thing is pretty much repeated for #bottom_header, aside from some minor self explanatory changes. |
Top Left Content Block HTML
Top Left Content Block CSS
 |
I chose to stick #content in main.css since that’s an element that will be found universally. The rest of the HTML in the html above, is only for the home page - which is why I designate a separate CSS file for it. #content simply structures the main content area in a similar way that the header container was. #home_left is a containing element that will hold the “So you have a website? Post it” text and the text underneath it and keep it separate from the awards block. Whenever you “float: left;” an element, you have to “display: inline;” because IE will screw up. The width is also set, I give it a border, and some padding to separate the actual border from getting too close to the ordered list. The #home_left h1, is what structures the image. As you can see, the HTML is very simplistic. But we’ve referenced it in the CSS and gave it width, height, the background image, and text-indented it the same way we did with the logo. You can also give negative margins. How did I know to give it a negative 9px margin? Because while I code this, I’m constantly checking it in firefox. If it’s off, I adjust the margins accordingly. You reference classes by putting a period in front of the name you give it in the html. I didn’t have to put “p.how_it_works {”, you could just put “.how_it_works” But that class makes the text bold, and float: left; allows the ordered list to float to the left of it. And finally the #home_left ol specifies the positioning of the list. You can see in the HTML the actual #’s aren’t specified - but on the website they’re visible because ordered lists (ol) automatically add numbers to the left. |
Top Right Content Block HTML
Top Right Content Block CSS
 |
#home_right as you can see has the float: left; applied to it, which means that it will float to the left of #home_left. The background glow is set and with background-position: it’s set to the left where it should be. The dashed border is also added. Then the #siteverdict_awards is designated which is pretty straight forward once again. The width / height of the image is specified, it needs to float: left to all the sites to be listed to the right of it, and then some margin is applied to it in order to correctly align it within the dashed box. #the_sites is a container that will simply float to the right of #siteverdict_awards. #the_sites a, means any “a” elements (links) contained within #the_sites, will be formatted as specified. and #the_sites img references the img code and simply has some adjustments applied to it. (Which you will be able to determine while you’re previewing the design in the browser as you code. I used an actual img instead of a div with css to display the stars because it will be dynamic. |
Bottom Left Content Block HTML
Bottom Left Content Block CSS
 |
#home_left_2 is the containing element of the lower left hand corner (The featured sites seeking reviews) section. #home_left_2 h2 is the image text replacement. The width/height of the block of text is specified, and all the other general stuff is applied as we’ve covered already. #thumb_container contains the background of the whole thumb area. It’s floated left so that we can place multiple “ ” copies
to the left of it. The margin-right gives it spacing
between each container, as does the margin-bottom.
The padding-left makes it so that anything inside
#thumb_container, is 5px away from the left side
of it. Padding is basically margin, except inverted.
.title_top is a class on the “a” tag in the html that allows us to style and position that text. .review_me is placed on a span element because the span allows us to simply encase the and the (#) inside of an element, and also float it left to let the .thumb_rating be on the same horizontal line. .thumb_rating styles and positions the actual rating text. Sometimes you have to slap “margin:0;padding:0 ;” on it to remove any inherent padding / margin that might be on an element. |
Bottom Right Content Block HTML
Bottom Right Content Block CSS
 |
#home_right_2 floats to the left of #home_left_2 of course. The HTML is pretty simple even though there’s a lot of lines. It’s just because there’s 3 different lists structured. And the same thing applies to the CSS. There’s a lot of CSS, but it’s all just to format each list. The H3 and H4 replace the default html text with the image text that we styled. ul#left_column floats to the left of ul#right_column. They’re both structered exactly the same except one is positioned to the right of the other. Pretty simple! ul#standard_column is a little bit different in the fact that it doesn’t have any links. It’s just straight text, so there’s no need for a “li a” style in the css. And that’s really all that’s worth mentioning for this section since we’ve covered everything already in the prior sections. |
Footer HTML
Footer CSS
 |
#footer does a few things. It centers the element with margin: 0 auto;, it uses the same rough bottom css from the top navigation, we give it a border and some margin. Straight forward! I pretty much copied and pasted (changed the element names of course) the list from the top navigation. Then I made another quick list for the 2 links that are floated right as shown in ul#bottom_footer_2. |
Cross Browser Optimization
When you’re finished doing the HTML and CSS and it looks as it should in firefox, then you need to test it on other browsers which include IE7.0, and IE6.0 *for sure*. You can go to browsershots.org to see what it looks like in a ton of different browsers.
Now I can guarantee you, that there will be a few problems with that exact coding (above) and IE. So how do I personally choose to fix them in IE? In an ideal world you would sit there and modify the elements to work with IE, but sometimes when you’re in a rush and you’re sick of trial error, you can do the following:
If you place this in the header of your page, it will include an “ie.css” file only for people viewing your page with IE. This way, you’re able to paste entire elements that aren’t working correctly, inside of this file and edit it to work correctly for IE.
Some people will scorn you for doing this though because it’s not viewed as “proper”.
And that's it!
There you have it. An entire from start to finish, from design to html article. This took me quite awhile to construct so please give me feedback in my forums at garysimon.net. Also check out this second tutorial on making a website (It's new!).
Thanks,
Gary Simon
CHECK OUT MY NEW DESIGN COURSE!
Fully documented, step by step, start to finish in Adobe Photoshop & Illustrator
Need a logo designed?
Check out my portfolio
I have over 8 years of logo design experience. Receive your logo within 24 hours!