Bootstrap

Bootstrap is a library of code that can help you make a great website.   To get started with Bootstrap, everything you need is at getbootstrap.com.  For this assignment, you’ll be re-making your index.html page into a page you’ll be proud of!

Here is a video version of (most of) this tutorial.

Step 1:  Save your old work

Rename your old index.html as old_index.html.  You don’t want to lose those links.

Step 2:  Starter Template

Make a new page called index.html, and copy the starter template into that page.

Take a look at the code:

There is a link to a stylesheet in head of this html, and three scripts near the bottom.  These files are from Bootstrap, and provide a huge pile of goodies we can use in our website.  We haven’t actually used any of them yet.

Next, we’ll add the structure of our new page.  We’ll add a container to hold our content, and then we’ll add some rows and columns.   It is super important that you build your page exactly this way.  You can build lots of different looking pages with Bootstrap, but you’ll have to use this structure.

Change the title from “Hello, world!” to something appropriate for your site.   Then delete the line in the body that has the <h1> tag in it.

Step 3: Set up your grid.

Take a look at this page.  It shows how to create your grid using tags like <div class=”row”> and <div class = “col”>.

Step 4:  Add Components

Add at least three components, including a nav bar, to make your new index page.  Include at least one component that uses an image.

Some things that would make it great:

Make a “card” for each assignment, with an image representing that assignment.

Make a carousel showing images of pages you’ve made.