In this project you will create a well-designed webpage that displays one of your favorite recipes. It will include the ingredients, the steps needed to make the dish, links to similar recipes, and at least one photo.

Phase 1 of the project involves coding the structure of your webpage using HTML. This includes the ingredients, the steps needed to make the dish, links to similar recipes, and at least one photo.

Phase 2 of the project involves adding styling and pizazz using CSS. This includes changing the font style, font size, colors, and significantly altering the layout.

Phase 3 of the project involves incorporating Bootstrap. You’ll add a navigation bar and several other Bootstrap components of your choosing.

Phase 4 of the project involves incorporating jQuery. You’ll add at least one interactive element of your choosing.

Context

Basic Requirements

Setup Instructions

Use the Terminal for navigating around the file system and creating new folders and files. Refer to the lesson on The Command Line Interface if you need guidance on using the Terminal.

When you get to the steps below that ask you to initialize a git repo and track files using git, refer to the lesson on Git and Version Control if you need guidance.

If you have questions, do not disturb your colleagues until you have spent at least 20 minutes troubleshooting on your own. Be sure to format your question using the template we practiced in the Asking Good Questions lesson.

Lab Instructions

Starter Code

You’ll be building on the HTML & CSS code files you completed in Phases 1 and 2 of this project.

Lab Exercise

Part 1 - Properly link to the Bootstrap CSS CDN

Refresh index.html in Chrome by pressing <COMMAND> + r. Your webpage should, more or less, look the same as it did before. You might notice that the non-header font is different. No problem.

If something is really out of place, see if you can fix it by adjusting the margins or another aspect of the Box Model.

When you’re that you’ve properly linked to the Boostrap CSS CDN, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Add Bootstrap CSS.”

Part 2 - Add column classes to your divs to make the webpage responsive

While the Chrome tab that is rendering index.html is open, open the Developer Tools. Click on the mobile device icon (shown below) so you can see what your web page will look like on a cell phone. You can use the dropdown menu to change the style of phone or tablet, and thus change the mock-up screen size.

While your webpage might look OK, it’s likely that your headers are getting cut off or that there are other minor adjustments that need to be made. That’s because we haven’t told index.html to take up the whole width of the screen, whatever size it may be. We can do this by pasting this <meta> tag into the <header> tags:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Save the file, then refresh index.html in Chrome by pressing <COMMAND> + r. Your cell-phone mockup should look a lot better now!

Do you remember how to tell Bootstrap to allow a div to take up a certain number of columns? On a small screen, we usually want divs to take up all 12 columns so things are as large as possible. Let’s add the col-xs-12 class to the divs that currently have the top, left and right classes. (Remember, elements may have more than one class!) Here’s an abbreviated example:

<div class="top col-xs-12"></div>
<div class="left col-xs-12"></div>
<div class="right col-xs-12"></div>

When you’re satisfied with your new column classes, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Specify column widths.”

Part 3 - Containers for the Navigation Bar and Content

You learned in the video lesson that Bootstrap requires all content to be inside containers. Let’s add those now. We typically use a fluid container for the navbar and a regular container for the other content. Be sure to maintain proper indentation.

You can refresh the webpage in Chrome but there won’t be any obvious changes to the layout.

<body>
  <div class="container-fluid">
    <!-- navbar code will go here (Step 4) -->
  </div>

  <div class="container">
    <!-- all your current HTML body code goes here -->
  </div>
</body>

When you’re satisfied with the placement and indentation of the containers, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Add navbar and main content containers.”

Part 4 - Add a navigation bar to the top of your webpage

Visit the Bootstrap Navigation Bar page. Skim through the documentation to get a sense of what this component does and how to implement it (you don’t need to read everything).

When you have a good understanding of how the navbar works, read through the HTML example code in this section. There are a lot of class names in the code that you’re probably unfamiliar with. These are Bootstrap-specific classes that have special functionality. Once you mostly understand this code, copy and paste it into the container-fluid div in index.html

Refresh index.html in Chrome by pressing <COMMAND> + r. You should now see the example navbar on your page! Is there a difference in how your navbar appears on the mobile screen version vs. the laptop screen version?

When you’re satisfied with the placement and styling of the navigation bar, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Add and style navbar.”

Let’s clean up the navbar a little bit. You can remove things like the search bar, the drop down menu, etc. Just leave the “Brand” and a page link or two. You can customize the colors using CSS to suit your theme! Add and commit your changes with a useful commit message.

Project 1 - Recipe Page

Phase 3 - Incorporate the Bootstrap Framework

Languages

Frameworks & Libraries

Primary Goals

Overview