Design comparison
SolutionDesign
Community feedback
- @MattPahutaPosted about 2 months ago
Excellent work with this challenge. Your result is very close to the design comp, you've incorporated a lot of good semantic elements, your styles include a proper CSS reset, and are well commented and organized, among other great aspects of your project. I did go ahead and flag a few things you might consider for revisions:
- While you may have multiple
header
elements on any given page, if there's only one it should generally sit outside of themain
element. The structure for this challenge is probably best suited for header-main-footer. - Image alt descriptions should not include words like 'image' or 'picture' because they are already an image role. There are some great articles written on the subject over on the discord server, in the resources channel.
- It would be more semantically correct to use
button
elements for the design's buttons rather than styleda
tags. - The footer section content doesn't necessarily have any less weight than what came before. I think the heading here should be an
h2
also. - I recommend to avoid using the 62.5% font size hack. This is an outdated method of handling font sizing and can create a lot of accessibility issues for impaired users. Here's a quick explainer on the topic where Grace makes the case against using it. I tend to agree with her reasoning.
- The spacing between the accent text above the second heading looks a bit too tight.
- The last heading is stretching a little too long on larger screens.
Again, very nicely done. Good luck moving forward!
0 - While you may have multiple
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