Submitted almost 2 years ago

Testimonials grid using CSS Grid and Flexbox

Ikechukwu Kalu Amogu• 240

@Aikaykalu17

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feedback would be appreciated

Community feedback

Lucas 👾• 104,440

@correlucas

Posted almost 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

Ikechukwu Kalu Amogu• 240

@Aikaykalu17

Posted almost 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 😢

Adriano• 34,090

@AdrianoEscarabote

Posted almost 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

Ikechukwu Kalu Amogu• 240

@Aikaykalu17

Posted almost 2 years ago

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

Adriano• 34,090

@AdrianoEscarabote

Posted almost 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

Ikechukwu Kalu Amogu• 240

@Aikaykalu17

Posted almost 2 years ago

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

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

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

Marked as helpful

バレンタイン 😈• 64,190

@VCarames

Posted almost 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

Ikechukwu Kalu Amogu• 240

@Aikaykalu17

Posted almost 2 years ago

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

Please log in to post a comment

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