Testimonials responsive grid section

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, great work on this one! Design is almost pixel perfect and responsive. To your question I'd say why not both ^^ Clean and maintainable code is always prefered but that can still be achievable by respecting the design. Putting accessibility, responsiveness etc. aside since they're a must in production, main task would be to get close to the design. Though there may be edge cases like using justify-content: space-between and almost getting the same result but one element is off by a few pixels. That might be a design choice for better user experience or a small error that wasn't intended. I believe in this sort of cases if you're not sure which, best option would be to simply communicate with the designer because we may get different answers.

  For example in this challenge, there is a slight difference between column and row gap that's not noticable at first sight but is still there and I think that's done for design purposes. In this case instead of using just gap, separating column and row would be convenient approach to respect the design. Opinions might differ but this is my take on the matter ^^ Regarding your solution you can lower the gap a bit to make it pixel perfect but nothing else I'd suggest, excellent solution and happy coding :)

  Marked as helpful

  0

  ---

  

  achrustowski•150

  @achrustowskiPosted about 2 years ago

  @ErayBarslan thank you !

  It's always good to have feedback from fellow coders. I was scratching my head trying to figure out why is my solution not matching the size of the design. I attempted to fix that using padding-block on my main container, but the solution is indeed the gap property.

  Best :)

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello @achrustowski, congratulations for your new solution!

  Your solution seems already really good. Something you must having in mind when showcasing your skills is to have your code with a good semantic, for the big blocks of element don't use divs since they dont have a meaning, choose other tags thst describe the content.

  for example the main div the wrap the cards you can replace the <div> that wraps each card with <article> and the paragraph with the quote with the property tag <blockquote> this way you'll wrap each block of element with the best tag in this situation.

  Other stuff you should think is having a clean code and avoiding the use o unnecessary divs.

  Hope this helps, happy coding!

  Marked as helpful

  0
• 

  achrustowski•150

  @achrustowskiPosted about 2 years ago

  Hi @correlucas,

  Thanks very much for your feedback. I indeed have been using semantic elements in my previous solutions, but then what I would get is accessibility issues.. not sure why.

  Any idea why when I use semantic elements I'm getting accessibility issues?

  Cheers, Adam

  0

  ---

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @achrustowski often happens common error because people forget to add one h1 heading and a <main> even if sometimes the challenge is a component. To avoid this errors these two tags are needed.

  Marked as helpful

  0

  

  achrustowski•150

  @achrustowskiPosted about 2 years ago

  @correlucas cheers again! I'll keep that in mind for future challenges :)

  0