Huddle landing page with curved sections

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, there!

  Here are some recommendations for improvements.

  • For the logo, use the logo image instead of using a message icon and a <h2>.
  • Remove the <div> element from the <div class="free"><a href="#">Try it free</a></div>. Style directly the <a> instead.
  • Make "Build The Community Your Fans Will Loveas<h1>. The rule to follow is to start using heading tags from <h1>to<h6>`. Don’t skip heading levels.
  • Dive deeper — How-to: Accessible heading structure - The A11Y Project
  • 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.
  • Use a list element for the statistic instead of using <div class="stats">.
  • The statistic number and the statistic description are not headings.
  • Wrap each social media link with an anchor tag. Then, use aria-label to the <a> to give an accessible name to each link.
  • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
  • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
  • For media queries, I recommend only using min-width media queries. This is known as the mobile-first approach. This approach often results in smaller CSS. As a result, the website loads faster.
  • Also, keep your media queries simple. You don't need to use and keyword.

  I have three recommended videos. The first one tells the truth about HTML. HTML is hard. The other two talk about modern CSS techniques and approaches that can eliminate many media queries.

  Manuel Matuzović - Lost in Translation - YouTube

  Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

  Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  preetam varun•340

  @preetamvarunPosted almost 2 years ago

  @vanzasetia Thanks for your valuable feedback 😊

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @preetamvarun

  You are welcome! 😄

  Marked as helpful

  0