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

Huddle Landing Page with SASS

@john-k-phillips


Design comparison


SolutionDesign

Solution retrospective


Pretty happy with the outcome and looking forward to moving onto some harder projects.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Though I had to zoom out since you are using 1440px as the desktop breakpoint which is larger on a traditional 1366x768 resolution that lots of user uses, the 1440px on the design doesn't mean it is the breakpoint, lowering it down would be really great. The mobile layout however looks great.

Some suggestions would be:

  • When using section tag, it always expect to have a heading tag inside it, maybe changing some section in here that doesn't have a heading tag into a div so that errors won't fire.
  • The hero-image could use an aria-hidden="true" so that it is totally hidden for screen-reader users or just in general, adding aria-hidden="true" to decorative images.
  • If you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.
  • Social media links could be inside ul since those are "list" of links.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.

Aside from those, great job again on this one.

Marked as helpful

0

@john-k-phillips

Posted

@pikamart Thank you for taking the time to type these notes out, this is great not only for this project but future projects... I feel like my "accessibility" is a little lacking and perhaps needs a revisit.

I'll be sure to reference this whenever I work on a new project!

Thank you pikamart <3

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