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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

social proof challange

@ehodg

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


I thought I did a good job but I feel there are much easier ways to style than what I did. Any feedback would be great

Community feedback

@RenszCamacho

Posted

Hi, Eric. Well done.

I have been checking your code and I have seen some issues.

The first suggestion is that you do mobile-first. It's easier.

Your layout looks weird. you have the footer in the middle of the screen. I think you can place all the items, just with flex-box. Although I have seen that you have used absolute position.

Your images are broken, it is because you have set the path wrong, and for good practices, it would be great if you don't leave the alt="" empty at least in these cases.

  • The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

This how Id solve it.

<img src="./images/image-colton.jpg" alt="Colton Smith" />

Hopefully, it helps.

Happy coding, mate 🧑‍💻

2

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