Course Content
Ultimate HTML
Ultimate HTML
Challenge: Images
🏆 Challenge 1:
🏁 Goal
Practice using relative and absolute paths for images in HTML. By the end of this challenge, you will:
- Understand the difference between relative and absolute paths for image sourcing.
- Gain hands-on experience using absolute and relative paths in an HTML document.
- Learn how to provide meaningful
alt
text for images to ensure accessibility and user experience.

📋 Task
- Use the absolute path for the
src
attribute of the first image. Here is the link to the image:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/joking.png
. - For the second image, use the relative path since it is located in the project directory. The path to the image is
./images/joke.png
. - Specify the correct value for the
alt
attribute for both images. Remember that thealt
value will be shown to the user in case of failed images or if users use built-in browser tools that read the webpage content due to disabilities.
Note
The Code Sandbox is broken by default because no path is specified for the images'
src
attribute. After fixing this issue, we can view the live page.
Hint
1. Use the
2. Use the
3. Use the
4. You can use the
5. You can use the
img
tag to specify an image. 2. Use the
src
attribute to specify the path where the image is
located, whether it's an absolute or relative path.3. Use the
alt
attribute to provide a description for the
image.4. You can use the
width
attribute to specify the image's
width.5. You can use the
height
attribute to specify the image's
height.
🏆 Challenge 2:
🏁 Goal
Elevate the visual experience of the website by seamlessly integrating images from the "images" folder into the content.

📋 Task
Bring life to the website by incorporating images from the "images" folder that perfectly complement the theme of dogs and cats. Your task is to:
- For the Dogs section: Insert an appropriate image from the
images
folder that captures dogs' loyal companionship and playful spirit. Remember to use the correct relative path. - For the Cats section: Insert a suitable image from the
images
folder that reflects cats' mysterious charm and independent nature. Ensure you specify the correct relative path. - Set the
alt
attribute to provide meaningful image descriptions. - Adjust the width of both images to maintain a cohesive design.
Hint
1. Use the
2. Use the
3. Use the
4. You can use the
5. You can use the
img
tag to specify an image. 2. Use the
src
attribute to specify the path where the image is
located.3. Use the
alt
attribute to provide a description for the
image.4. You can use the
width
attribute to specify the image's
width.5. You can use the
height
attribute to specify the image's
height.
Everything was clear?
Section 4. Chapter 3