Responsive Product Preview Card

Community feedback

• 

  kxnzx•870

  @kxnzxPosted over 2 years ago

  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

  ---

  

  Joshua Koh•70

  @JoshuakmePosted over 2 years ago

  @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

  @kxnzxPosted over 2 years ago

  @Joshuakme Yrw! :)

  0