Design comparison
Solution retrospective
I have wrangled with the CSS of this page till it looks kind of similar to the original design. However I feel like the way I did it is probably not the best code. Any suggestions would be highly appreciated!
Community feedback
- @giedrius-zavisaPosted about 3 years ago
Hello, @arnoldboy123!
Took a look at your solution and came up with some suggestions you could consider to improve your work. First of all, there are a few HTML and accessibility issues in your report, which you might want to look at. Here's a simple breakdown of the issues:
Accessibility:
There are people who use assistive technology to navigate through websites, so you should keep them in mind when designing your web page. To help these people navigate easier, landmark elements are used to breakdown a webpage into different parts with specific purposes (you can read more here, if you are interested: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html). For this challenge, it's fine to just wrap the HTML in your <body> inside a <main> element. You can also wrap your 'attribution' div inside a <footer> element.
HTML issues:
Your HTML issues refer to your <img> elements. Alternative text refers to the 'alt' attribute inside an <img> element. Alternative text is a piece of text that is displayed when an image fails to load, so it's best to fill it out with a short, concise description of the image itself. It's usually structured like this: <img src="image.png" alt="very descriptive text of the image">. If you are curious to see it in action, add some alternative text and leave your src attribute empty. The alternative text should show up in its place.
Furthermore, It still needs some work for responsive design as a mobile screen can't contain your card. Feel free to look up these resources for responsive design guides:
https://www.w3schools.com/css/css_rwd_intro.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
All in all, the desktop view of your work looks great, and all the comments I said until now are merely suggestions to improve it further. Nice work on this and I wish you the best of luck on your next challenge! :)
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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