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

E-commerce product page challenge

alvarozama 360

@alvarozama

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that I was able to complete the challenge with very little outside help (tutorials, artiles, etc.). The challenge took a bit longer than I expected to complete, but I'm left quite happy with the end result nonetheless. As far as things I'd do differently next time goes, I'd probably plan ahead for how I'm going to structure my HTML markup a liitle better.

What challenges did you encounter, and how did you overcome them?

Creating the lightbox for the desktop page and the slideshow thingy for the mobile page was tricky. However, getting one done pretty much meant getting the other one done as well, bar the thumbnails from the desktop lightbox. A How To article by W2Schools was helpful to solve these issues.

What specific areas of your project would you like help with?

Just the accessibility part. I still can't wrap my head around thing like aria-expanded, aria-controls, aria-label, and the like. I feel like I'm probably not using them correctly.

Community feedback

P

@Antonvasilache

Posted

Well done with the solution. I think it looks good on all screen sizes.

One small suggestion: check the lightbox overlay for screens larger than 1440px. It does not cover the entire screen, when you open the lightbox.

Cheers!

Marked as helpful

1

alvarozama 360

@alvarozama

Posted

@Antonvasilache

Thanks for your comment and for taking the time to check out my solution. I must admit that until now I've been mostly neglecting XL+ sizes since I'm working on a not-so-large laptop. That is, admittedly, no good reason to ignore lager screen sizes, so I'll make sure to inspect my pages on those viewports as well.

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