Design comparison
Solution retrospective
Hi guys, here is my solution for this challenge your reviews are highly anticipated. Thanks
Community feedback
- @aemann2Posted over 3 years ago
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 helpful3 - @Takaforyannick30Posted over 3 years ago
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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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