Design comparison
Solution retrospective
I'm a newbie in front-end, and this is my first project in Frontend Mentor. Please give me your opinions about this challenge that I just finished.
Many thanks!
Community feedback
- @darryncodesPosted about 3 years ago
Hi Hoangnam,
Well done on completing your first project, it looks like a perfect match!
A few thoughts from me
- try updating this:
background-size: 100% auto;
and removingbackground-position-y: 5rem;
the background image currently jumps down on small device screen widths - have you considered using media queries with rem units to help with responsive design?
- css unit best practice
- a brief guide on responsive web design
- here is an example of what I mean:
html { font-size: 62.5%; //1rem = 10px @media only screen and (max-width: 56.25em) { //900px font-size: 56.25%; //1rem = 9px } @media only screen and (max-width: 37.5em) { //600px font-size: 50%; //1rem = 8px } }
Marked as helpful0@hoangnam-nguyenPosted about 3 years ago@darryncodes Many thanks for your comments! Your suggestions and additional links are very helpful! Much appreciated.
0 - try updating this:
- @Juveria-DalviPosted about 3 years ago
hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag also headings should be wrapped in <h1>
<h1>Order Summary</h1>
Marked as helpful0@hoangnam-nguyenPosted about 3 years agoI was not aware of this report. I have fixed the issues, please let me know if you have any further comments. Thanks a lot @JuveriaD !
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