Testimonial Grid Session

Community feedback

• 

  P

  Blake Lyons•300

  @blakelyonsPosted about 1 year ago

  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