testimonials-grid-section-main

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • It is generally not recommended to use multiple <h1> tags on a single web page because the <h1> tag is used to mark the most important heading on a web page and it is considered the top-level heading in the document outline. It should be used only once on the page, typically for the title or main heading of the page.

    You can read more about this here 📘.

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  • Tip: To improve the semantics of your code you should use the <figure> and <blockquote> tags to wrap the testimonials, with this, you will be able to encapsulate the author and the citation of the testimonial.

    Example:

    <figure>
       <blockquote>
          <p>"Example of a testimonial"</p>
       </blockquote>
       <figcaption>
          <p>Example of the author</p>
       </figcaption>
    </figure>
    

    You can read more about the <figure> and <blockquote> tags with this two links:

    1. Quotations, Citations, and Blockquotes | CSS-Tricks
    2. Quotations | MDN Web docs

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Red1•70

  @duckit69Posted almost 2 years ago

  @MelvinAguilar thank you i'll try to include the figure and blockquote tags more in my project for better semantics

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Give the main a fixed width value in the media query and max-width value in the mobile design for a responsive content. width: 1100px max-width: 400px/25rem. And center the main on the page.

  To center the main on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center the main on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center the main on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Marked as helpful

  0

  ---

  

  Red1•70

  @duckit69Posted almost 2 years ago

  @Hassiai my grid container is bigger than the main tag when i make my body flex and try to center it nothing happen

  0