Skip to content

Latest commit

 

History

History
 
 

html-containers

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
solution.html
solution.html
 
 

README.md

HTML Semantic Containers Exercise

Take yesterday's solution from HTML Introduction Exercise and add some more semantic structure:

  1. Create a header section at the top
  2. Add an img of the app-academy logo within the header section
  3. Add a nav element within the header, after the logo
  4. Cut and paste your unordered list of anchor links into the nav section
  5. Add an aside element
  6. Cut and paste all of the ingredients elements into the aside
  7. Put the recipe image inside of a figure element
  8. Add a figcaption element below the figure
  9. Cut the link to wikipedia from your description paragraph and paste it into the figcaption element
  10. Add a section element to contain the figure, description and instruction elements
  11. Add a footer element at the bottom
  12. Add a p element in the footer with some text/link about where the recipe originated from

After coding your recipe page, compare your html to this example.