Skip to content
Submitted about 2 years ago

testimonials-grid-section using html and css-grid

kehinde oyafemi•190
@kennyoyaf
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

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @kennyoyaf, great job on this project!

    Some suggestions to improve you code:

    • To make you CSS roots easier to deal with, you can give them custom names, like, "--background-color:, ""--text-color", etc...

    • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    Sources:

    https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

    https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    Happy Coding!

    Marked as helpful
    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @kennyoyaf, congratulations on your new solution!

    I’ve some suggestions for you:

    1.You need to include the title of your PAGE. Do that inserting in the <head> the tag <title> → <title>Testimonials Section - Front End Mentor</title>

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    3.You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0

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