Product preview card component Challenge - using only HTML and CSS

Community feedback

• 

  Joy•80

  @joykaraPosted over 2 years ago

  Hello!.. Congratulations on your solution.🎉 I viewed your code and would like to add insight into the accessibility issues you faced.

  • You could add a main tag <main> instead of the div tag in <div id="product-background"> and a footer tag <footer> instead of the div in <div class="attribution">.
  • Also, start with a <h1> tag in your body's text instead of the <h4>, and write the heading tags in order if need be, i.e; h1,h2,h3,h4,....

  For the HTML accessibility issues, I would recommend using the measurements instead such as px, rem, vh, vw,... instead of the %. I think that would be a better option.

  Finally, in response to your questions:

  • Yes, you should create an external CSS file, which I find to be the best option especially if you'll be working on a site with several pages that may require the same CSS codes, rather than constantly repeating them. Also, I find having an external CSS file makes the work look more presentable. Even so, an internal CSS file would work just fine, but wouldn't serve you best on all occasions.
  • In reference to using --webkits, I, unfortunately, have no expertise in it but I'd recommend looking into CSS tricks website and MDN web docs for further guidance

  Marked as helpful

  1

  ---

  

  Ziyad ghobashi•180

  @ziy-egPosted over 2 years ago

  @joykara thank you so much about your feedback. I really do appreciate that.

  I'll definitely consider using <main> tag and <footer> instead of <div> in the future.

  Also i will practice using the measurements. Thanks agian

  1