Submitted almost 2 years ago

Responsive Social proof section

Chris Jay•220

@chrisjay358

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I would like it if my code can be reviewed and feedback is gotten. Lemme know what and how I could have approached a clean code. Thank you

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted almost 2 years ago
Hi, Chris Jay! 👋

Here are some possible improvements.

Leave the alternative text empty for all the star icons (alt=""). Those are decorative images.

For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

Wrap the quote with <p> element. <blockquote> should have a <p> as a child element. Reference: hail2u/html-best-practices: For writing maintainable and scalable HTML documents #use-appropriate-element-in-blockquote-element

Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

Grace Snow's comment on changing <html> font size

The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

Set a min-height instead of a height on the <body> element.

For your next project, I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

I hope you find this useful. 🙂
Marked as helpful
0
Chris Jay•220
@chrisjay358Posted almost 2 years ago
@vanzasetia Thank you Vanza for taking the time to review my code

For the alt I put a text there because of validation, I wanted to add the aria-label="presentation" , but I didn't anymore. Thanks for calling my attention to it.

I didn't know that <blockquote>, I'll incorporate that from now on. I will also take my time on the resource you linked me to, I appreciate it, thank you.

I know about the <HTML> font size thing, however, it makes calculations easy and I am trying to rid away bad habits. someone here some time ago told me about it, I would stop using it soon.

For the min-height I thought I did, however, guess I removed it along the way, thanks for calling that to my attention.

Thank you Vanza Setia once again for taking rime to help me correct my code to best practices, i appreciate it, i really do.
0
Vanza Setia•27,775
@vanzasetiaPosted almost 2 years ago
@chrisjay358

<img> element must have alt attribute. So, if there is no alt attribute then the validation will tell you to add alt attribute. But, you just need to add the attribute. It does not necessarily mean you need to also add value.

Now, about aria-label="presentation", you should not do this. Screen readers will pronounce the image as "Presentation, image." which is not needed. More importantly, <img> has alt attribute to give it an accessible name. So, don't use aria-label on <img>.

You are welcome! 👍
0

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