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

@Mageshwari-Balaguru

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?

This layout took me around 6 hours. Next time will try to reduce the time. also try to use some CSS methodologies like BEM. I just recently come to know there were some methodologies is there which will make our code more readable, understandable.

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

In the flex container, .items-container the paragraph text which is in speech class was not occupy the whole size. i tried max-width to fit-content - won't work, so deleted that.

Community feedback

@Adebukol

Posted

your code uses semantic HTML effectively with elements like <main> and <footer>. The use of <h1> tags for the primary headings in each testimonial is appropriate, emphasizing the importance of the content. Improvements: Consider replacing some of the <div> elements with more semantic tags. For example, <section> could be used for each .items-container to better indicate that each section is a standalone block of content. 2. Accessibility Strengths: The alt attributes are correctly used for images, which is crucial for screen readers and improves accessibility. Improvements: The headings structure could be improved by ensuring there’s a logical flow from <h1> to <h2> (or further down if needed) for better accessibility. For instance, having multiple <h1> tags might not be ideal; consider using <h2> for subsequent headings. 3. Responsive Layout your code appears to be structured in a way that could be easily adapted for responsiveness, especially with the container and wrapper classes.

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