design1 – A recipe HTML page

Your first project this semester will be to create an HTML only recipe page picking a recipe from Buzzfeed’s Tasty Recipe Youtube Channel. You have a model to work from to structure your page (also see the image at the bottom of this post).

Recipe Requirements

  • A recipe chosen from the Tasty Recipes Youtube channel
  • The Recipe Title
  • Serving size
  • Image of the recipe remotely hosted – please try to find and use the video thumbnail by searching for the recipe name and tasty then look at the images tab – when clicked takes you to the Youtube Video page of the recipe.
  • a paragraph with credits which include links
  • an unordered ingredients list
  • an ordered preparation list
  • an embedded youtube video (you’ll have to figure this out)
  • a table of ingredients and calories counted (use any resource to estimate calories)
  • A button that takes you to the Tasty Recipes Youtube channel

HTML Considerations

  • Use a heading tags in a pattern <h1>, <h2>, <h3> to label sections and to set a visual hierarchy;
  • Discover and use an HTML tag to create a line spacer between sections;
  • Discover and use an HTML tag to embed your Youtube video;
  • Name your file appropriately and host on your server. EG: popcorn-chicken-recipe.html

Post your work to the blog

In a new post or as an update to your post on intermediate HTML, include the following:

  • link to your server hosted recipe
  • links to any resources you used to help you solve a problem. Describe how you solved one of the problems (line spacer and/or embedded YouTube video)
  • upload and embed a screenshot of your recipe page

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *