Bootstrap: Hero Homepage Exercise
The goal of this exercise is to use the CSS classes and components you've learned so far from Bootstrap to lay out a homepage for your website.
Navigation & Jumbrotron
Download the starter code by right clicking and saving the file to your computer. Save the file as
- Use the navbar component to create a navigation header for your website. You can experiment with different positioning and layout, whatever strikes your fancy.
- Use the nav component to add a footer with social media links to your email, LinkedIn profile, GitHub profile, or more.
Make a splash with the jumbotron
- Use the jumbotron component to create an attention grabbing introductory section to your homepage.
You can either start from scratch, or copy your content & code from the first workshop into the starter code.
In the jumbotron include a
- Don't forget to swap the starter code content with your own personal touch ;)
- Bonus: Set a large background "hero" image
- Keep practicing using Bootstrap components, add other components like buttons, experiment with other navs or typography classes (e.g. blockquote).
- Override the Bootstrap base CSS styles with your own colors, font choices, etc!
- As a stretch goal, add a carousel.
Note: Your projects are all going to be different because it's your personal homepage. The solution file is not meant to be prescriptive, but just show you what's possible using basic components.