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 using html and sass :)

Thomas Boittinβ€’ 265

@tboittin

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


Hi, thanks for having a look at my work!

It's my third challenge on this website.

This one was the easiest of the 3 because I finally managed to set up sass on my computer :)

Feels satifsying to have some logic in your stylesheet !

I added a bit of media to get responsiveness between 375px and 1440px.

This project is my 3rd one of my 365 series for 1 project per day :)

Feel free to share any way I can improve it, see you !

Community feedback

P
Graceβ€’ 27,870

@grace-snow

Posted

Hi Thomas,

One project every day is certainly ambitious, which I admire. But just be careful you don't burn out!!

This looks pretty good, but there are some points for improvement to take away:

  • All your text is in divs at the moment, which is not a valid html tag for text. Use paragraphs, headings or list items
  • I would wrap all content in one wrapper and center it on the page using flexbox. Then everything would line up on each side and would stay vartically centered. Better than using top margins for layout.
  • The stars need the alt attributes emptying. At the moment, screenreaders would announce every one like "image, stars - image, stars - image, stars, image..." which makes for a poor user experience. Change it to alt="" instead and assistive tech will know to skip over them. It's fine in this case as the 5 stars is already in the written description.
  • Similarly, in the people avatars, you don't need to say the word 'picture' in alt text as it's already being announced as an image.

I hope that's helpful. If it is please upvote, I'm working on my mentoring :)

1

Thomas Boittinβ€’ 265

@tboittin

Posted

@grace-snow Thanks a lot Grace ! You just gave me insights I would take a long time to get!

Will make these changes right now.

About the 1 project per day challenge, I saw some people make it so I guess it's feasible. I'm planning to do easy stuff like this which doesn't take much time to save time for harder projects. I'll make them step by step spread on several days.

It's nice for more experienced dev to give their opinion, thanks a lot!

0
Thomas Boittinβ€’ 265

@tboittin

Posted

@grace-snow Following your advice i made these changes:

  • added p tags where text was directly inside divs

  • put ul/li tags for multiple elements (reviews and ratings)

  • add a reset.scss file to make sure the changes don't alter the layout

  • created a wrapper and used the align-items/justify-content combo to center the page. In fact, the layout moved down a bit to look more like the design, which is nice !

  • removed the useless alt content.

Thanks again for your help !

1
P
Graceβ€’ 27,870

@grace-snow

Posted

@tboittin good job, well done!

Remember to keep upvoting everyone's feedback you fnd helpful like me and @kyrylolvov on this so we build up our mentoring πŸ˜‰

1
Thomas Boittinβ€’ 265

@tboittin

Posted

@grace-snow Sure I do

0
Kyrylo Lvovβ€’ 160

@kyrylolvov

Posted

Hello there! πŸ˜€

You did a great job on this project! πŸ†

What I might suggest is looking at 1040px resolution, since there is a little issue with stars that behave differently frome each other. πŸ™‚

1

Thomas Boittinβ€’ 265

@tboittin

Posted

@kyrylolvov thanks for the review ! I will look for a solution to make it better :)

1
Thomas Boittinβ€’ 265

@tboittin

Posted

@kyrylolvov I added a min-width to the stars' div so it won't behave weirdly anymore.

Thanks for helping me improve my solution !

1
Kyrylo Lvovβ€’ 160

@kyrylolvov

Posted

@tboittin You are always welcome 😊

1

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