@francimelink
Posted
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, and footer. 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 and max-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.
