Huddle Landing Page Single Section with HTML and CSS

Community feedback

• 

  BrunoMoleta•700

  @brunomoleta

  Posted about 2 years ago

  Hey Kauã, I'm also from Brazil (Curitiba/PR).

  When you write in English next time, you can rely on Grammarly to correct your spelling errors ;)

  About the social media links on the bottom, I saw you used the <i> for the social media links:

        <footer>
          <div class="socials">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
          </div>
        </footer>
  

  Though, according to MDN, <i> it stands for The Idiomatic Text element. A french words in a text written in Portuguese, for example.

  And since these are hyperlinks to a page elsewhere on the web, I would recommend: <a> wrapped in a <li> inside an <ul<(instead of <div>).

  I also included svg to display the icons. The following snippet of code is what I did:

  <footer>
          <ul>
            <li>
              <a
                href="https://www.facebook.com/"
                target="_blank"
                class="a-social-media"
                aria-label=" Facebook Icon."
              >
                <svg
                  id="facebook"
                </svg>
              </a>
            </li>
            <li class="icon">
              <a
                aria-label="Instagram Icon."
                href="https://www.instagram.com/"
                target="_blank"
                class="a-social-media"
              >
                <svg>
                  <path>
                </svg>
              </a>
            </li>
            <li>
              <a
                aria-label=" Twitter Icon."
                href="https://twitter.com/"
                target="_blank"
                class="a-social-media"
              >
                <svg>
                  <path>
                </svg>
              </a>
            </li>
          </ul>
  </footer>
  
  

  Further, the aria-label inside the <a> is for the screen-reader accessibility, something you said on Github that you would like to improve.

  And hey, you've worked hard congrats on that.

  I see you have already done quite a few challenges around here. I suggest that you do a few project reviews for other folks. A person can learn a lot by giving feedback on someone else's code.

  Boa sorte :)

  11

  Marked as helpful