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 Using CSS & HTML

Andrew 90

@L1m1tz


Design comparison


SolutionDesign

Solution retrospective


The placement of the background image still needs some work, if anyone has tips on that or anything I need to improve please feel free to comment

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

Hello, Andrew! 👋

Good effort on this challenge! 👍

Regarding the background image, on the desktop layout, I set the background-position: center right and I think it looks similar to the design.

Some suggestions to improve this solution.

  • I would recommend using the logo.svg instead of creating the logo by yourself. With the existing logo, all you have to is to put the logo using img tag and add an alternative text like Huddle.
  • Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
  • Not all images need alternative text. In this case, the illustration doesn't need alternative text so I would recommend leaving the alt="" so that screen reader users won't have to listen to unrelated content.
  • Each social media icon should be wrapped by link element and I would recommend removing the <ion-icon name="logo-facebook"></ion-icon> tag since the site is not using Ionicons.

I hope you find this information beneficial. Happy coding! 😄

Marked as helpful

2

Andrew 90

@L1m1tz

Posted

@vanzasetia Thank you very much, for the tips. Done the changes, but the image is still not as accurate as i needs it to be but this will suffice. Thank you again

0
Vanza Setia 27,855

@vanzasetia

Posted

@L1m1tz You're welcome! 👍

0

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