Your Favorite Recipe

In this assignment, you'll be redesigning a recipe from a food blog using HTML and CSS for your favorite recipe to improve the user experience. See Blackboard for full details.

In part 1, your focus will be on writing valid, semantic HTML for the content of your recipe. In part 2, you will use the wireframes and mockup of your recipe to add images and write CSS for the recipe. Your goal is to keep the proper semantics of the HTML, while doing your best to acheive what you mocked up. You will have two weeks to write the CSS and lots of class time, so challenge yourself with a great design!

How to get started

• Open this repository with GitHub Desktop using the green button.
• In GitHub Desktop, right click the repository name, then select Open in Visual Studio Code.
• In Visual Studio code, open the terminal panel.
• The first time you work on this project only: Type npm install and hit enter. Wait for the installation to finish.
• Every time: Type npm run start. A new window in your default browser will show up. Nothing will be present.
• In src/index.html: Open the file and add an <h1>Title</h1> tag inside the body tag. Save the file.
• Your change should show up in the window!

How to start and stop the preview window

• Use npm run start to start the preview in your browser.
• Use the ctrl + c shortcut in the terminal to stop the preview.

How to test code before you turn it in

You can test code before you turn it in.

• Use the ctrl + c shortcut in the terminal to stop the preview.
• In your terminal window, type npm run test.
• Review the test results carefully. You may need to scroll up to see if there are any issues.

To turn in code

If you're having trouble remembering the exact steps here, you can look at the instructions for Test Your Connections.

• Save your changes in Visual Studio Code
• Go to GitHub Desktop
• Commit your changes
• Push your changes
• Go to Blackboard
• Open Gradescope in a new tab
• Submit your code from this repository to the assignment in Gradescope. You'll do this twice - once for assignment 3, once for assignment 5.
• You should see the same test results as you got running the test locally. If you don't, please ask me!

Requirements: Part 1

• All HTML is valid.
• Your recipe includes a title using an h1 tag.
• Your recipe includes an introduction paragraph.
• Your recipe includes ingredients, using the ul tag.
• Your recipe includes directions, using the ol tag.
• There is at least one a tag. If your blog has an affiliate link disclosure, you can use this.
• The order of your recipe content makes sense and reads easily. It is not reordered to accommodate your desktop layout, and could be read by a screen reader from top to bottom.
• All HTML tags are semantic, and divs/spans are avoided where possible.
• No heading levels are skipped - you used h1, h2, h3, etc in the correct order. (It's okay to use multiple of the same heading if they are the same level of importance.)
• Formatting, including indentation, spacing, etc, is consistent and easy to read.
• If you used AI assistance, you have sourced it using an HTML comment.

Requirements: Part 2

• Your code still meets the requirements in Part 1.
• All CSS is valid.
• There is no inline CSS or CSS in style tags.
• Your CSS selectors use classes, not IDs.
• Your CSS classes are named in a way that's easy for another developer to read and understand.
• Your specificity is minimal, so other developers can easily override your CSS if needed later on.
• Your design renders consistently in the most recent version of Safari, Firefox, Google Chrome, and Microsoft Edge. (You can use https://www.browserstack.com/test-on-microsoft-edge-browser to test this if you don't have them installed.)
• The finished product looks roughly like your mockup, minus any interactivity, animation, or functionality that might require JavaScript.