Skip to content
Submitted over 3 years ago

Huddle single introduction

Franco A.•200
@franco-a
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey! First time using font awesome so I'd like some feedback if I used it correctly. The background svg was annoying to set up and I'm not sure how to align it perfectly like in the design, if anyone knows then I'd highly appreciate it if you could share your knowledge!

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Franco A! 👋

    Congrats on finishing another challenge! Your solution responds well and looks good. In addition to Matt feedback i would suggest you to take a look at IcoMoon. I am using this myself for icons and it is good tool. IcoMoon provides many free icon packs (fontawesome included) and you can pick only that icons that you're interested in. You can also import your own icons (we've icons in design files) and then use them. Read about IcoMoon. Watch how to use them in your project.

    Good luck with that, have fun coding! 💪

    1
    Franco A.•200
    @franco-aPosted over 3 years ago

    Hey @tediko , thanks for the feedback, I'll be looking in to that!

    0
  • Matt Studdert•13,611
    @mattstuddertPosted over 3 years ago

    Hey Franco, nice work on this project! Your use of Font Awesome is fine, but your implementation currently means that the social icons are inaccessible to screen reader software. Anchor tags need to either have text inside them or an aria-label attribute on them to be able to be read by screen readers software. For social icons like this, I use aria-label. This would mean your anchor tags would look like this:

    <a href="https://www.facebook.com" target="_blank" aria-label="Follow us on Facebook"><i class="fab fa-facebook-f"></i></a>

    You also don't need the div inside the anchor tag. Just style the anchor tag directly. I'd also add the company name inside the alt attribute of the logo. This makes the logo accessible to screen reader users.

    I hope that helps. Keep up the great work!

    1
    Franco A.•200
    @franco-aPosted over 3 years ago

    Hey @mattstuddert , thanks for the feedback. I was wondering how to make the social links accessible so this really helped. Thanks for creating this great site btw!

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 3 years ago

    @franco-a, you're welcome! Glad I could help, and I'm happy you're enjoying the site! 🙂

    1

Please log in to post a comment

Log in with GitHub

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