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

Testimonials Grid Section ( Flex-box Système Grid Bootstrap)

@yousefnachat

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


Hello everyone,

I'm excited to share the solution to the "Testimonials Grid Section" challenge that I've been working on. I tackled this project using a combination of HTML, CSS, and the Bootstrap framework, leveraging both the Grid system and flexbox to achieve the desired layout. It was quite a challenging task, but it provided an excellent opportunity to practice and enhance my skills.

This project wasn't a walk in the park, but the complexities posed by the design and the responsive requirements were a fantastic learning experience. The combination of HTML for structuring the content, CSS for styling, and Bootstrap for layout responsiveness allowed me to create a testimonials grid section that closely aligns with the provided design files.

If you have any feedback or suggestions, I'd love to hear them. Additionally, if you're facing any challenges or have questions about the project, feel free to reach out for assistance. I believe that sharing our experiences and learning from each other is a valuable part of the coding journey.

Thank you, and looking forward to any insights or discussions!

Youssef

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.
  • For the testimonial images, profile might not be the most descriptive alt attribute. It would be better to use the person's name in the testimonial for a more contextual and meaningful alt attribute. e.g. alt="Daniel Clifford"
  • Always avoid skipping heading levels. Starting with <h1> and progressing through the heading levels (<h2>, <h3>, etc.) ensures that your document maintains a clear and consistent hierarchy. Source 📘

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

0

@yousefnachat

Posted

@MelvinAguilar thanks for your help and your feedback

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