⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Introduction and Building the Design Template

Published : November 20, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to build a social networking website from scratch. All of the technologies we are using are free and open source(HTML, CSS, JavaScript, PHP and MySQL). This first video in the series runs through a quick introduction then jumps right into constructing your website design template system that passes HTML5 and CSS validation. index.php 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Intersect Social Network Tutorials and Demo</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div id="pageMiddle">
  &nbsp;
</div>
<?php include_once("template_pageBottom.php"); ?>
</body>
</html>
style.css 
body { margin: 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; }
/* PAGE TOP */
#pageTop {
	background:url(headerSliver.png) repeat-x;
	height: 90px;
}
#pageTop > #pageTopWrap {
	width: 1000px;
	margin: 0px auto;
	height: 90px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
	float: left;
	height: 90px;
	width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
	float: left;
	height: 90px;
	width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
	margin-top: 8px;
	padding: 4px;
	text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
	color: #CCC;
	text-decoration: none;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
	color: #C0E73D;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
	margin-top: 2px;
	padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
	display: block;
	float: left;
	color:#CCC;
	text-decoration: none;
	margin: 0px 16px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
	color: #C0E73D;
}
/* PAGE MIDDLE */
#pageMiddle{
	width: 1000px;
	margin: 0px auto;
	height: 900px;
}
/* PAGE BOTTOM */
#pageBottom{
	background: #666;
	padding: 24px;
	font-size: 12px;
	color: #CCC;
	text-align: center;
}
template_pageTop.php 
<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="http://www.webintersect.com">
        <img src="images/logo.png" alt="logo" title="Web Intersect 2.0">
      </a>
    </div>
    <div id="pageTopRest">
      <div id="menu1">
        <div>
          <a href="#">Sign Up / Log In</a>
        </div>
      </div>
      <div id="menu2">
        <div>
          <a href="http://www.webintersect.com">
            <img src="images/home.png" alt="home" title="Home">
          </a>
          <a href="#">Menu_Item_1</a>
          <a href="#">Menu_Item_2</a>
        </div>
      </div>
    </div>
  </div>
</div>
template_pageBottom.php 
<div id="pageBottom">&copy;2013 Web Intersect</div>
▲