Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Introduction and Building the Design Template

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>
thumb

PHP Videos

Social Network Development

Introduction and Building the Design TemplateDatabase Creation and PHP MySQLi Connection Script TutorialMySQL Database Tables Creation Script LogicEstablish htaccess and phpini for apache web site server configurationCreate the Main JavaScript Module and Insert Other Modules TutorialSign Up Form and Email Activation PHP MySQL JavaScript Programming TutorialLog In Form Log Out Script Cookies Sessions User ProfileCron Job Automate Social Network Web Site Maintenance TutorialForgot Account Password Form Email Script Ajax TutorialFriend Add Block System Ajax TutorialSocial Network Header Logic Dynamic Links Example ScriptFriend Lists and Social Network Notifications TutorialUser Profile Photo File Upload HTML Form PHP Parse Script MySQLPhoto Gallery CMS TutorialConversation System Social Network Ajax PHP MySQL TutorialSend SMS Text Messages to Mobile Phone PHP Tutorial