Twitter Bootstrap + Social Network Project Overview and Instructions
In this guide I walk through the project that we're going to build along with instructions on how to work with the source files. This project is different than the other projects since it's too extensive to build completely from scratch. Instead we're going to follow a real world project build process where we work with outside libraries such as the Twitter Bootstrap framework and a design sent over from a UI designer. And we'll walk through each of the key components for building responsive HTML/CSS websites.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

The final project of this course is a social network, where you're going to learn new processes and techniques. Also, this project is sure to give some extra weight to your portfolio.

In this project, we're going to create a social network called "DailySmarty". This web page is fully responsive, so it'll scale well to any sized screen.

large

For this project, I hired a designer to design the homepage for us as it is quite extensive. This is why it's not like the projects we built earlier, as a similar approach would take us 30 to 40 hours to build a homepage like us. Instead, we'll focus on the high level topics that we haven't go into earlier, to give you an idea of what it takes to build a real world application like this.

To cut short on the time, we'll use pre-existing design frameworks like Bootstrap. Now, this is not a template that you can customize for your needs, rather it is a framework that gives us a set of components, so we can integrate them in our project. This way, we don't have to spend time creating anything from scratch. In addition, it gives us a grid-like system, so we don't have to spend a ton of time aligning different components on the page.
In a real world design, this is the approach you'll take, as it is rare for a client to ask you to build all components from scratch. So, this would be a good place to learn how to handle such applications.

This is also why I'm not going to ask you try it first before looking at the solution. Rather, I'd say follow along, and see if it makes sense for you.