This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: My solution
- Live Site URL: My live site URL
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
I learned how to use grid-template-areas and grid-area in real-life web development and I became a bit more comfortable with using Grid in my projects.
<div class="card card2">
<div class="profile">
<img src="images/image-jonathan.jpg" alt="Jonathan" />
<div class="profile_info">
<h3>Jonathan Walters</h3>
<p class="bio">Verified Graduate</p>
</div>
</div>
<div class="card_message">
<h1 class="description">
The team was very supportive and kept me motivated.
</h1>
<p class="info">
“ I started as a total newbie with virtually no coding skills. I now
work as a mobile engineer for a big company. This was one of the
best investments I’ve made in myself. ”
</p>
</div>
</div>
.wrapper {
max-width:80%;
padding:5rem 1.6rem;
padding-top:3rem;
display:grid;
gap:2rem;
grid-template-areas:
"card1"
"card2"
"card3"
"card4"
"card5";
place-self:center;
justify-content:center;
place-items:center;
}
I think I will continue with learning responsiveness with Kevin Powell's 'Conquering Responsive Layouts'-course. And after that I think i should try to become more comfortable with Javascript and try to learn things like api's or Npm.
-
Wes Bos's Grid course - This helped me learn the fundamentals of Grid and also some tricks and tips.
-
A complete guide to Grid - This is an amazing article which summarized the fundamentals of Grid and you can download their cheatsheet, which you can use when you forget how you do something in grid. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @purplehippo911
- Github - @purplehippo911
Thanks to @mrLuisFer and @catherineisonline for their solutions which inspired me and helped me with my some of my grid for this challenge.
Don't forget to check out their solutions here: -@mrLuisfer -@catherineisonline