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 Huddle landing page with a single introductory section

Darkoā€¢ 460

@Darko96


Design comparison


SolutionDesign

Solution retrospective


Any feedback and suggestions on how I can improve are very welcome! šŸ˜Š Thanks

Community feedback

T
Chamuā€¢ 13,130

@ChamuMutezva

Posted

Greetings Darko

So far so good, well done.

  • The design looks good and is generally responsive. But the breakpoint , in my opinion kicked in too late (at 1297px).
  • alt values for the img elements should be descriptive for the benefit of assistive technology users. Alt values should carry the message that is in the image. The idea here is not just to tell the user that there is an image ( that is done automatically by assistive technology), alt values like alt="Logo image" , alt="Desktop and mobile window image" does not help assistive technology users. If the image is decorative , then use alt=""
  • the footer list images are supposed to be links to social media accounts, they are not just images.
1

Darkoā€¢ 460

@Darko96

Posted

@ChamuMutezva Thank you so much for a feedback.

  • Where would you put breakpoint? I don't have experiance with media queries so i didn't know where to put it.

  • So I shouldn't put any text in alt if I have images like these.

  • That is what I did in a first place but I got error from frontend mentor software. It says that I have to have text in a tag. So I don't know if I should just ignore that error or there is better way to do it.

0
T
Chamuā€¢ 13,130

@ChamuMutezva

Posted

@Darko96 , take a mobile first approach when styling . That means your first styles will cater for mobile/small devices. Let the content decide where to put your breakpoints, when the content starts to become weird in presentation , some large white spaces - that is when you should consider a breakpoint. Instead of max-width , mobile first approach requires the use of min-width. A good resource that i can recommend is conquering responsive layouts.

  • to be clear , all images should have an alt value. Decorative images like the illustration in challenge can have an alt="" , whilst the rest should have a descriptive message . The logo can have a message that tells the user of the company , eg something like alt="Welcome to huddle international - specialist in community building" - an assistive technology user can be able to make a judgement if the site with focus is the correct one.
1
T
Chamuā€¢ 13,130

@ChamuMutezva

Posted

@Darko96 , take a mobile first approach when styling . That means your first styles will cater for mobile/small devices. Let the content decide where to put your breakpoints, when the content starts to become weird in presentation , some large white spaces - that is when you should consider a breakpoint. Instead of max-width , mobile first approach requires the use of min-width. A good resource that i can recommend is conquering responsive layouts.

  • to be clear , all images should have an alt value. Decorative images like the illustration in challenge can have an alt="" , whilst the rest should have a descriptive message . The logo can have a message that tells the user of the company , eg something like alt="Welcome to huddle international - specialist in community building" - an assistive technology user can be able to make a judgement if the site with focus is the correct one.
1
Darkoā€¢ 460

@Darko96

Posted

@ChamuMutezva Thank you so much for an advice.

I'll watch that course about responsive design and I understand why I should first style for small devices. More and more poeple use smart phones :)

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