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.

This guide walks through how to integrate responsive meta data components into the head tag to allow the website to render a different layout based on screen size.

This solution guide examines how to implement a navigation bar into the social network project, including how to work with the Twitter Bootstrap grid system.

This solution guide walks through how to integrate drop down components that are rendered differently based on the screen size viewing them.

This solution guide examines how to integrate and customize the content headings for the Social Network homepage.

In this guide we'll walk through adding the final content items for the social network, spending specific time to analyzing how it works within the grid layout provided by Twitter Bootstrap.

This solution guide walks through how to copy over the CSS styles for the social network, including how to organize the file structure and call the items from within the HTML file.

In this guide we walk through how to use media queries in order to customize how a website responds when accessed by smartphones, tablets, and desktop browsers.

This guide walks through the final fixes for the code structure in order for all of the styles to work properly.

This guide examines how to integrate custom fonts that are embedded within an application and how to call them from the CSS style files.

In this guide we'll walk through how to integrate a custom favicon into a website along with examining all of the tools we used to build the website.