Hi everybody. Today we're going to talk about Bootstrap. Bootstrap is a framework for creating web sites that's pretty popular among web designers. It focuses on a responsive, mobile-first approach and what this means for you is that responsive design is pretty much built in. And they do a really good job of making sure that their pages look good on small screens. And then build incrementally out from there. Bootstrap consists of CSS and HTML templates that you can use and reuse. It also includes JavaScript extensions, which is really handy, because it is a way to add JavaScript to your pages, even if you don't know how to use JavaScript yourself. Finally, the emphasis for Bootstrap is what we call 'interfaces and layouts'. It gives us this very familiar look and feel to sights that were made with Bootstrap. Speaking of that, who uses Bootstrap? There are a lot of popular sights that are or were built using Bootstrap. These include nba.com, target.com, Walmart, codeacademy, Bloomberg, and airbnb. If you'd like, you can even go to this website, builtwithbootstrap.com, to see a list different sites that use bootstrap. You wouldn't do that necessarily just to go, hey let's go ahead and look at all the sites. Instead it's a really nice place to go to give you ideas for all the different layout designs that are out there for you to use as a building block. There are a number of benefits of using Bootstrap 3.0. One is that it has a very handy 12-column grid system. What this does is it helps with spacing issues. If you've ever spent a lot of time trying to center something exactly in the page or lay out three columns in a row and have them spaced out nicely, you know that it can take a lot of time. When you add in the fact that this column system has built in responsive design it makes it a really attractive option to learn about. Next, Bootstrap tries to include all the very common jQuery functionalities. These include things like accordions, the drop up and down of content, includes drop-down menus, and also carousels for pictures. It actually has a lot of different functionalities, but I wanted to just mention some of the ones that people just use the most. Finally, Bootstrap has that familiar look and feel that I mentioned before. Many sites use Bootstrap, and when you use it, it helps make your site and any forms that you might want people to fill out, look what we can call legitimate. It looks like a real site. And that's really valuable, because it's important for people to have confidence in your site when they go to visit it. So why should you consider using Bootstrap? Or at least know a little bit about it? First of all, it can lead to really fast development. You can have a great looking site up in really just a few moments. Second, it's platform independent. So it's going to look great no matter what browser people are using. It's responsive by default. You don't need to do anything to make it look good on different browsers. It does it by itself. And finally, it's customizable. It's one of those things where you can like so many things about it. But if there's something that you don't like, that's okay. You can go in and you can change the values to give it the look that you want it to have. But there are reasons why you might not want to use Bootstrap. One of the biggest complaints is that Bootstrap doesn't always follow best practices. For the longest time, people have really stressed that we want to separate content from layout in our webpages. And when you use Bootstrap, those lines become a little bit blurred. And it's often very easy to see that we're combining them. Another reason that you may want to avoid using Bootstrap is that it can be very what we call resource-heavy. As I mentioned, it has the ability to do carousels, and accordions, and drop-down menus, and other things with JavaScript. And it has so many different entities built into it, that often times you're going to be using more than you really need if you have a simple page. Finally, that look is somewhat generic. And while I put that as a plus point one slide earlier when I said it gives people confidence that you have a real page, if you're making your site because you're artistic or creative. Or you want to show that you are really an innovative thinker. Then you might not want to use Bootstrap. You might really want to head off on your own. When we talk about Bootstrap in this class, there are a number of different ways we can approach it. One is says a supplement to your style, if you already coded it up and you just want to add one or two things that Bootstrap can offer, that's great. Another way to look at bootstrap is to download one of their themes and then you go on and you expand upon it or maybe instead take a little bit away. So it's important to understand that Bootstrap is something that you want to use, not something that you feel confined by. We're going to talk about the basics of Bootstrap. We're going to talk about navigation and images and the grid system. But it's important to know that there's still going to be many parts left untouched, that we can't reach. If and when you decide to go and use some of that Bootstrap code, just remember it's important to test your code often when you are using something that isn't yours. So make sure you code a little bit, test, code a little bit, and test. And I hope you remember to keep up that practice over this next week when we start adding Bootstrap to our code. Thanks.
