Project Walkthrough: Building Facebook

Preparing you to clone the Facebook front-end.

Scroll down...




You've learned a lot of stuff in a short period of time, congratulations! The webpages you built in the last assignment were good practice for what comes now. So warm up your HTML and flex your CSS... it's time for the main event.

In this project, you'll get more experience with building webpages from mockups. In the real world you're lucky if you get a mockup but we'll go easy on you here :)

There's also a happy coincidence -- you actually created these mockups yourself if you did the Mockups Project! The pages you'll be building here are 4 of the same ones that we'll use during the VCS Intensive program, when we'll actually create a full featured Facebook clone from scratch. So there's a very good reason for making you do all this work... :)

This should be challenging for you since you're still working out the kinks in your HTML/CSS. What you learned in the previous assignment will definitely come in handy but you'll also get to experience new things since you'll be building multiple pages that re-use some components and styles. Figuring out how to make your CSS re-usable presents an interesting challenge.

In this project, you won't be given any assets so you can have some experience sourcing your own images and icons. There are good free (with attribution) icons available at The Noun Project and you can certainly use your imagination to source appropriate user and background images. If you're lazy, just look at these Googled Anonymous User images.

High Level Workflow

You should be relatively comfortable with the workflow for building these pages by now:

  1. Set up your Github repository (note: this time you'll use ours)
  2. Dissect the mockup into components
  3. Start building the components
  4. Push everything up to Github.

...Look to the previous assignments and lessons for specifics if you've forgotten.


  • Think carefully about which areas of the pages are repeated from one to the next so you might re-use that markup!
  • Use the same CSS stylesheet for all the pages -- you'll be able to re-use some styles. You'll want to make others different each time. How does that affect how you name your classes and IDs?

On to the main event!

Sign up to track your progress for free


There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Warmup: The Home Page