Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card

#accessibility

@Joshuakme

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, Can you help to look at my HTML code, is it a semantic HTML code?

Community feedback

kxnzx 870

@kxnzx

Posted

Hello @Joshuakme,

Congratulations finishing your first challenge! You did a great job! You managed to make the design look similar!

I have some suggestions:

  • Wrap the <section class="card"></div> in a <main></main> tag. The main tag is considered the primary content of the page (also called an accessibility landmark). A landmark ensures that a screen reader and people with visual impairment have the ability to jump and identify to sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer. Also remember to wrap your <div class="attribution"></div> in a <footer></footer> tag.

  • It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning. You made the right choice by wrapping your elements in a <section></section> tag! We use the section tag when the content within it is related. As you can see the image with the perfume bottle and the description are related. So well done!

Keep on going! :)

Marked as helpful

1

@Joshuakme

Posted

@kxnzx I only remember to wrap the elements in the <section></section> tag to make HTML code semantic, but I forget to wrap the others. Anyways, thanks for the helpful advice! :)✨

0
kxnzx 870

@kxnzx

Posted

@Joshuakme Yrw! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord