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

Testimonials-grid-section

#accessibility#contentful

@Coderio10

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


Here is my solution to the challenge

Community feedback

Account Deleted

I have some recommendation to your code

for best practices

  • always used fontSize: 16px; in the <p></p> since that is the standard size for paragraph if ever you did not used the 16px and some users went to your website it will be hard for them to navigate your website especially some users have a natural blurred vision.

  • the standard size for headings (h1 - h6) is 18px - 30px but it depends to the design template you're currently following but the size I mention. that is the standard size for headings.

  • for the name of testimonials never used h1 always used <span></span> when it comes to the name of a person the h1 - h6 are used only for the title of a paragraph example below

<h1>Title of a paragraph</h1>
<p>this is an a paragraph(story or messages)</p>
  • I noticed to your body {} CSS you used flexbox but you set the flex-direction to row instead column in the large display the <main> & <div class="attribution"> will become horizontal so much better used flex-direction: column
body {
==> change this
    flex-direction: row;
}
  • in the main {} CSS much better used max-width: 900px rather than 80% because if you used 80% in the max-width in the large display it will make your layout not good looking
main {
==> change this
   max-width: 80%;
}
0

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