How to code a website using HTML5 & CSS3

  • 20 Read Time(minutes)
  • 3/5 Difficulty
  • <> Application

In this tutorial, we’ll go one step forward, and code our previously created website design. First of all, we are going to slice up the PSD, then we’ll learn how to mock up the design in HTML and CSS. We will use a variety of the new HTML5 and CSS3 tags and attributes. By reading this tutorial, I assume you have a basic understanding of how HTML works; I’m not going to teach you what each and every HTML tag means, instead, I’ll try to demonstrate the process of creating a working website.

This tutorial is Part 3 of 4 of a Tutorial Series.

Things you’ll need:

  • A text editor program to write the actual code. On Windows, preferably Notepad++, mainly because it’s free. On the Mac, I recommend using Coda or TextMate, or of course Adobe Dreamweaver for both platforms.
  • This .ZIP File (0,25MB) that contains the pre-sliced images from the original website design. Please extract this zip to a folder called “images” to the directory you’re going to create the HTML and CSS files.

Okay, let’s get to coding.

The HTML

Open up your text editor program, and create a new blank document (if you can, choose HTML). So let’s actually start coding. First, put down the doctype, and the basic html skeleton declarations.

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

All right, so this is an empty, blank HTML document. Which is cool, but it doesn’t contain anything yet. Let’s extend the header information a bit. We’ll add some metadata, the title and a link to the main CSS file. So between the header tags, put these.

<head>
	<meta charset="utf-8" />
	<title>Responsive Website Project | by SzabokaDesigns</title>
	<link rel="Stylesheet" href="style.css" />
</head>

The meta tag we used here tells the browser to use UTF-8 character encoding. This isn’t super-necessary with English text, but if we were to use accented characters, we would need to add this to display all chars properly. The <link> attribute tells the browser to link the stylesheet to this document, so we can style it later.  The <title> tags speak for themselves.

Okay. Time to start adding some real content. Add a few empty lines between the body tags, and we’ll first create our empty wireframe, based on how we want our website to look like. We have the navigation first, followed by the logo and tagline, then come the content boxes and finally the footer. Let’s add these empty elements.

<body>
	<nav>
	</nav> <!-- end nav -->
	<header>
	</header> <!-- end header -->
	<article>
	</article> <!-- end article1 -->
	<article>
	</article> <!-- end article2 -->
	<article>
	</article> <!-- end article3 -->
	<footer>
	</footer> <!-- end footer -->
</body>

Note that I’m also adding those “end marks”, which may come handy when you have a 30-lines-long div and you don’t know in which div you currently are. Allright, so these are the basic divs we’re going to need. Let’s start with the navigation

The navigation of a website is basically a list. In most cases it’s an unordered list, in which we have several list items. Let’s create this list now.

<nav>
	<div class="wrapper">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div> <!-- end wrapper -->
</nav> <!-- end nav -->

Note that I’m adding a “wrapper” class div around my list. This is a common practice I use all the time when I’m coding an element that is 100% screen-wide. It’s because of CSS. The theory is simple. The <nav> elements will hold and repeat the background image screenwise, while the inner wrappers will have a fixed 960px width, that will easily make our navigation centered. Get used to this convention, I’ll use it a few more times today!

Okay great, so the navigation is done. At least for the HTML code, it’s done. Moving on to the header.

The header holds the logo, the welcome text and the tagline. We’ll add the logo as an image, and we’ll create 2 paragraphs for the texts.

<header>
	<div class="wrapper">
		<img id="logo" src="images/logo.png" alt="Logo" title="Logo" />
		<div id="welcome">
			<h1>Welcome to our Website!</h1>
			<p>We are a web and graphic design agency from Somewhere around the World.</p>
		</div> <!-- end welcome -->
	</div> <!-- end wrapper -->
</header> <!-- end header -->

The welcome text will be the largest text on the website, so instead of using the <p> tags, I put it between <h1> tags. Also note the div with an ID of “welcome” around the paragraphs… not totally necessary, but it will definitely help us later when we write the CSS code.

Let’s note a little something here. If you know a little about CSS, you have probably heard about floating. Floating means you grab an element out of the flow of the information. We will float the logo image later on, so we need to add a clear attribute to the next following site-wide element. That’s because if we don’t “clear” the flow of information at this point, our forthcoming articles won’t be displayed properly. If you don’t know anything about floating, not a problem, we’ll see about it a little later in this tutorial.

So this is it, the header is done. Moving on to the articles. Before we do anything, lets add a containing “wrapper” div to the articles. I forgot that before, and it will serve us well again. Like this.

