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.
