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

Testimonial Grid Session

@Jujujulex

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P

@blakelyons

Posted

Overall, it looks great to the design. The only thing I would critique is the shadows are a bit harder than the design, and the spacing seems a bit narrow compared to the design. I think it does well with a little more room to "breathe".

The only other suggestion I might add for the UI part is to have a breakpoint for both tablet and mobile. It gets a bit weird between those breakpoints.

Your code looks relatively clean. There are a few suggestions I might add that might better apply to "real world" situations:

  1. Each of the "box" elements I think could be treated as an "article". So the use of the <article> tag might help in this case.
  2. Your classnames are way to specific. You could shave your entire stylesheet down a fraction of what you currently have. You're almost treating classes like ID's. For example:

You have your HTML for the parent container and the tow "rows" like this:

<div class="container">
    <div class="daniel-jonathan">
        //....
    </div>
    <div class="harmon-patrick">
        //....
    </div>
</div>

Inside those you have elements very specific to the "people" featured in the article. This is essentially making your classes unique, like and id. You're classname .container works great, because this is exactly what it is, a container that can be used multiple times...generically.

I would recommend the more generic approach when using classnames such as:

<div class="container">
   <div class="container__row">
       <article class="article article--2-fr">
          <div class="author">
              <figure>
                  <img src="#" />
                  <figcaption>
                      <h2 class="name">Jeanette Harmon</h2>
                      <p class="title">Verified Graduate</p>
                  </figcaption>
              </figure>
          </div>
          <div class="detail">
              //... <p></p>
          </div>
      </article>
      <article class="article--2-fr">
           //...
      </article>
  </div>
</div>

Just my 2 cents... Keep coding my friend!

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