Skip to content
Submitted almost 2 years ago

HTML & CSS Solution (CSS Grid)

Ryan Hemrick•290
@Ryan-Hemrick
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

This is my first proper CSS Grid project! I created an alternate stylesheet styles-v2.css that uses some different CSS Grid properties to achieve the same layout. This is also my first project using a mobile-first approach to writing CSS.

Quick question: is there a specific CSS property that can help normalize the way in which the text renders on a white background vs a dark background? It may be my specific Windows-Chrome setup, but the text looks thicker on the darker backgrounds.

Let me know if you have any feedback or advice!

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The profile image ⚠️ should also be inside the figcaption as the figure is referencing the testimonial not the image.
    • The names of each individual are headings ⚠️. So they should be wrapped in a heading element. Since they are all equal level of importance, the h2 heading will be the best choice.
    • The blockquote ⚠️ should also be inside the figure element.

    Here is a link to MDN that gives an example of how it should look like for quotations/testimonials:

    MDN Figure Element

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🎆🎊🪅

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord