Huddle landing page with a single introductory section using CSS/SASS

Solution retrospective
Hello, Mentor's I'd love to hear your feedback. Let me know what else I need to improve on this project. :D Thank you.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi there!
Here are a few ways you can do to improve this solution.
- Add alternative text to the logo. Logo is an important content of the page. It is not decorative, and not the one with blank alternative text (
alt=""
). Without that information, a screen reader user or a search engine will not know what the site/project is called. - For images containing text, make sure the alternative text includes the image's text. In this case, the Huddle logo should have an
alt
value of “Huddle”. Reference — Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text - 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 add any information and serve only aesthetic purposes.
- Add
rel="noopener"
to all links withtarget="_blank"
. It helps protect users of legacy browsers from security issues. Read more — Links to cross-origin destinations are unsafe - Download the necessary icons instead of importing the entire Font Awesome library to improve the website's performance.
- In your CSS, I notice this selector
footer .social-links
while that only needs to be.social-links
. Only nesting when you want to style pseudo-elements, pseudo-classes (:hover
,:focus
, etc), and@media
queries. This way, it can help you produce low-specificity CSS.
I wrote a blog post that helped developers to write Sass. It contains five code snippets. They can help you write media queries, convert
px
torem
, and much more.5 Handy Sass Code Snippets - CodeNewbie Community
I hope this helps. Happy coding!
Marked as helpful - Add alternative text to the logo. Logo is an important content of the page. It is not decorative, and not the one with blank alternative text (
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