Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS grid layout

@CelineJames

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am proud of the fact that i am getting comfortable using CSS grid. i am really proud of that, i tried using the mobile first design technique and i prefer that next time i would try to make use of Sass technique.

What challenges did you encounter, and how did you overcome them?

Nothing much.

What specific areas of your project would you like help with?

well, i am still learning and practicing my efficiency with grid layout.

Community feedback

Darkstar 1,000

@DarkstarXDD

Posted

Looks nice. Some feedback.

  • Heading levels should go in order. If you used a h3 for the name, you shouldn't be using a h1 for the testimonial text that comes after the name.
  • You should not have multiple h1 elements in a web page. h1 is usually the top most heading that describes the content of the page. In this design you actually don't have a h1. But you can create a visually-hidden element and give that a h1 if you want.
  • Looking at how you have used the heading levels, i feel like you are deciding the heading level based on how they are styled in the design. You should not be doing that. You should decide what elements to use based on their semantic meanings. Not styles. After that you can use CSS to style the headings however you want.
  • I would use a h2 for each name and then use <p> elements for the testimonial text. I would also wrap the testimonial <p> elements in a <blockquote> element.
  • I think it would be better if you give the container a max-width in rem, so that the grid items doesn't keep increasing in size on larger screens.
  • It's better to use rem for font-sizes, media queries and max-width. If the user changes their browser font size, text in your site won't respect that if the font-sizes are defined in px. If you have them in rem, the text will scale accordingly with the user's preferred font size. I usually use rem for all values, not only fonts. But it's just preference.

Marked as helpful

0

@CelineJames

Posted

thanks, i will see to this changes@DarkstarXDD

1

Please log in to post a comment

Log in with GitHub
Discord logo

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