We'll use HTML5 and CSS3 to build a simple static homepage called Simply. Here's the final result

Understanding the Design

As you can see from the image, Simply is a full-width homepage design with 7 sections. We'll slice it into a series of manageable modules to make it easier to work with. Here's the structure

Setting Up the Folder Structure

First, create a folder for this project. It contains an HTML file, an images folder (with the image assets you need), and a CSS folder. Here's the directory structure

Download the image assets here: images. Here's the list of images

  • hero.jpg - 2000 x 697 px
  • features-icon-1.png - 100 x 100 px
  • features-icon-2.png - 100 x 100 px
  • features-icon-3.png - 100 x 100 px
  • video-placeholder.jpg - 940 x 527 px
  • article-image-1.jpg - 460 x 270 px
  • article-image-2.jpg - 460 x 270 px

    Setting Up the HTML File

    Open index.html and enter the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
    
</body>
</html>

This code is the basic skeleton of every HTML file. It defines the document type (HTML5), the character encoding (UTF-8), and the page head. Besides this skeleton, we also use a conditional comment to add an "if it's IE9" script. This script lets HTML5 tags, such as

,
work in older versions of IE.

Breaking Down the Page

We've already broken the page into 7 sections. Now we'll break it down further into a basic structure that's easy to code, as shown below.

Notice that not every element is marked, only the most important parts. We'll add the rest with the content. Put this structure inside the HTML file's tag. Here's the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
	<header>
		<h1></h1>
		<nav></nav>
	</header>
	
	<div id="hero-image">
		<h2></h2>
		<a></a>
	</div>
	
	<div id="features">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	<div id="primary-content">
		<article></article>
	</div>
	
	<div id="secondary-content">
		<article></article>
		<article></article>
	</div>
	
	<div id="cta">
	</div>
	
	<footer>
		<div id="footer-info"></div>
		<div id="footer-links">
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</footer>
    
</body>
</html>

Because the design is 960px wide, we need to add a wrapper inside each section, using a div container with a wrapper class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
 
<body>
	<header>
		<div class="wrapper">
			<h1></h1>
			<nav></nav>
		</div>
	</header>
	
	<div id="hero-image">
		<div class="wrapper">
			<h2></h2>
			<a></a>
		</div>
	</div>
	
	<div id="features">
		<div class="wrapper">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	
	<div id="primary-content">
		<div class="wrapper">
			<article></article>
		</div>
	</div>
	
	<div id="secondary-content">
		<div class="wrapper">
			<article></article>
			<article></article>
		</div>
	</div>
	
	<div id="cta">
		<div class="wrapper">
		</div>
	</div>
	
	<footer>
		<div class="wrapper">
			<div id="footer-info"></div>
			<div id="footer-links">
				<ul></ul>
				<ul></ul>
				<ul></ul>
			</div>
		</div>
	</footer>
    
</body>
</html>

Adding Content

In this part, we'll add content to the HTML file, including tags we didn't have before, such as paragraphs, headers, links, list items, and so on

Section 1: Header

The header includes a logo and a navigation bar. The logo uses an h1 tag and an inline color class, so we can set different colors in CSS later. The navigation bar is a simple unordered list, ul, with 4 li items inside a nav tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
	<div class="wrapper">
		<h1>Simply<span class="color">.</span></h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</nav>
	</div>
</header>

Section 2: Hero Image

A hero banner image with an h2 heading and a button link.

1
2
3
4
5
6
7
<div id="hero-image">
	<div class="wrapper">
		<h2><strong>A Minimal, clean</strong><br/>
		layout for web design.</h2>
		<a href="#" class="button-1">Get Started</a>
	</div>
</div>

Section 3: Features

Section 3 has an unordered list. With CSS, these list items float left and display horizontally. To stop elements from floating, we need a div with a "clear" class. Later in the CSS, its property is "clear:both".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="features">
	<div class="wrapper">
		<ul>
			<li class="feature-1">
				<h4>Easy to Edit</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<li class="feature-2">
				<h4>Layered PSD</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<li class="feature-3">
				<h4>Ready to Go</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
			</li>
			<div class="clear"></div>
		</ul>
	</div>
