Design comparison
Solution retrospective
So far this is what I could come up with. Your reviews will be very appreciated. Thank You
Community feedback
- @efecollinsPosted about 2 years ago
Hello Dennis, great work! If you don't mind, I've got some tips for your project's accessibility.
After using an
h1
, it's good practice to use anh2
but you used an<h3 class="parHeader">
. Changing this in all places you used it to anh2
is better for your website's accessibility. Mind you, only oneh1
is needed on a web page.Add an attribute
role="contentinfo"
to your<div class="attribution">
. It represents thefooter
tag which happens to be absent in your HTML code.Great work building the mobile view. Visit W3Schools to learn more on Responsive Web Design.
Marked as helpful0 - @thisisharsh7Posted about 2 years ago
Hey Dennis, you are really doing well and your JavaScript code seems to fine but there are some improvement in design which could be made
-
Avoid giving margin like
body{ margin: 0 auto; }
and.main-container{ margin: 200px auto; }
to each item for making them align to the center instead give body flex property i.e.body{ display: flex; min-height: 100vh; flex-direction: column; align-content: center; justify-content: center;}
and everything will align to the center. -
Avoid giving manual width to the body like
body{ width: 1440px; }
andbody{width: 375px; }
body is like the screen you can't make it wider instead try resizing the content inside your body not the body itself. -
Try to use max-width and min-width to make the content responsive.
hope this helps ......
Marked as helpful0 -
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