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!
- Copy v3 of recipe project folder and rename recipe-v4
- Rework your HTML skeleton based on the suggestion below:
<html> <body> <header> (semantic element like a div) <h1> (recipe title) <main> <figure> (image with description and serving atop) <section> * 3 (ingredients, instructions, calories) <figure> (youtube <footer> <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.