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

Html css and bootstrap solution of huddle landing page

@faiyaz-rahman13


Design comparison


SolutionDesign

Solution retrospective


Do let me know how the website looks, how much responsive it is, and how can I make it look more good and make it more responsive. I would like to know you're opinion and I would love it if you point out my mistakes and help me develop my skills. thank you 😊😊

Community feedback

@pikapikamart

Posted

Hey, good work on this another challenge. The layout in desktop seems fine as well as the mobile state. Responsiveness is fine as well.

Some suggestions would be:

  • header image could have used alt="huddle as its value and not alt="logo". Also, avoid adding words to the alt attribute, that relates to the word "graphic".
  • Adding min-height: 100vh to the body tag, so that when you resize the browser's screen, the background-image will still occupy the whole height of the screen, if you try to resize the screen's width, you will see that the image does not fill up the height.
  • The main img could have used only alt="" empty, because the image is just a vector illustration and does not really add content.
  • Removing the position: absolute on the .icons selector will be really good. Right now, if you inspect the layout in dev tools at the bottom, you will see that the .icon element is overlapping the text in the main tag. Removing the position will be good.
  • The social media link should have an aria-label. It would be like <a aria-label="facebook">{ the i tag i inside here}</a>. This will be really helpful for screen reader users, because they will be guided to where this link would take them, hence, facebook. Add those aria-label to the three different social media link.
  • You don't need to add aria-hidden in the i tag, I think? I don't know if aria-hidden is used in elements other than svg or img. Hmm

Aside from those, great job. Your html structuring as well is good and that is great.

Marked as helpful

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