In this section, we are finally going to start implementing styles into our app and making it look more like a real application. So far, everything we've focused on has really been about functionality. But this section is going to be all about styles.

In Pivotal Tracker, I'll drag "Stylesheets" over from the Icebox. Opening this up, you can see that we have custom styles, we're going to integrate bootstrap styles, and we're going to organize our SASS files.

Eventually, we're going to break up some of the more abstract items here. As a Rails developer, you will usually be handed the design, so the main focus here is to take design files and then implement them.

If I open up the Bootstrap site we can download the latest version from there.

We could go to the documentation here and get into how each component works. There's every thing we need, from alert messages, to breadcrumbs, carousels, dropdowns, navigation components, modals, and more. There is a ton of content here and digging through it all is just one approach we could take. However, there could be an entire course based on how to build all of this from scratch.

Instead, if you look at the "Examples" section, you'll find a bunch of starter sites. These are fantastic. I've actually built production applications using these starter sites as a base point. You don't want to use them without altering them, that usually wouldn't look very good. These don't really work as standalone final products, so instead I treat them as a good starting point.

We have three layouts, so it makes sense to have three different kinds of components. I'm going to pick "Cover", "Album", and "Blog". Each one of these are going to fit in perfectly with what we're trying to do.

"Cover" is very similar to what our home page will look like, with a nav item, a place for your name, and some content about yourself. It also has a copyright module at the bottom, and a "Learn More" button in the center of the page to redirect users to the About page or something like that. Eventually, we're going to tie in the ability to use a video background here, which will make for a pretty cool design element. That should make your site pop a little bit more.

Next is our portfolio layout using the "Album" start page. This has our thumbnail images, a footer, and up top we have a dropdown. If you click on it, it slides up and down, so you can put in some more information about yourself next to the navigation links.

After that, we have our blog template. This has navigation items, the blog itself, space for a slogan, an "About Us" section, and an area for widgets and anything we want there. We'll see each of our blog posts with built-in pagination.

All of this is going to really give our application a lot more uniqueness. It'll have that professional look and feel we need to really impress someone that might want to hire you.

Notice how different each one of these pages is. We need three different layouts, so we've picked three different designs. That's what we're going to implement. We'll customize these and give them their own unique flavor. If you don't like the three designs I've chosen, feel free to pick your own. If you're going to follow a long line-by-line with me, then I'd recommend choosing the same ones as me, because they're all going to be a little bit different. Still, at a high level, we're simply going to be taking HTML and CSS and implementing it into our application.

To get the source code, click on "Download the Bootstrap source code" at the top of the Examples page. Unzip the file, and navigate to bootstrap-x.x.x/docs/examples. Here, we have the source code for all the starter sites we saw before.

In the terminal, let's create a new branch with 'git checkout -b design', and now we're ready to start implementing the homepage design.