Bootcamp
Search…
1.POCE.1: Noodle Recipe Website

Introduction

Create a website that showcases noodle recipes only using HTML. We will not be using JS or CSS for this exercise. You will need to use GitHub Fork and Pull Request features. If you are unfamiliar with these, see Rocket's Basics Course material on these topics here.

Instructions

  1. 1.
    Fork and clone this empty starter code.
  2. 2.
    Google for 4 noodle recipes: 2 recipes that have onions, 2 recipes that have chicken.
    1. 1.
      Save an image of each recipe's dish to our repo
  3. 3.
    Create an HTML page for each recipe, where each page has the following standard info.
    1. 1.
      Recipe title
    2. 2.
      Recipe ingredients
    3. 3.
      Preparation time
    4. 4.
      Instructions
    5. 5.
      Food image
      1. 1.
        Use img tags in our HTML referencing the images saved from step 3.
  4. 4.
    Create a main page that links to each noodle recipe page. (Use an a tag.) Create a link on each recipe page linking back to the main page.
  5. 5.
    Create new pages for onion and chicken ingredients respectively. On each page, create lists of links to recipes containing that ingredient, and a back link to the main page. Create links to the ingredient pages from the main page.
  6. 6.
    When done, create a pull request to submit your work and share the PR link in Slack. You should have 7 HTML pages total.

Reference Solution

Click here to see the reference solution for this post class exercise. Click here to see the live version: https://rocketacademy.github.io/html-noodles-bootcamp/​