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

Responsive using BEM

ZaraAg 145

@zaraag92

Desktop design screenshot for the Creative agency single-page site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback will be appreciated. Thanks.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. I rarely see this challenge so I am on luck to seeing this one. Layout in desktop is good as well as for the mobile state. In terms of responsiveness, it is fine as well.

Some suggestions would be:

  • The a tag that wraps the header logo should have an aria-label like aria-label="homepage". This way, a screen reader user would know where this link would navigate them hence it will bring them to the "homepage" of your website.
  • The img as well on the header should have the alt be like alt="creative". The logo itself have the text "creative" and it would be great to have the alt to be that as well. Also when adding alt text to an image, do not add the word "logo, picture, icon, graphic" anything else that relates to "image" word. Assistive tech will handle those for you.
  • alt text for the hero section image could be better and not just "background". If you think an image adds a content, make bit more descriptive alt text.
  • alt text for other section images as well could be better and descriptive.
  • The slider arrow toggler should have used a button element and not just img. Using img on this one is not really accessible and keyboard or screen reader users won't be able to toggle it. button would be good along with it's aria-label like "change slider". Since the slider doesn't really contains any text that can be read, there is no need for it to be focused on this, I say this if you were to have those focused on javascript like .focus().
  • On mobile layout, the hamburger menu should have used a button element with aria-expanded attribute and img. Also, since you are adding like a no-scroll, it would be good to trap the focus to the dropdown only along with the hamburger toggler.

But still, you did a good job on this one. Really liked this one.

Marked as helpful

0
ZaraAg 145

@zaraag92

Posted

Raymart Pamplona thanks so much for your feedback. I really do appreciate it and will pay more attention on screen readers and make changes on my project. Thanks again and have a good day !!!!

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