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

Responsive Page built with CSS Grid

P
John Davidsonβ€’ 210

@John-Davidson-8

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


What are you most proud of, and what would you do differently next time?

  • I am pleased with this project because I learnt the basics of CSS Grid and in particular Grid with media queries to create the collage for desktop.
  • Also, in the CSS I attempted to group classes and elements together in an attempt to write less code. I have a bad habit of repeating code in the CSS file unnecessarily. Not having I don't think any redundant code. Although, I may be wrong, when someone looks at it! lol.
  • What would I do differently? Maybe not use section element for each testimonial card.

What challenges did you encounter, and how did you overcome them?

  • CSS Grid takes time to get my head around. I think this is the third or fourth project in which I have attempted to use it. It does take time, but I think I am slowly getting to grips with it.
  • Organising HTML has always been a problem for me. I tend to overdo it with the divs and containers, however in this project I have calmed down a bit!!

What specific areas of your project would you like help with?

  • Organising my HTML and when to use semantic elements and which semantic element to use and when to use divs for styling purposes.
  • Naming classes appropriately is another issue I could do with help on. I attempt to make the class names as descriptive as possible.

Community feedback

P
Alperβ€’ 1,010

@adonmez04

Posted

This challenge is really hard... Make sure you solve it over and over again when play with some grid features. It'll be a milestone in your coding journey... Just a few quick tips:

  • You can use align-items: start; for your flex-avatar class to avoid stretching images. And you can set a min-height to keep your images viewable like img { min-height: 2rem } etc.
  • Have fun...
  • My comment here is done...
  • But you didn't give anything for the Grid features...
  • Flies away :)

Marked as helpful

0
MikDra1β€’ 5,010

@MikDra1

Posted

To make your classes the best of all I encourage you to learn about BEM methodology. Here is a VIDEO about it just for you.

Hope you found this comment helpful πŸ’—

Good job and keep going πŸ˜πŸ˜ŠπŸ˜‰

Marked as helpful

0

P
John Davidsonβ€’ 210

@John-Davidson-8

Posted

thanks @MikDra1πŸ‘

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