So far we have our main folders set up, a few files in most of the folders, and a master page. Now lets make the signup page (index.php).

Open master.php, and save as index.php. I know! We already have an index.php - overwrite it! We just used it as a temporary placeholder.
Our new index.php file should be the same as master.php. If it is, perfect! If not, make it the same!

The first thing we do when changing a duplicate of master.php, is change the <title>.
Change the title of index.php to "Welcome to Facebook - Log In, Sign Up or Learn More".

Next, create a new folder inside "images" called "index". This is where we'll keep all the index page images, so we're a little more organized.
Now you'll need to save 3 images and place them in the "images/index" directory.
The Background Gradient - logo.png
Index FB Logo - gradient_bg.png
The Connected World - world.png
Should look like this:

With index.php still open, add this to the middle of your body, between the 2 require_once().

<div id='blueTop'>
<div id='indexBlueTopContents'>
<a href='./' title='Go to Facebook Home'>
<img src="images/index/logo.png" alt="Facebook Logo" id='indexLogo' />
</a>
<div id='indexRight'>
<form method='post' action='login.php'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" class='loginWords'>Email</td>
<td align="left" valign="middle" class='loginWords'>Password</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="middle"><input type='text' autocomplete="off" id='email' name='email' tabindex='1' class='loginText' /></td>
<td align="left" valign="middle"><input type='password' id='pass' name='pass' tabindex='2' class='loginText' /></td>
<td align="left" valign="middle"><input type='submit' value='Log In' tabindex="4" id='indexLogin' /></td>
</tr>
<tr>
<td align="left" valign="middle" id='indexPersist'><label><input type="checkbox" name='stayLogged' tabindex="3" value='1' checked='1' />Keep me logged in</label></td>
<td align="left" valign="middle"><a href='recover.php' class='loginLink'>Forgot your password?</a></td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id='indexContents'>
<div id='indexGuts'>
<div class='mt40'>
<div id='indexRightArea'>
<div class='indexBold' id='signUpText'>
Sign up
<div class='noBold fs16'>It's free and always will be.</div>
</div>
<div id='regForm'>
<form method='post' action='register.php' name='reg' id='reg'>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td class='indexLabel'>First Name:</td>

<td><input type='text' class='indexReg' id='firstname' name='firstname' /></td>

</tr>

<tr>

<td class='indexLabel'>Last Name:</td>

<td><input type='text' class='indexReg' id='lastname' name='lastname' /></td>

</tr>

<tr>

<td class='indexLabel'>Your Email:</td>

<td><input type='email' class='indexReg' id='email_reg' name='email_reg' /></td>

</tr>

<tr>

<td class='indexLabel'>Re-enter Email:</td>

<td><input type='text' class='indexReg' id='email_confirm' name='email_confirm' /></td>

</tr>

<tr>

<td class='indexLabel'>New Password:</td>

<td><input type='password' class='indexReg' id='password' name='password' /></td>

</tr>

<tr>

<td class='indexLabel'>I Am:</td>

<td>

<select name='sex' class='indexSelect' id='sex'>

<option selected="selected" value='0'>Select Sex:</option>

<option value='1'>Female</option>

<option value='2'>Male</option>

</select>

</td>

</tr>

<tr>

<td class='indexLabel'>Birthday:</td>

<td>

<select name='birthday_month' id='birthday_month' class='indexSelect'>

<option selected="selected" value='0'>Month:</option>

<?

for($i=1; $i<=12; $i++)

{

echo "<option value='$i'>".date("M", mktime(0, 0, 0, $i))."</option>\n";

}

?>

</select>

<select name='birthday_day' id='birthday_day' class='indexSelect'>

<option selected="selected" value='0'>Day:</option>

<?

for($i=1; $i<=31; $i++)

{

echo "<option value='$i'>$i</option>\n";

}

?>

</select>

<select name='birthday_year' id='birthday_year' class='indexSelect'>

<option selected="selected" value='0'>Year:</option>

<?

for($i=date("Y"); $i>=date("Y")-100; $i--)

{

echo "<option value='$i'>$i</option>\n";

}

?>

</select><br />

<a href='javascript: void(0);' class='smallLinkA' id='why_provide_birthday'>Why do I need to provide my birthday?</a>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type='button' id='signup' value='Sign Up' /></td>

