Practice with Bootstrap

Getting comfortable with the nuts and bolts of Bootstrap.

Scroll down...

Content

Resources

Comments

For the second sprint, you'll build another site from scratch. In this case, you'll reproduce one of the Bootstrap example sites:

This is a good start because you can check their CSS code if you get stuck but will still need to do it on your own because you'll be working with SASS and using semantic HTML5 tags where appropriate. As with the earlier sprint, it's designed to be pretty straightforward creatively so you can focus on learning the technical details.

Getting Started

Fork and clone the Project Repo on Github.
Add your name to the README file, commit the change, and push to your fork.
Set up the basic files you'll need.
Set up and run SASS in the background.
Import the Bootstrap (and jQuery) files to your project, whether by downloading them from the site directly or via a CDN.

Your Task

Your job is to create a clone of the Bootstrap Jumbotron Template Page -- but also using semantic HTML5 tags and SASS.

Build the structure for the Jumbotron page using good HTML5 semantic tags.
Add styling using Bootstrap's classes. You shouldn't need more than a couple of additional styles -- almost the entire page was built in Bootstrap (they added literally 2 extra styles to push the <body> down). Warning: The navbar is the most difficult part, so don't get discouraged when it's a pain.
Double check that resizing the screen triggers similar breakpoints as in the example.

Note: Their example uses all default Bootstrap classes for styling except for these 2 lines which affect spacing:

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

If you want to check your solution (or if you get stuck), you can see how the example page was built by viewing its source in your developer tools. Just note that they didn't use good semantic HTML5!

Finishing Up

When you're finished with all tasks, push your changes up to your fork (aka $ git push origin master).
To submit your assignment, create a pull request from your fork to the main upstream repository.
Enjoy a donut, you've earned it.