Design comparison
Community feedback
- @francimelinkPosted 3 months ago
Does the solution include semantic HTML?
The solution does not include semantic HTML elements. Examples of semantic elements that could be used in this solution are
main
,section
, andfooter
. Each semantic element precisely describes the purpose of the element (its role).Is it accessible, and what improvements could be made?
Accessibility was checked using Lighthouse. It’s not bad, but as mentioned, the result could be improved by using semantic HTML elements. Semantic elements help the browser better understand the structure of the page, making it more accessible, for example, to visually impaired users.
Does the layout look good on a range of screen sizes?
I checked different device sizes using the "Developer Tools". One comment I might have is that when the design reaches (1440px) or perhaps even earlier at a certain device size, the card dimensions could be fixed with
max-width
andmax-height
. Otherwise, the card might stretch, which may not look the best.Is the code well-structured, readable, and reusable?
I would recommend using semantic elements. This would make the code even more readable. Additionally, I would suggest trying to use CSS variables and reset CSS.
Does the solution differ considerably from the design?
As I mentioned, there seem to be deviations at higher resolutions above 1440px and between 600px and 1440px. I would also recommend trying to use relative size units.
0 - @EAguayodevPosted 3 months ago
Performed exceptionally in developing well-structured HTML and CSS, achieving a close resemblance to the design.
0
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