</tr>

</table>

</form>

</div>
</div>
<div class='indexBold w450'>Facebook helps you connect and share with the people in your life
<img src="images/index/world.png" class='p10' />
</div>
</div>
</div>

Save index.php, and open styles/global.css, and add this after the #footer ID.

.loginWords { padding-bottom:4px; color:#FFF; font-weight:400; font-size:11px; width:150px; height:15px; padding:0 0 0 10px; }
.loginText { border:1px solid #1d2a5b; height:15px; vertical-align:middle; padding:2px 4px 3px 3px; margin-left:8px; font-size:11px; width:140px; }
a.loginLink:link, a.loginLink:visited, a.loginLink:active { margin-left:10px; color:#89a9c2; font-size:11px; text-decoration:none; }
a.loginLink:hover { text-decoration:underline; }
.p10 { padding:10px; }
.indexBold { color:#0e385f; line-height:29px; font-size:20px; word-spacing:-1px; font-weight:bold; padding-left:10px; }
.noBold { font-weight:normal; }
.fs18 { font-size:18px; }
.fs16 { font-size:16px; }
.w450 { width:450px; }
.mt40 { margin-top:40px; }
.indexLabel { font-size:12px; text-align:right; padding-right:5px; color:#1d2a5b; height:33px; line-height:33px; vertical-align:middle; width:105px; }
.indexReg { height:28px; border:1px solid #96a6c5; font-size:16px; line-height:16px; vertical-align:middle; width:99%; margin-bottom:4px; padding:0 4px 0 4px; }
.indexSelect { height:31px; border:1px solid #bdc7d8; padding:5px; margin:0 0 4px 0; }
#indexLogo { margin:31px 0 0 18px; }
#indexRight { float:right; width:391px; height:58px; margin-top:13px; }
#indexRightArea { float:right; width:383px; }
#signUpText { border-bottom:1px solid #9aafca; padding:0 10px 10px 10px; }
#regForm { margin:13px 0; border-bottom:1px solid #9aafca; }
#indexBlueTopContents { margin:0 auto 0 auto; width:72%; min-width:900px; height:82px; }
#indexLogin { width:44px; height:20px; outline:1px solid #29447e; border:0; padding:2px; border-top:1px solid #8a9cc2; color:#FFF; font-size:11px; background-color:#6079ab; font-weight:bold; margin-left:9px; cursor:pointer; }
#indexPersist { height:14px; color:#89a9c2; font-size:10px; cursor:pointer; padding:0 0 0 5px; }
#indexContents { background-color:#f9fafc; background-image:url(../images/index/gradient_bg.png); background-repeat:repeat-x; height:480px; width:100%; }
#indexGuts { margin:0 auto 0 auto; width:72%; min-width:900px; height:480px; }
#blueTop { background-color:#3b5998; height:82px; width:100%; }
a.smallLinkA:link, a.smallLinkA:visited, a.smallLinkA:active { font-size:11px; color:#5b73c5; text-decoration:none; }
a.smallLinkA:hover { text-decoration:underline; }

#signup { width:105px; padding:auto 6px auto 6px; text-align:center; color:#FFF; font-weight:bold; cursor:pointer; background-color:#6faa55; outline:1px solid #3b6e22; border:0; border-top:1px solid #98c286; height:27px; vertical-align:middle; font-size:14px; margin:5px 0 9px 0; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; }

The only real thing you need to pay attention to, is the PHP in index.php. We used a for loop to create a list of months, days, and the last 100 years for your birthday options.
Alternately, if you're having troubles with inputing the HTML and CSS into index.php and global.css, you can download our progress from this .zip.

for(init, condition, increment)
The starting value, loop through while the condition is still true, an increment so the loop doesn't go on forever.
php.net - p2pu.org

NOTE: From time to time I will upload the entire project. I'd appreciate it if everyone used it to learn from, and not just avoid doing the actual work. The work behind this project is extremely important to do for learning purposes. Once you create a site like this from scratch, you're pretty much set for any type of website! It pays off, believe me!

For legal purposes; I did not rip any code off of Facebook.com©, everything here was written by me. Hopefully that keeps us out of trouble :)

In our next class, we're going to add a database to our Facebook so people can actually sign up!