</div>

Section 4: Primary Content

This part is simple: use an tag to add a video cover image

1
2
3
4
5
6
7
8
9
<div id="primary-content">
	<div class="wrapper">
		<article>
			<h3>Featured Content</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
			<a href="#"><img src="images/video-placeholder.jpg" alt="video placeholder" /></a>
		</article>
	</div>
</div>

Section 5: Secondary Content

Like the features section, we make the

display horizontally. You may notice we used inline styles, which generally isn't recommended. But here, the background images are treated as content, so they belong in the HTML rather than the CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="secondary-content">
	<div class="wrapper">
		<article style="background-image: url('images/article-image-1.jpg');">
			<div class="overlay">
				<h4>Secondary Content</h4>
				<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
				<a href="#" class="more-link">View more</a>
			</div>
		</article>
		<article style="background-image: url('images/article-image-2.jpg');">
			<div class="overlay">
				<h4>Secondary Content</h4>
				<p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
				<a href="#" class="more-link">View more</a>
			</div>
		</article><div class="clear"></div>
	</div>
</div>

Section 6: Call to Action

This one is also very simple: a heading, a paragraph, and a button link.

1
2
3
4
5
6
7
<div id="cta">
	<div class="wrapper">
		<h3>Heard Enough?</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
		<a href="#" class="button-2">Get Started</a>
	</div>
</div>

The footer is split into two columns, "footer-info" and "footer-link," and the latter is divided into 3 columns using list items.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<footer>
	<div class="wrapper">
		<div id="footer-info">
			<p>Copyright 2014 CompanyName. All rights reserved.</p>
			<p><a href="#">Terms of Service</a> I <a href="#">Privacy</a></p>
		</div>
		<div id="footer-links">
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
			<ul>
				<li><h5>Company</h5></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Meet The Team</a></li>
				<li><a href="#">What We Do</a></li>
				<li><a href="#">Careers</a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</footer>

Next, include the CSS files we need. The first is a CSS reset, which you can download here: CSS Reset. Put it in the css folder and link it in the HTML.
<link rel="stylesheet" type="text/css" href="css/reset.css">
Also link our custom CSS
<link rel="stylesheet" type="text/css" href="css/home.css">Our logo font, "Crete," comes from Google Fonts, so we need to link it too.
<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>

Adding Styles

Global Styles

The body, headings, paragraphs, and links are global styles that apply to the whole file, so we define them first. The wrapper is 960px wide, minus 10px of padding on each side. Because we're using a CSS reset, some properties need to be redefined.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {
	background-color: #fff;
	color: #777;
	font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
p {
	line-height: 20px;
	margin-bottom: 20px;
}
h1 {
	font-family: 'Crete Round', serif;
	font-weight: bold;
	color: #444;
	font-size: 45px;
	margin-bottom: 20px;
}
h2 {
	font-weight: 300;
	color: #444;
	font-size: 55px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}
h3 {
	font-size: 30px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}
h4 {
	font-size: 24px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
}
h5 {
	font-size: 15px;
	color: #444;
	font-weight: bold;
	text-transform: uppercase;
}
a {
	text-decoration: none;
	color: #444;
}
a:hover {
	color: #02b8dd;
}
strong {
	font-weight: bold;
}
small {
	font-size: 13px;
	color: #777;
	font-style: italic;
}
.clear {
	clear: both;
}
.wrapper {
	margin: 0 auto;
	padding: 0 10px;
	width: 940px;
}

Section 1: Header

The H1 tag sets the logo font size, the color property sets the logo color, and the li items inside the ul float left.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
header {
	height: 120px;
}
header h1 {
	float: left;
	margin-top: 32px;
}
header h1 .color {
	color: #02b8dd;
}
header nav {
	float: right;
}
header nav ul li {
	float: left;
	display: inline-block;
	margin-top: 50px;
}
header nav ul li a {
	color: #444;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	margin-right: 20px;
}

