In this lab, you will enhance your pet bakery webpage by adding links and images. This will help you understand how to use attributes in HTML.
All images have been provided for you in the assets/images folder.
- Link Insertion: Add a hyperlink to the pet bakery's website.
- Image Insertion: Add images for each product using the
<img>tag. - Alt Attribute Usage: Use the
altattribute for each image. - Hotkey Navigation: Move an entire line of code using hotkeys to quicken code writing.
- Fix Image Width Inline: Adjust the width of the images using the
styleattribute to prevent oversized images.
Attention: When you complete a task, put an x in the middle of the brackets to mark it off your ToDo list.
- Create a section with the id
product-cardsand wrap the images in it. - Inside the section, create a div for each product: Dog Biscuits, Cat Treats, and Bird Seed Bars. Use appropriate heading tags for the product names and paragraph tags for the descriptions.
- Product Name (Dog Biscuits):
Dog Biscuits - Product Description (Dog Biscuits):
Crunchy and healthy biscuits for your dog. - Product Name (Cat Treats):
Cat Treats - Product Description (Cat Treats):
Delicious and nutritious treats for your cat. - Product Name (Bird Seed Bars):
Bird Seed Bars - Product Description (Bird Seed Bars):
Seed bars packed with essential nutrients for birds.
- Product Name (Dog Biscuits):
- Within each div, move the image elements to each corresponding div and put them above the header. Use the hotkeys for your operating system:
- Windows: - Alt + ⬆️ or ⬇️
- MacOS - Opt + ⬆️ or ⬇️
- Adjust the image width using inline styles to fix oversized images:
- Add a style attribute to the
<img>tag to set a fixed width.
- Add a style attribute to the
🎊 Fantastic work! You just created detailed product cards using div elements. 🎊
🛑 Only use this as a reference 🛑
💾 Not something to copy and paste 💾
Note: This lab references a solution file located here (link not shown).