Grid-section-css-responsive

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 📄:

  • The alt attribute of the images should have the name of the person, currently I think it was forgotten, but they all have the same name "Daniel Clifford".

  • Having two or more h1 tags in a webpage is not recommended because it can be confusing for search engines. Search engines use the h1 tag to determine the main topic of a page

  • Small 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

  ---

  

  Ahmet Kabacali•450

  @ahmetkabacaliPosted almost 2 years ago

  @MelvinAguilar

  Hi,  Ty for feedback. I've changed some things so what can I do to avoid the "Page must contain a first-level title" warning? Ty.

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @ahmetkabacali You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">Testimonials grid section</h1>

  Marked as helpful

  0

  

  Ahmet Kabacali•450

  @ahmetkabacaliPosted almost 2 years ago

  @MelvinAguilar

  When i reviewed your project i understood i should create a hidden <h1> header.

  Like this;

  <h1 class="sr-only">3-column preview card component</h1>

  Ty.

  0