Challenge: Programming with HTML5 Lists and Images

---

Coding exercise: Making mint margaritas! 🍃

---

In this exercise, you will need to do the following:

• Create a page that showcases a recipe for making mint margaritas.
• Use a main-level header for the recipe name
• Use two sub-headers named as follows:
  1. Ingredients
  2. Instructions
• Create an unordered list with square bullets containing the ingredients.
• Create an ordered list with lower-case Roman numerals with the instructions for making the margaritas.
• Add an image of the final result of the recipe from a search engine of your choice to your HTML page. Give this image an alternative text label. Place this image under the main level header.
• Wrap the main level header and the image in a container. Give this container an id attribute, with the value recipeTitle.
• Group the elements comprising Ingredients and Instructions into separate containers:
  • Give each container an id value; one named ingredients, the other named instructions
  • Give both containers a class value of recipeList

---

Possible output

---

---

Code your solution away!

---

---