Testimonials Grid Section ( Flex-box Système Grid Bootstrap)
Design comparison
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
- @MelvinAguilarPosted 12 months ago
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,
profilemight not be the most descriptivealtattribute. It would be better to use the person's name in the testimonial for a more contextual and meaningfulaltattribute. 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 📘
-
To improve the semantics of your code you should use the
<figure>and<blockquote>tags to wrap the testimonials, with this, you will be able to encapsulate the author and the citation of the testimonial.You can read more about the
<figure>and<blockquote>tags with this two links:
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0@yousefnachatPosted 12 months ago@MelvinAguilar thanks for your help and your feedback
0 - Wrap the page's whole main content in the
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