<div id="content" class="wrapper">
	<article>
	</article> <!-- end article1 -->
	<article>
	</article> <!-- end article2 -->
	<article>
	</article> <!-- end article3 -->
</div> <!-- end content -->

I’ve added the “wrapper” class, and also named it “content” with an ID. We need to give that ID to this div in order to have more control later on. Allright, so let’s jump right into the Articles.

So what are those articles actually made up of? They have a huge title, we’ll use <h2> tags for them. Then come the separators, we can either add them as images or divs, I will use the latter in this case. Then there are those huge pictures, now they definitely need to be divs for the sake of equal positioning. You’ll see about this later in the CSS part. Then some paragraphs, actually there must be 2 of them. And lastly, the button, for which again I’ll use a div. Here is the code.

<article>
	<h2>Web Design</h2>
	<div class="separator"></div>
	<div class="articleImg" id="ferrari"></div>
	<div class="articleText">
		<p class="pFirst">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="pSecond">Lorem Ipsum has been the industry's standard dummy text for long, when an unknown printer took a galley of type and scrambled it.</p>
	</div> <!-- end articleText -->
	<div class="button">
		<a href="#">More about Web</a>
	</div>
</article> <!-- end article1 -->

I have used several classes and ID’s to name each and every element that we want to refer to in CSS later. If you don’t understand why those ID’s are needed yet, just wait until we get to the CSS part. The text of the button is wrapped between <a> tags for the sake of semantism. After all, it’s a clickable something.Okay, for articles 2 and 3, let’s use the good old copy-paste technique, and rewrite some of the content. Classes should stay the same, but it those cases where we used ID’s, we need to change them. The pictures of the cars will be named “camaro” and “oldtimer” for me. Here is the code for the second article.

<article>
	<h2>Graphic Design</h2>
	<div class="separator"></div>
	<div class="articleImg" id="camaro"></div>
	<div class="articleText">
		<p class="pFirst">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
		<p class="pSecond">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
	</div> <!-- end articleText -->
	<div class="button">
		<a href="#">More about Graphic</a>
	</div>
</article> <!-- end article2 -->

And this is article number three.

<article>
	<h2>Print Design</h2>
	<div class="separator"></div>
	<div class="articleImg" id="oldtimer"></div>
	<div class="articleText">
		<p class="pFirst">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p>
		<p class="pSecond">In some form by injected humour, or randomised words which don't look even slightly believable.</p>
	</div> <!-- end articleText -->
	<div class="button">
		<a href="#">More about Print</a>
	</div>
</article> <!-- end article3 -->

Don’t forget to check if </div> is there in the end, the tag that closes the div called “content”!Great! All we need now is the footer. We want the footer text to be centered like the navigation, but since it’s a text, we don’t need to add a wrapper div this time. Just place a paragraph inside the <footer> tags, i’ll go with my good old disclaimer.

<footer>
	<p>Copyright (c) 2011 - The SzabokaDesigns Blog - All rights reserved.</p>
</footer> <!-- end footer -->

And this concludes the HTML. Be sure that </html> is there in the end! Open up this document that we’ve just created to see what we’ve been creating for all this time, then lean back in your seats (provided you’re sitting in a chair with a back-rest), have a cup of coffee or something, and let’s continue on.

The CSS

Create a new document in your text editor, and we’ll start styling right on by something called the CSS Reset. All browsers have different built-in stylesheets, so they display content differently. Try opening this HTML document in different browsers, and you’ll see some minor differences. This is why we need to add a reset code. I prefer to use Eric Meyer’s CSS Reset (with added HTML5 attributes), this is my minified version of it to save up some space.

