Improving HTML & CSS - Introduction Tutorial For Beginners Part 4

In this fourth part of the series I continue to extend the basic page from the last tutorial with CSS to make it look better. This Introduction tutorial series is to help anyone who would like to learn how to make their own website from scratch.

Video
#

Code
#

index.html
 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube Tutorial - Peter</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="pageWrapper">
        <div id="header">
        <header>
        	<h1>MySite</h1>
        </header>
    </div>
    <div id="main">
    	<div id="profileInfo">
        	<div id="profilePic">
            	<img src="http://peterentwistle.co.uk/images/thumb_peter.jpg" width="154" height="154" />
            </div>
            <div id="about">
            	<h1>Peter Entwistle</h1>
                <p>Hello my name is Peter and I make websites!</p>
                <h2>Where to find me:</h2>
                <div id="social">
                	<span class="socialPic">
                    	<a href="http://youtube.com/peterentwistletv" target="_blank">
                    	<img src="style/social_icons/youtube.png" width="25" height="25" /></a>
                    </span>
                    <span class="socialPic">
                    	<a href="http://twitter.com/peterentwistle" target="_blank">
                    	<img src="style/social_icons/twitter.png" width="25" height="25" /></a>
                    </span>
                    <span class="socialPic">
                    	<a href="http://facebook.com/peterentwistletv" target="_blank">
                        <img src="style/social_icons/facebook.png" width="25" height="25" /></a>
                    </span>
                </div>
			</div>
            <div id="followInfo">
            	<div class="count">45
                	<br />
                	<span class="countName">Followers</span>
                </div>
                <br />
                <div class="count">30
                	<br />
                	<span class="countName">Following</span>
                </div>
                <br />
                <div class="count">4
                	<br />
                	<span class="countName">Blog posts</span>
                </div>
                <br />
            </div>
		</div>
        <div class="posts">
        	<article>
            	<h2>Page Content</h2>
            	<p>Fusce ultricies, nisi in malesuada viverra, tellus erat tincidunt felis, vel vehicula dui metus non ipsum. Proin imperdiet, arcu ultricies dictum vehicula, lacus ipsum aliquet turpis, quis sodales augue ligula nec tellus. Aliquam blandit ullamcorper pellentesque. Duis vehicula viverra mi, a ornare sapien porttitor quis. Aliquam facilisis pulvinar gravida. Vivamus mollis consequat feugiat. Donec mollis est a ipsum consectetur tincidunt mattis turpis accumsan. Curabitur condimentum neque sagittis mi dignissim cursus. Mauris volutpat faucibus nunc vel bibendum. Curabitur quam nulla, tempor ut cursus nec, hendrerit sed nisl.</p>
            </article>
    	</div>
	</div>
    <div id="footer">
    	<footer>
        	<p>&copy;2013 MySite</p>
        </footer>
    </div>
</div>
</body>
</html>

style.css
 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
81
82
83
84
85
86
87
88
89
html {
    	position: relative;
    	min-height: 100%;
}
body {
	margin:0;
	color: #444;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color:#eeeeee;
	margin: 0 0 100px;
}
#profilePic {
	float:left;
	margin:15px;
}
#about {
	float:left;
}
#about a {
	text-decoration:none;
}
#header {
	width:100%;
	height:40px;
	background: #6a6f75; /* Old browsers */
	background: -moz-linear-gradient(top,  #6a6f75 3%, #28343b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#6a6f75), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6a6f75 3%,#28343b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6a6f75 3%,#28343b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6a6f75 3%,#28343b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6a6f75 3%,#28343b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6f75', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header h1 {
	color:#FFF;
	margin-top:0px;
	position:relative;
	margin-left:30%;
}
#main {
	width:40%;
	min-width:650px;
	margin:15px auto 0 auto;
}
footer {
	text-align:center;
	position: absolute;
    	left: 0;
    	bottom: 0;
    	height: 100px;
    	width: 100%;
}
#followInfo {
	margin-top:15px;
	float:right;
	margin-right:5%;
}
#profileInfo {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow:hidden;
	background-color:#FFF;
}
.count {
	text-align:center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border:solid #999 1px;
	background-color:#CCC;
	padding:3px;
}
.countName {
	font-size:12px;
	font-style:italic;
}
.posts {
	margin-top:20px;
	height:500px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow:hidden;
	background-color:#FFF;
}
article {
	margin:15px;
}

View on GitHub

Download the code

Video#

Code#

Video
#

Code
#