Skip to content
Submitted 2 months ago

Testimonials Grid Section Solution

#sass/scss
vladyslav-shulhach•170
@vladyslav-shulhach
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'm proud of how I created a grid layout, especially on the desktop version using grid-area. Next time, I will plan the grid structure more thoroughly at the beginning so that I don't need to make as many adjustments later. This will make the process run more smoothly and efficiently.

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

After I learnt how to use grid-area, I didn't face many problems during development. The overall development and ensuring to make it more matched according to the design I think was the most difficult part, but once I realised that more frequent practice makes it even easier for me to develop projects next time. I took it step by step and focused on learning, which helped me stay on track.

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

I'd like to learn more and explore the use of SCSS to manage complex network layouts, as well as learn about alternative approaches to improving responsiveness and scalability in HTML.

Community feedback

  • P
    Rahexx•900
    @RahexxPosted 2 months ago

    Code Review Feedback

    Great job with this challenge! You’re very close to matching the design, and your work shows great attention to detail. Here’s my feedback:

    HTML

    1. Your alt attributes are well-written and provide clear information—great work!
    2. Good use of the blockquote tag; it’s semantically appropriate and adds to the structure of your HTML.
    3. Excellent implementation of the BEM methodology. It makes your code modular and easier to maintain.

    CSS

    1. Your use of variables is clear and readable.
      • In larger projects, consider importing your variables into a separate file for better organization and scalability. However, for this project, keeping them in the same file is perfectly fine.
    2. There are quite a few comments in your CSS. While this doesn’t affect readability, consider reducing them in future projects if they’re not essential. Use comments sparingly to highlight complex logic or areas that might require additional context.

    Overall

    You’ve done an excellent job on this challenge. The structure is clean, and your approach demonstrates solid progress. Keep up the great work—you should be proud of your achievements!

    Marked as helpful
    1
    vladyslav-shulhach•170
    @vladyslav-shulhachPosted 2 months ago

    @Rahexx Thank you for the thoughtful feedback. I’ll keep your tips about separating style files for larger projects and using comments more sparingly in mind for the future.

    1
  • P
    LuRouFan•130
    @angel-retryPosted 2 months ago

    Your implementation of the page is 99.9% similar to the design draft, which is fantastic! I use a different method for grid layout, and I find your approach much more readable. I used numbers to set grid-area, but after seeing your method, I prefer yours!

    Wishing you smooth and happy development!

    1
    vladyslav-shulhach•170
    @vladyslav-shulhachPosted 2 months ago

    @angel-retry Thank you very much!

    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