Design comparison
SolutionDesign
Solution retrospective
I know that your time is limited and important, but it's going to mean a lot if you leave a feedback down below. Thanks! :)
Community feedback
- @vanzasetiaPosted about 3 years ago
👋 Hi Vasinc Daniel!
I have some feedback on this solution:
- On mobile view (320px * 640px) your page show horizantal scrollbar, the reason for that the
width
of the body set to375px
. I would recommend to not setwidth
on thebody
element, especially in this case, since it destroy the responsiveness. - Heading order is extremely important. Use heading start from
h1
down toh6
. Also, instead making it into two separate heading, I would recommend to usespan
to style it differently.
<h1>Reliable, efficient delivery <span>Powered by Technology</span></h1>
- For the rest of the heading tag, just increase the level of the heading to
h2
. - Alternative for image should be human readable and informative, not hyphenated.
- For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all screen readers ignore those images. In this case all images are decorative only. - I would recommend for any link tag that has
target="_blank"
, addrel="noopener"
for security reason (prevent pages from abusingwindow.opener
). To learn more, check the web.dev article. - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs. Since you're using Sass, you can create arem()
function that will convertpx
torem
unit.
/* In your sass file */ body font-size: rem(16); /* Output */ body { font-size: 1rem; }
- About nesting, I would recommend to not nesting too much. If you see the output, the specificity keeps increasing unnecessarily. Having high specificity can cause a lot of issues, especially on bigger project. You might want to take a look the Sass Guidelines about nesting.
That's it! Hopefully this means a lot for you!
Marked as helpful2@VasincPosted about 3 years ago@vanzasetia Hi, Vanzasetia. I can't express how much this feedback means to me. I already learned some new things only from this particular one. I hope you have a great day ;)
Thanks again for consuming your precios time :) (And sorry for my bad 'engrish')
0 - On mobile view (320px * 640px) your page show horizantal scrollbar, the reason for that 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