Section 2: Hero Image

The #hero-image height is a bit smaller than the background image, leaving a few pixels at the top and bottom for small adjustments or a responsive layout later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#hero-image {
	height: 580px;
	padding-top: 1px;
	background: #e8eced url('../images/hero.jpg') no-repeat center;
}
#hero-image h2 {
	margin: 180px 0 40px 0;
}
.button-1 {
	display: block;
	text-align: center;
	background: #444;
	border-radius: 3px;
	color: #fff;
	width: 180px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
	margin: 0 auto;
}
.button-1:hover {
	background-color: #02b8dd;
	color: #fff;
}

Section 3: Features

Every feature shares the #features ul li styles. But .feature-1, .feature-2 and .feature-3 each differ, with each one defining a different icon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#features ul {
	margin: 80px 0;
}
#features ul li {
	width: 300px;
	padding-top: 140px;
	float: left;
	margin-right: 10px;
	text-align: center;
}
#features ul li.feature-1 {
	background: url('../images/features-icon-1.png') no-repeat top center;
}
#features ul li.feature-2 {
	background: url('../images/features-icon-2.png') no-repeat top center;
}
#features ul li.feature-3 {
	background: url('../images/features-icon-3.png') no-repeat top center;
}

Section 4: Primary Content

heading 3 is underlined and centered, as already defined in the global styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#primary-content {
	background-color: #f8fafa;
	padding: 60px 0;
	text-align: center;
}
#primary-content h3 {
	display: block;
	margin: 0 auto 20px auto;
	width: 400px;
	border-bottom: 1px solid #02b8dd;
	padding: 0 0 20px 0;
}
#primary-content a img {
	margin: 20px 0;
}

Section 5: Secondary Content

The first-child selector applies a 20px margin only to the first article, and .overlay uses rgba to give it a slightly transparent white background.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#secondary-content {
	padding: 60px 0;
	text-align: center;
}
#secondary-content article {
	width: 460px;
	height: 270px;
	float: left;
	background-color: #f5f5f5;
}
#secondary-content article:first-child {
	margin-right: 20px;
}
#secondary-content article .overlay {
	background: rgba(255, 255, 255, .95);
	height: 230px;
	width: 190px;
	padding: 20px;
}
article h4 {
	border-bottom: 1px solid #02b8dd;
	padding-bottom: 20px;
}
.more-link {
	border: 1px solid #02b8dd;
	color: #02b8dd;
	padding: 6px 20px;
	border-radius: 3px;
}
.more-link:hover {
	background-color: #02b8dd;
	color: #fff;
}

Section 6: Call to Action

This uses the same custom <h3> style. It also defines the button and its hover state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#cta {
	padding: 60px 0;
	text-align: center;
}
#cta h3 {
	display: block;
	margin: 0 auto 20px auto;
	width: 400px;
	border-bottom: 1px solid #02b8dd;
	padding: 0 0 20px 0;
}
.button-2 {
	display: block;
	margin: 0 auto;
	border: 2px solid #02b8dd;
	color: #02b8dd;
	border-radius: 3px;
	width: 180px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
}
.button-2:hover {
	background-color: #02b8dd;
	color: #fff;
}

We use floats to split the Footer into two columns, #footer-info and #footer-links, then use the same approach to split #footer-links into three horizontal unordered lists.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
footer {
	padding: 60px 0;
	background-color: #f8fafa;
}
#footer-info {
	width: 380px;
	float: left;
	margin-top: 10px;
}
#footer-links {
	width: 520px;
	float: right;
}
#footer-links ul {
	width: 150px;
	float: left;
	margin-left: 20px;
}
#footer-links ul li {
	margin: 10px 0;
}

Conclusion

And that's it: we've built a site homepage with HTML5 and CSS3.