Responsive landing page with mobile first and using css grid

Community feedback

• 

  Yemisrach•1,430

  @Yemisrach15Posted over 1 year ago

  Hi Alfred, your solution is really good to be honest. You've used semantic HTML and the class names are also good. A few suggestions I can give you,

  • It needs some tweaking. Try to adjust the margins, padding, ...etc for different screen sizes so that it looks similar to the design. Use the mobile-first workflow.
  • For images, you should have an alternative text in the alt attribute. For instance, for the logo, it could be

  <img src="images/logo.svg" alt="Huddle Company" class="logo">
  

  or such descriptive phrase. If the image is for decoration only though, you don't need to have an alt text.

  • The .call-out can be improved like the below snippet.

  *html*
  <div class="call--out">
      <h2 class="call-out-heading">ready to build your community</h2>
      <a href="#" class="btn btn--primary">get started for free</a>
  </div>
  
  *css*
  .call-out {
      /* other styles you had */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  
  .call-out-heading {
      /* other styles you had */
      text-align: center;
  }
  

  Notice that I removed the .call-out__header div since it doesn't have any use and is only cluttering the document.

  0