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 a single introductory section

Omar 560

@to-my-learning-path


Design comparison


SolutionDesign

Solution retrospective


  • What did you find difficult while building the project? Deciding if I should make the main div have a width or not. I notice around 1024px the right margin starts to disappear

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Omar, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

  • The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=”true” to be ignored by screen readers and to avoid redundancy and repetition.

I noticed that once the max-width is activated, the content starts to go to the side, we can fix it like this:

.wrapper {
    margin: 0 auto;
    max-width: 1320px;
    padding: 0 2rem;
}

The rest is great!

I hope it helps... 👍

2
T
Grace 29,310

@grace-snow

Posted

A few html issues on this but pretty minor really

  • the logo is really important content so should have alt text and not be hidden
  • the social links should not be labelled as "follow me on...". Just put the name of the site like "Twitter" on its own. That's where the link goes and that's what people know the icon as. That's what a voice control user would say, they wouldn't say "Click follow me on Twitter"

One thing in css, again small - try not to use overly specific css selectors. For example instead of header a img just put a class on the image you want to style. This will become extremely valuable on big projects and you're fighting complex css selectors

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