Skip to content
Submitted 3 months ago

Responsive Page built with CSS Grid

John Davidson•210
@John-Davidson-8
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

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

  • Alper•1,010
    @adonmez04Posted 3 months ago

    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•6,980
    @MikDra1Posted 3 months ago

    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
    John Davidson•210
    @John-Davidson-8Posted 3 months ago

    thanks @MikDra1👍

    0

Please log in to post a comment

Log in with GitHub

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