Recipe Assignment Rework

We’re adding another week to the recipe assignment. This becomes effectively the fourth version. Version 1 was just the HTML, v2 included the very basic css with very specific instructions, and then v3 was to be the last with good design. So we’re creating a v4 that is giving some more specific instructions about how to accomplish the design goals of v3.

I set out on Tuesday a number of steps you should take and pointed to a few different CSS strategies to use. But today I’ll put them all together here in a post!

  1. Copy v3 of recipe project folder and rename recipe-v4
  2. Rework your HTML skeleton based on the suggestion below:
    <header> (semantic element like a div)
      <h1> (recipe title)
      <figure> (image with description and serving atop)
      <section> * 3 (ingredients, instructions, calories)
      <figure> (youtube
      <a> (link button to the recipe) 

3. Comment out all your css.

4. Add the css to complete the layout strategy. (reset code)

header, main, footer {
  max-width: 100rem;
  margin: 0 auto;

section {
  max-width: 65rem;
  margin: 8rem auto;

5. Add css for top figure layout

figure {
  position: relative;

h3, figcaption{
  position: absolute;

img {
  width: 100%;
  display: block;

6. Add css for discovered responsive youtube video.

7. uncomment the pieces of your css that you wish to use.

Leave a comment

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