Mobile first Flexbox & CSS Grid

Community feedback

• 

  P

  Eli Silk•720

  @elisilkPosted 4 months ago

  Hi 👋 Dan,

  Great solution. Like your product preview card component solution, this one matches the design super well, despite not having access to the design file. 👏

  I thought the use of the nth-child selectors to have the different testimonials span different parts of the grid was a very elegant solution. 👍

  Like I suggested for the product preview card solution, one method that helps to compare you solution with the design is to install a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other 🔎, and then make adjustments as needed.

  I also think you might consider implementing the quotation marks for the violet testimonial as a background image rather than part of the HTML markup. I see the image in this design as purely decorative and not part of the content of the webpage. Something to consider 🤔.

  https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images

  Happy coding. 💻

  Eli

  Marked as helpful

  1

  ---

  

  P

  Dan Marius•1,025

  @danmlarsenPosted 4 months ago

  @elisilk Thank you for reviewing my solution, and for the suggestions! 👏

  PixelParallel was a great suggestion. I haven't tried that extension before. I agree on the quotation marks used as a background image is probably the way to go as well 👍

  Happy coding. 💻

  Dan

  0