Skip to content
Submitted about 2 years ago

Testimonials grid using CSS Grid and Flexbox

Ikechukwu Kalu Amogu•240
@Aikaykalu17
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

Feedback would be appreciated

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @Aikaykalu17, congratulations on your new solution!

    I’ve some suggestions for you:

    Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with <main> or section, about the cards you can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Note that <div> is only a block element without meaning, prefer to use it for small blocks of content.

    This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

    👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Ikechukwu Kalu Amogu•240
    @Aikaykalu17Posted about 2 years ago

    @correlucas Thank you Went through your code and I'm like what's this? 😅 This Tech thing is way too vast I saw a lot of things I've not see my entire life in in your code I hope i get to your level someday 😢

    0
  • Adriano•38,060
    @AdrianoEscarabotePosted about 2 years ago

    Hi Ikechukwu Kalu Amogu, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web , the screen readers.
    • to prevent the content from stretching too much at higher resolutions, we can define a max-width, and use a margin: 0 auto; to center the content.
    .container {
    max-width: 1440px;
    margin: 0 auto;
}

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
    Ikechukwu Kalu Amogu•240
    @Aikaykalu17Posted about 2 years ago

    @AdrianoEscarabote Thank you for your feedback What is a decorative image? And aria-hidden?

    0
    Adriano•38,060
    @AdrianoEscarabotePosted about 2 years ago

    @Aikaykalu17 decorative image is an image that only decorates the site, and has no meaning! aria-hidden is an attribute that hides the element so assistive technologies can't detect it!

    Marked as helpful
    0
    Ikechukwu Kalu Amogu•240
    @Aikaykalu17Posted about 2 years ago

    @AdrianoEscarabote Thank you In this project Which image is a decorative image?

    0
    Adriano•38,060
    @AdrianoEscarabotePosted about 2 years ago

    @Aikaykalu17 that: <img src="assets/images/NicePng_quotation-mark-png_843696.png" class="imgz">

    Marked as helpful
    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

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

    • To properly center your content to your page, you will want to add the following to your <Body> Element (this method uses CSS Grid):
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    • The purpose of the Main Element is to identify the main content off your page; It is not the container of you component. Inside the Main Element, you will want to create a new container and place your component inside that new container.

    • The only headings in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a Paragraph Element.

    • For the profile images Alt Tag Description, it should never* include the following keywords; “image”, “photo”., “picture” and any variation of them.

    • To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

    Code:

    <figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

    More Info:

    ARTICLE

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

    Happy Coding! 🍂🦃

    Marked as helpful
    0
    Ikechukwu Kalu Amogu•240
    @Aikaykalu17Posted about 2 years ago

    @vcarames for profile pictures alt What should i use? Leave it empty? Thank you for your feedback

    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