Huddle landing page with a single introductory section using HTML+CSS
Design comparison
Solution retrospective
what icon set used in the design? I didn't find the icons in the design picture from 3 icon sets given in the style guide file, also any feedback would be really great, thank you!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi! 👋
Congratulations on finishing this challenge! 🎉
The style guide tells you to get the social media icons from either of those three resources.
I recommend only downloading the necessary social media icons instead of importing the whole Ionicons. It makes the site load faster.
Some suggestions from me.
- Alternative text for the logo should not be "logo". It should be the name of the site, "Huddle".
- Not every image needs alternative text. Decorative images should not have alternative text (
alt=""
). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page. - For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
button
element must always havetype
attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons- Each of the social media icons should be wrapped with an anchor tag. They are the social media links of the company.
- Add
rel="noopener"
to all links that havetarget="_blank"
. It helps protect users of legacy browsers from security issues. - Use
em
unit for media queries. It adapts when the users change their font size setting. - Never limit the height of the
body
element. It should always fill the entire page. Setmin-height: 100vh
instead if you need to set a height to it.
I hope this helps. Happy coding!
1@fsuropatyPosted almost 2 years ago@vanzasetia thank you for your feedback, really appreciate it
edit : already update the code to implement the suggestions, thank you so much
1
Please log in to post a comment
Log in with GitHubJoin 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