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

Product preview card component Challenge - using only HTML and CSS

@ziy-eg

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


As a self learner, it was a little bit challenging for me. I still have to work alot on my responsive designs.

my questions is:

  • Do I have to create a separate file for responsive CSS designs?
  • How can I use --webkits, if it is still a thing?

Community feedback

Joy 80

@joykara

Posted

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

@ziy-eg

Posted

@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

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