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

Testimonial grid section

Abimbola 170

@Abimzz

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 thoroughly enjoyed the challenge of this project and appreciated the opportunity to dive deeper into CSS Grid. It allowed me to enhance my skills and explore new techniques in layout design.

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

  1. Syntax Selection

    • One of the main challenges I encountered was deciding which syntax to use in various situations. With multiple ways to implement CSS Grid, it was sometimes tricky to determine the best approach for the layout I envisioned. I found that taking the time to experiment with different methods helped clarify my understanding, but it added some complexity to the coding process.
  2. Font Size Adjustments

    • I experienced a bit of stress while working with font sizes. Initially, I struggled to achieve the desired visual hierarchy and readability. However, through trial and error, I was able to find a solution that worked well for the design. This experience taught me the importance of patience and flexibility when adjusting styles.

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

Overall, while I believe the code isn't the most streamlined I've written, it is functional and meets the project requirements. I recognize that there are areas for improvement, particularly in optimizing the code for better readability and efficiency. i would really appreciate any suggestions that could help me improve my code.

Community feedback

MikDra1 6,050

@MikDra1

Posted

Nice one 😀,

Here are some things to review:

  • Consolidate Media Queries: Combine similar media queries for .card-1, .card-4, and .card-5 to reduce redundancy.

  • Use CSS Variables for Spacing: Replace hardcoded values like padding, margin, and gap with CSS variables for consistency.

  • Reduce Repetition: Combine styles for cards that share properties (e.g., .card-1, .card-2, .card-4) into a common class.

  • Minify Font Imports: Import only the necessary font weights to reduce loading time.

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Marked as helpful

1

@TedJenkler

Posted

Hi @Abimzz,

Nice project! Here are some suggestions for improvement:

Consider adding semantic HTML elements to your project. For example, you could use <article> or <section> tags for your cards, which would enhance accessibility.

Try to minimize the use of <div> elements. When you do use them, add aria-label="describe it" to help screen readers and improve search engine optimization.

Hope these tips help!

Best, Teodor

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