/*  CSS RESET BY ERIC MEYER  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0;}

See that thing @charset “utf-8”;in the beginning? I personally haven’t bumped into any character problems in CSS yet, but it’s best to use it. By the way you should try viewing the site in those browsers now. More or less, they should now look the same.So after we’ve reset our CSS, time to add our own styles. We’ll take a look at what classes and id’s we have assigned in the HTML, put them down in the CSS, and finally add some styles to these. But first things first, let’s add styles to the body.

body {
	background: URL("images/body-bg.jpg") top left repeat;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}

For the background property, I tend to use something that’s called a shorthand property. This saves me a lot of time and a finger-ache to write down extra characters. These styles apply for the whole document, meaning all the elements that are between the <body> tags.Let’s also tell the “wrapper” class what to do. It should be 960px wide, and should be centered.

.wrapper {
	width: 960px;
	margin: 0 auto;
}

Now we’ll add styling to the navigation. We have a lot to do here, so let’s begin basic. First, the <nav> element itself. It has a 100px wide background image repeating along the X-axis, and we also need to set a fixed height.

nav {
	background: URL("images/nav-bg.png") top left repeat-x;
	height: 59px;
}

This is it. Now the unordered list and its list items. We’ll set an approximate 360px width for the <ul>, which will make centering the <ul> a lot easier.

nav ul {
	padding-top: 16px;
	margin: 0 auto;
	width: 360px;
}

nav ul li {
	display: inline;
	margin: 0px 15px;
}

Now we can add some styles to the links themselves.

nav ul li a {
	font-family: 'Century Gothic', sans-serif;
	font-weight: bold;
	font-size: 18px;
	text-decoration: none;
	text-shadow: 1px 1px 1px #332C29;
}

Here we must note that the font “Century Gothic” may be present if you are using Windows 7, but it may not be present on other computers, so if we wanted to take this website to the web, we would have to change Century Gothic to something more universal like Tahoma or Arial. For the sake of this tutorial, it works just fine.

nav ul li a, nav ul li a:visited {
	color: #FFEECC;
}

nav ul li a:hover, nav ul li a:active {
	color: #FFD580;
	text-decoration: none;
}

By default, if you hover over an anchor it will get underlined, meaning that -Dear user, you’ve just hovered over me! For this simple reason, we use the :active, :visited and :hover pseudo-classes. In our case we’re using different colors to represent the hover state.
Also note the text-shadow property which comes in CSS3, and can be used as a little font-antialiasing tweak. Just set the color to the background’s color and voilá. Our text now displays much smoother.Okay, the nav is now done, let’s continue by adding styles for he header. First of all, the div with the ID “welcome”. Nothing too fancy, just some padding from the top, and the mighty text-shadow to make all the contained fonts smooth.

#welcome {
	padding-top: 60px;
	text-shadow: 1px 1px 1px #FFEECC;
}

The logo inside the #welcome div is floated to the left, and gets some margin properties.

#logo {
	float: left;
	margin: 20px 100px 0px 10px;
}

When floating, we need to make sure that the next site-wide element “clears” the float property out of the way, so the forthcoming content displays properly. The next site-wide element is the div with the ID of “content”, we’ll have to add it a little later when we get there.Let’s now style the <h1> and the tagline.

h1 {
	font-family: 'Adelle Basic RG', sans-serif;
	font-weight: bold;
	font-size: 36px;
	color: #4C4949;
	margin-bottom: 20px;
}

A side note on the Adelle Basic font. I’ve tested this website in Chrome 15 and Firefox 7 browsers for the sake of (more-or-less) browser-compatibility, and I realized that if you type in ‘Adelle Basic RG’ (the real name of this font – see your Fonts catalog) , then Chrome will just do fine, but Firefox will not display the font. But if you set the font to ‘Adelle Basic’ (why would you actually think that it’s going to work?), then Chrome will not recognize it but Firefox will do. I think that the name of this font could have been a little easier (like simply just ‘Adelle Basic’), or of course we could have used some other font for the sake of this tutorial… I’ll work on with ‘Adelle Basic’ from now on, but please note if you want to test it in Chrome, type ‘Adelle Basic RG’.

#welcome p {
	font-family: 'Century Gothic', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
	color: #665F5C;
}

So we’re done with the header! Moving on to the content section. First of all, add that so-called clear:both that we’ve mentioned before in addition to some margins.

#content {
	clear: both;
	margin-top: 30px;
	margin-bottom: 50px;
}

And now the article styling. The articles are those brown boxes that hold the main content of the site. It’s really a long one here as all the styling (border, outer glow, rounded corners) are made by pure CSS code.
Note: For the sake of ease, we are using a continuous background image for the content boxes, instead of a gradient.

article {
	float: left;
	background: URL("images/content-bg.jpg") top left repeat;
	padding: 25px;
	width: 248px;
	height: 598px;
	color: #FFEECC;
	margin-right: 30px;
	margin-bottom: 50px;
	line-height: 1.6em;
	text-shadow: 1px 1px 1px #332C29;
	box-shadow: 0px 0px 8px #444444;
	border: 1px solid #5C4E41;
}

These article boxes are again floated to the left side, so at the footer we’ll need to clear this! The box-shadow property comes from CSS3, in our case it reads: put a light gray 8px big shadow from the center.

The width should be 250px here, but the “border” property extends the width of the whole thing, so we need to subtract those 2px from the total width. Same thing applies for padding (on both sides). So 248px+25+25+2=300px.

Now we are using margin-right’s here, so we need to target the last content-box and tell it not to have a right margin. Or else, it would break the whole structure.

article:last-child { margin-right: 0px; }

This is it, the article boxes are finished for now. Great! Let’s add some styles to the content now. First, the <h2>.

h2 {
	font-family: 'Adelle Basic', sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 32px;
	color: #FFFBF2;
	padding-top: 20px;
	margin-bottom: 15px;
	text-shadow: 1px 1px 1px #331B0F;
}

Note the ‘Adelle Basic’ font here too! Chrome users -> ‘Adelle Basic RG’.

Then come the separator line divs, just add the background and size properties.

.separator {
	background: URL("images/separator.png") center center no-repeat;
	width: 250px;
	height: 2px;
}

Next, the article images. Remember, we added the “articleImg” class to all of them, and we also gave unique ID’s. So first, we’ll add styling to the classes, then we’ll tell the ID’s how to behave uniquely as well.

.articleImg {
	width: 250px;
	height: 150px;
	margin: 20px auto 40px;
	background-color: white;
}

#ferrari { background: URL("images/ferrari.png") bottom center no-repeat; }
#camaro { background: URL("images/camaro.png") bottom center no-repeat; }
#oldtimer { background: URL("images/oldtimer.png") bottom center no-repeat; }

Such easy. Now comes the articleText class, and the two paragraph classes.

.articleText {
	height: 250px;
}

.pFirst {
	margin-bottom: 10px;
}

.pSecond {
	text-indent: 20px;
	margin-bottom: 50px;
}

Superb. This way, the second paragraph will have an indentation of 20px, but the first one won’t. That’s the basic reason why we needed two parapgraphs with two separate classes. The “articleText” class just constrains the texts to a max height of 250px. It’s useful if we want our buttons to be in the exact same height. And also practical here because this is a fixed size layout (YET!)For the button, we saved the whole button body as a PNG. All we need to do is insert the background, set the size and do some minor tweaks. We’re using the “text-shadow: none” here, because we don’t want our button texts to have any shadows casted.

.button {
	text-shadow: none;
	width: 258px;
	height: 60px;
	background: URL("images/button.png") top left no-repeat;
	margin-left: -5px;
}

Buttons now look okay, but the text is ugly. Let’s fix this by adding the following code.

.button a {
	display: block;
	text-align: center;
	font-family: 'Adelle Basic RG', sans-serif;
	font-weight: bold;
	font-size: 24px;
	color: #4D423D;
	position: relative;
	top: 16px;
	text-decoration: none;
}

.button a:hover, button a:active {
	color: #261F1B;
	text-decoration: none;
}

Position: relative” and “top: 16px” basically nudge the element down by 16 pixels. Again, depending on what browser you use to test the website, the value of the “top:” attribute may vary from 15 to 17 pixels. “Display: block” is also crucial here for “text-align: center” to work.And finally, the footer. Remember, we need to add “clear: both” here again.

footer {
	clear: both;
	background: URL("images/footer-bg.png") bottom left repeat-x;
	height: 59px;
}

footer p {
	text-align: center;
	font-size: 12px;
	color: #FFEECC;
	padding-top: 29px;
	text-shadow: 1px 1px 1px #332C29;
}

And so, this is it! We have successfully converted a website design into a fully working web page. Job well done! Click here to see my results, and compare it to yours! Remember to stay with me, as next time we’ll take this piece of code, and convert it to a responsive website, which will adapt its looks depending on the browser window’s size. I’m looking forward to it!

Stay Tuned, and thanks for reading!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

11 Responses

Comments

  • Brijesh said on 2011.11.03. at 14:08 Reply

    Tood Good Tuts thanks a lot...enjoyed doing it. Regards Brijesh

  • Valeka said on 2011.12.01. at 20:41 Reply

    Thanks for great tutorial! I'm new in this but thanks to this tutorial solved some of mine confusions. I'm waiting for next one!

    • Szaboka said on 2011.12.03. at 0:06 Reply

      I'm so glad that I could help you with my tutorial. I will definitely publish more coding tutorials in the future! Thank you for your response! =)

  • ar-company said on 2012.10.04. at 16:24 Reply

    it is a very good information i will use in my site ar-company.weebly.com

  • Bram said on 2013.02.14. at 10:16 Reply

    Really great tutorial, never did the coding completely on my own! thank you :)

    • Szaboka said on 2013.02.14. at 10:21 Reply

      Thanks, I'm glad you liked this tutorial. Check out some other coding tutorials as well, if you're further interested. :)

Join the Conversation

Captcha: + two = 8