Skip to content
Submitted about 2 years ago

HTML - CSS

accessibility
eslamwaleed1•20
@eslamwaleed1
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'd appreciate any feedback (":

Code

Please log in to post a comment

Log in

Community feedback

  • Thomas Hertog•865
    @thomashertog

    you may have completed the desktop design, but it is not responsive. I can't see the mobile view of this.

    other than that, you have used absolute positioning for everything (with pixels) that is definitely not how layouting works nowadays. maybe you can try learning some things about flexbox and/or CSS grid to make a new attempt at this challenge.

    your solution is tagged with #accessibility yet you still have <div class="button"> with an svg (for the icon) which is not hidden from assistive tech (as it should be since it's only decorative), and a paragraph for the text, but no <button> element is used...

    Marked as helpful
  • Elizabeth Sotomayor•230
    @elizabethrsotomayor

    Your solution looks great! One suggestion I have would be self-hosting your fonts using google-webfonts-helper rather than downloading fonts, which will allow your site to be more stable in case the link doesn't work for whatever reason. Also, you can use an aria-label for the h1 you have rather than making a whole separate class for it. One more thing, I think your main section needs to have a role. See here. I hope this helps!

    Marked as helpful

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