Skip to content
Submitted over 3 years ago

Mobile ready first page using BEM and accessibility in consideration

Trevor Merrick•150
@tmerrick17
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Great first try at this. I'm loving it a lot.

Code

Please log in to post a comment

Log in

Community feedback

  • Trevor Merrick•150
    @tmerrick17

    Thanks for the comments. I really appreciate the feedback.

    Things I fixed:

    • I took out the alt attribute after reading this article to better understand what you were saying. https://supercooldesign.co.uk/blog/how-to-write-good-alt-text I appreciate this. I will do this going forward with more “decorative” images.

    Things to (kindly) push back on:

    • In the syle-guide.md file it specifies the desktop width to be 1440px on line 8. This is simply where I added the pattern-background-desktop.svg to the background. You are right though, I would have added the desktop background probably closer to 1200px but I want to be a precise as possible with the documentation. Thoughts on this?

    Questions on:

    • In the very beginning of you comments you mention “…background-wave is not really taking the whole width like it’s supposed to.”

    Both mobile and desktop wave backgrounds go across my browser all the way. I’ve tested out on: Operating System macOS High Sierra Version 10.13.6 - Firefox 92.0 (works like the solution displays) - Chrome 93.0.4577.82 (works like the solution displays) - Safari 13.1.2 (wave background doesn’t show up at all…will check into this.)

    What browser is this happening to on your end?

    Most importantly I really do appreciate all the feedback. I’ve been coding for just about a year now and Frontend Mentor has already been a great find!

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, great work on this one. Layout looks fine, just the background-wave is not really taking the whole width like its supposed to. I am using 1366x768 screen.

    Some suggestions would be:

    • The music icon should have used alt="" since it is just a decorative image. Also, when using alt attribute, avoid adding words that relates to "graphic" like "symbol, image, icon", assistive tech will handle those for you.
    • The min-width: 1440px on your media query is too big for the whole mobile layout to occupy. If you do this, users like me with 1366x768 won't see the desktop layout, we need to zoom out just to see it, adjusting it to a lower would be really great.

    Aside from those, the markup looks really good and this is really great and I think this is great site.

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