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

Social - proof - section - project

#accessibility#animation
Zdravkoโ€ข 350

@Zdravko93

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Another special attention given to this project, with few additional features/animations. Just to make it a bit more attractive and appealing whilst reinforcing what I learned so far. As always, every additional task/feature suggestion would be taken into account. Thanks again in advance for all the feedback.

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hello, Zdravko! ๐Ÿ‘‹

Good job on this challenge! ๐Ÿ‘

A couple of things I suggest are,

  • Setting the alt text for the star icons to be an empty string so that they will be ignored by screen readers. Thatโ€™s because those elements aren't so necessary or important to the content of the page and as a result doesnโ€™t need to be read by screen readers (which can be annoying for users if screen readers are reading out the alt text for every single star). ๐Ÿ˜…
  • Adding overflow-x: hidden to the body to prevent any unwanted horizontal scrolling on the page.
  • I think adding the decorative background images with CSS background images to the body of the page will do (there's no need to add extra divs for those images). You can simply add both of them to the body of the page. See this helpful article for how to use multiple CSS background images:

Hope you find these suggestions helpful. ๐Ÿ˜Š

Keep coding (and happy coding, too)! ๐Ÿ˜

Marked as helpful

3

Zdravkoโ€ข 350

@Zdravko93

Posted

Hello @ApplePieGiraffe, and thank you for your helpful suggestions. I will edit my code according to them, and have those tips in mind while building my next project. Thanks again :)

1
Vanza Setiaโ€ข 27,855

@vanzasetia

Posted

Hello, Zdravko! ๐Ÿ‘‹

Congratulations on completing this challenge! ๐ŸŽ‰

Here are some suggestions for improvements.

I have two recommended videos. The first one is telling how hard HTML is (HTML is not easy). The second one is talking about HTML and modern CSS.

I suggest visiting Solid Start. It gives you an overview of web accessibility.

I hope this helps! Happy coding!

Marked as helpful

2

Zdravkoโ€ข 350

@Zdravko93

Posted

@vanzasetia Hello! First of all - thanks for taking time to review my code. I will do as you suggested and improve it accordingly. Thanks again!

0
Vanza Setiaโ€ข 27,855

@vanzasetia

Posted

@Zdravko93 You are welcome!

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