Design comparison
SolutionDesign
Solution retrospective
Hey, it's my first challenge in frontend mentor, if someone see something that can be changed in the code, please tell me :).
Community feedback
- @vanzasetiaPosted over 3 years ago
👋Hi Víctor Mato!
👍 Good job on completing your first challenge!
I have some feedback to improve this solution:
- You need to make the
h2
all uppercase by using CSStext-transform
property. - The body should have grayish background too.
- You should wrap all your content except the attribution one inside a
main
tag. - For the attribution, I recommend to use
footer
instead of adiv
. - I recommend to use
woff2
orwoff
(Web Open Font Format) instead of the.ttf
(TrueType). It's recommended because, thewoff
has smaller size which mean it can improve the loading speed of your page. I recommend to convert all your*.ttf
to*.woff
(to support Internet Explorer 9 and above) and*.woff2
(for all modern browsers) using this Free Font Converter. - I recommend to always make all elements have
box-sizing: border-box;
as your common reset. It will prevent all elements to add initial width when you addpadding
to them.
*, *::after, *::before { box-sizing: border-box; }
- Use
rem
or sometimesem
for everything that you usually usespx
. Usingpx
will prevent the user to control the size of your page. - Try to use CSS Custom Property, to prevent you from keep repeating the same thing. It's also make it easier to organize things.
That's it! Hopefully this is helpful!
0 - You need to make 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