Huddle landing page

Community feedback

• 

  BrunoMoleta•700

  @brunomoletaPosted over 1 year ago

  Hello Michael,

  The HTML semantics may improved.

  One should favor semantic elements instead of div, for according to MDN, it's an " HTML element is the generic container for flow content." It's more about layout.

  For example, it would be valuable to wrap this part of your code in a <section>:

  <section>
     <img class="img-logo" src="images/logo.svg" alt="Huddle">
      <img class="img-mockups"src="images/illustration-mockups.svg" alt="Mockup Ilustrations">  
      
      <div class="register-div">
        <h1>Build The Community Your Fans Will Love</h1>
        
        <p>
          Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
          Create connections with your users as you engage in genuine discussion. 
        </p>
        
  
        <button class="btn-register">Register</button>
      </div>
  </section>
  

  Notice I updated the alt for this element: "fallback (alternate) text to display when the image specified by the <img> element is not loaded."

  And to convey more semantical meaning, I suggest you wrap your social media icons with <footer and <ul> like this:

      <footer>
        <ul>
          <li>
            <a>
              <svg>
              </svg>
            </a>
          </li>
          <li>
              <svg>
              </svg>
            </a>
          </li>
          <li>
            <a
            >
              <svg
              </svg>
            </a>
          </li>
        </ul>
      </footer>
  

  Notice that the social media icons connect the user to a website, so it's necessary to wrap a <a> for this to happen.

  I suggest you look at other people's solutions, especially those who scored 1000 plus points.

  Best regards from Curitiba, Brazil 🇧🇷

  Marked as helpful

  0