Submitted 9 months ago

Social proof section using CSS grid and flexbox

joelsavio• 50

@joelsavio

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi Devs, I completed my 3rd FM challenge. In this project, I used CSS grid to built the layout unlike the previous projects. I learnt to add multiple background image and positioning them. The area that i think should improve on is using css selectors. I have one qn. can the 5 stars can be done without duplicating the code? and do check out my project. It is responsive too. TIA, Good luck with your project.

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 9 months ago

Hello there 👋. Good job on completing the challenge !

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

I believe the solution with the repeated images is correct, but you should leave the alt attribute empty for each one. Since the star icons are for decoration, and there are 15 images, screen readers will read "Image, Star" 15 times. The paragraph provides enough information about the number of stars. Personally, in this challenge, I used a pseudo-element ::before and placed the 5 stars as a background separated by commas.

I hope you find it useful! 😄

Happy coding!

Marked as helpful

joelsavio• 50

@joelsavio

Posted 9 months ago

Thank you @MelvinAguilar for you suggestions. I will try and implement them.

Please log in to post a comment

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