Social-proof-section

Solution retrospective
Hi, I'm pretty new programming and this was my 4th challenge. I would love to hear any kind of feedback! Please let me know whatever you find to improve my codes! I had fun building this so will continue to work on other challenges. Thanks everyone!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi, I'm afraid there are a lot of issues with the way you've gone about this.
One point to note is every one of those star images should have
alt="" aria-hidden="true"
so that screenreaders don't read out "image, star, image, star, image, star..." etcAs for the rest, take a look at these quick changes I just made in the browser to improve the desktop version. Apply each one by one and watch what happens, hopefully it will help you understand where you can make improvements:
/* main.css | https://social-proof-section-zeta-flax.vercel.app/css/main.css */ .headline { /* padding: 7.8rem 3rem 3rem 10.5rem; */ } .ratings { /* padding-top: 8.8rem; */ /* padding-left: 2rem; */ } .reviews { /* padding-left: 10.3rem; */ /* padding-top: 1.8rem; */ align-items: flex-start; } .ratings ul li { /* width: 65%; */ width: calc(100% - 6rem); } #container { /* grid-template-rows: 50% 50%; */ /* grid-template-columns: 50% 50%; */ /* width: 100%; */ /* height: 100vh; */ grid-template-rows: auto; grid-template-columns: 1fr 1fr; padding: 2rem; max-width: 1440px; gap: 3rem 1rem; } .review-box { /* width: 28.3%; */ /* height: 65%; */ float: ; flex: 1 1 33%; } .review-box:nth-of-type(3) { margin-right: 0; } body { display: grid; place-content: center; height: ; min-height: 100vh; }
Good luck
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