None
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.
<head> tagsUse 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.
recipe-page directory.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.
You’ll be building on the HTML code you completed in Phase 1 of this project.
recipe-page directory. Create a file called styles.css. You can verify this worked by running the ls command.code . to open the recipe-page directory in VSCode.git status. You should see that ‘styles.css’ is not being tracked yet.<head> tagsstyles.css file in VSCode that you just created. Add this small bit of CSS code to the file, then save the file.We’re doing this so we can easily see if we’ve successfully connected styles.css to index.html. We’ll know it worked if all of our paragraph text appears blue instead of the default black when we load index.html at the end of this step.
styles.css from within index.html. Find the index.html file in VSCode. Read the following code snippet and make sure you understand what it does. Then, copy and paste it into the <head> area of index.html, just below the <meta> tag.Questions to Consider
rel, type and href called?"stylesheet", "text/css" and "styles.css" called?Open index.html in Chrome. The blurb under your title should be blue!
When you’re satisfied that styles.css is properly linked to index.html, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Link stylesheet to index.”
If you want to change your paragraph text back to black from the temporary blue, do so now by simply deleting all the code in styles.css.
Now, write some CSS code in styles.css that will change the background color to any color you like!
cmd + spacebar to bring up your Spotlight window, and begin to type color. After you select and launch Digital Color Meter, you’ll see a small window that “picks” the pixel your mouse is currently hovering over. There is no dropdown option to show the color values in hexadecimal, so you’ll have to use a piece of scratch paper, write down the RGB values, and use an online converter to get the hex code (google provides one if you search for rgb to hex).Refresh index.html in Chrome by pressing <COMMAND> + r. Does your new background color show up?
When you’re happy with the background color, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Change background color.”
styles.css and change the color to something that works well with your background color.
Refresh index.html in Chrome by pressing <COMMAND> + r to see if it worked!
When you’re happy with the new font color, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Change font color.”
When you find a font you want to use, click the orange plus sign in its upper right hand corner. A black strip will appear at the bottom of your browser.
Click on it to expand it. You’ll now see a pane that contains some HTML code and some CSS code. Copy and paste these code snippets into the proper files in order to include this new font in your project.
Refresh index.html in Chrome by pressing <COMMAND> + r to see if it worked.
If you need to make the font size larger or smaller for your headings due to the new font’s default size, go ahead and make these changes now in styles.css.
When you’re happy with the new font, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Link to Google font for headers.”
You may remember from Phase 1 of the project that we constrained the width of the image to 600px. (If you didn’t do this yet for some reason, please do so now.) Let’s now also constrain the blurb text under neath the title to a width of 600px, to make it easier for the user to read.
The description is currently inside a pair of <p> tags. But if we use the <p> element as a selector, if we add more paragraph text later, it will also be affected by the 600px constraint. A better way to select the description is to give its opening <p> a class called “description” and then use .description as a selector in styles.css. Go ahead and do this, implementing the width constraint to 600px on your own.
Refresh index.html in Chrome by pressing <COMMAND> + r. Did it work?
When you’ve successfully constrained the width of the description to match the width of the image, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Constrain description width to 600px.”
Right now, the entire webpage is displayed in a vertical fashion. We can make all the content appear on the screen, side by side, and eliminate the need for a user to have to scroll to read everything.
We’ve already accomplished some initial steps for making this happen. We have the title and description in their own <div> which has a class called top. If we don’t specify any layout styling for this div in styles.css, it just defaults to taking up the whole width of the screen. This is what we want, based on the layout image shown in the instructions.
We’ve also created divs that have a class called left and right, respectively. Can you guess what we’re going to use those classes for? We’re going to use them as CSS selectors!
styles.css, use the left class as a selector. We want to constrain the width of this div to 600px so that it aligns perfectly with the image above it. Implement that now. We also want it to float on the left. Implement that now, too.Refresh index.html in Chrome by pressing <COMMAND> + r. Do you see a change to your layout?
You should see that while the div with the left class has stayed on the left, the div with the right class is now on the right and overlapping some of the content. Progress! Let’s fix that silly overlap in the next step.
When you’ve successfully made the <div> with the .left class float on the left of the webpage, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Float half the content on the left.”
styles.css, use the right class as a selector. We want to constrain the width of this div to 600px so that it matches the width of the image and the left div. Implement that now. We also want it to float on the left of its allotted space. Implement that now, too.Refresh index.html in Chrome by pressing <COMMAND> + r. Do you see a change to your layout?
No more overlap!
Play around with the float position of the right class. What happens when you use float: center; and float: right;? Why do you think this happens? Reset back to float: left; when you’re done.
Let’s add a little bit of blank space in between the two divs. Using the margin-left property, add at least 30px of space onto the right div.
If the top of your image is not aligned with the top of your instructions, add a margin-top property to the left div so they match.
Voila!
When you’re happy with the layout of your webpage, run git status. Add and commit, making sure to write a descriptive commit message in the present tense, such as “Complete styling and layout.”