Design comparison
Solution retrospective
Any comment will be great received
Community feedback
- @correlucasPosted over 2 years ago
Hello Esteban, congratulations for you solution!
Overall your solution design seems really good! The only thing you can do to improve it is fix the ACCESSIBILITY ISSUES that you can take a look in the report panel.
You've 3 accessibility issues, you can fix all of them doing that:
-
You need ever to apply one H1 heading, in your code you started by H2 and put the main headline inside a <div> tag.
-
You need to wrap the most important content inside the <main> tag, to show hierarchy to your html structure, so you can change your .container div to
<main class="container">
to avoid this problem.
I hope it helps you to fix your solution report!
Marked as helpful1@evertznerPosted over 2 years ago@correlucas Thank you very much, I will take a look since I omit those accessibility issues.
1 -
- @mubizzyPosted over 2 years ago
Excellent job on this challenge!
Hope it helps:)...don't forget to mark it as helpful 👍
1 - @ChrisAndrewsDevPosted over 2 years ago
Hey Esteban!
Your solution is really solid, but as Lucas mentioned, you have a couple of accessibility issues (they are really easy to fix, Lucas explains how in his response! ^.^)
As far as the design goes, there's only a couple of small differences I can spot (I am fairly new to coding so if anyone else can correct me that would be great!)
-The price font weight is slightly heavier on the prices elements in the design brief, from memory it's font-weight 700 -Same goes for the button element text
Your responsiveness is spot-on, much better than my attempt >.< !
Nice job!
1@evertznerPosted over 2 years ago@ChrisAndrewsDev thank you for your contribution. Without figma files it is a bit difficult to tie the design, hehe. I
1
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