Flex-box, Grid, Fetch API and BEM
Design comparison
Solution retrospective
Hello, any recommendations to improve the code are gratefully received (👍≖‿‿≖) 👍 👍 (≖‿‿≖👍)
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Layout in desktop is really great, it is responsive and the mobile state looks great as well.
Some suggestions would be:
- Using these on the
main
:
top: 50vh; transform: translateY(-50%);
Is not reliable, try to inspect the layout in dev tools at the bottom, the layout is pushed on to the top and some part are being hidden by the screen. On this, you could make the
body
flexbox to center the content with :align-items: center; display: flex; justify-content: center;
and adding
width: 100%
both on themain
and the.tracking-dashboard
selectors. or you could just add apadding
to the top of themain
.- Person's
img
should be using the person's name as thealt
likealt="Jeremy Robson"
. A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image. - When wrapping a text-content do not just use
span
to wrap it, use meaningful element like ap
tag if it just a regular text or heading tag if it is an heading. - Since you are only using
button
for the selections, you should add anaria-live
element that announces a certainbutton
is selected from the choices. Becausebutton
alone does not give extra information even if it has been toggled, unless it is customized viarole
attribute in some html structure. - Adding
cursor: pointer
to thebutton
for desktop view would be nice, just to make it more natural. - Those 3 dots images could use
aria-hidden="true"
to hide it completely. - Avoid using multiple
h1
on a page, use only at least 1 per page. Those highlighted text like32hrs
are not suited to be a heading tag, because using one does not add any information on what the section would/could contain. Usep
tag on it.
Aside from those, great work again on this one.
Marked as helpful0@HernanAlex61ChoqueCondori8Posted about 3 years ago@pikamart Thank you very much for your recommendations, they are of great help to me to improve the code and learn a little more (👍≖‿‿≖) 👍
1 - Using these on the
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