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

A social-proof page using html and css

@wonuola-y

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 guys, here is my solution for this challenge your reviews are highly anticipated. Thanks

Community feedback

Adam 430

@aemann2

Posted

Hi Wonuola,

Good job on the challenge. A couple suggestions:

First, I'd suggest putting all your content (except maybe the .attribution stuff) in the <main> tag and setting a fixed width on it. The reason for this is that all your main sections are set with a width of 100%, which means they'll all expand to take up 100% of the screen width. Sometimes this is what you want, but here, if you're viewing the page on a larger screen, the images become bigger than they're supposed to be and become distorted.

With .svg files, you don't have to worry about images being distorted because those are actually bits of code that can expand or shrink and remain fundamentally the same. But with .png and .jpeg image files (like the ones in this project), you're limited by how much you can allow the images to expand before they distort and don't look so good. Just something to keep in mind whenever you're working with image files that aren't SVG.

Second, in your Github code, you should put your image files in their own folder. This helps make your code more organized, so when people go to view your code it's easier to find your HTML and stylesheet. I've also completed this challenge if you wanna take a look at another solution.

Best,

-Adam

Marked as helpful

3

@Takaforyannick30

Posted

Hello Alonge! I must say I am quite impressed with your solution to the challenge. I would like to recommend that you should always include an alt attribute inside an img tag. The alt attribute is of great importance because it provides a text alternative to search engines. And if the image fails to load then the text will be displayed.

Your solution is quite similar to the design and it's responsive. Keep it up...

Marked as helpful

1

@wonuola-y

Posted

@Takaforyannick30 Thank you very much!

0

@Takaforyannick30

Posted

@wonuola-y 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