@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:
- 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. - 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!