Design comparison
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hi!
Great work, congrats =)
I can give a couple suggestions of how you can improve it =)
At first about semantic. When the
header
tag is on the top level of the page (I mean it didn't nested inside another tag exceptbody
he has a special semantic meaning. It is the part of the site that repeated on every page and often it contains navigation menu, site logo and stuff. So, the header shouldn't containh1
,p
etc. All content in this project should be insidemain
(you can useheader
insidemain
though).Also there is a list of links here, so you should use
ul
tag alongside with theli
.And a couple of words about responsiveness. Percentages could be a very tricky values so I suggest you to use them only if you 100% (yeah, percentages =)) sure that you need them. For example your card now takes 50% of the width of the screen. And while there are a huge various of devises it could looks weird sometimes. That also goes for inner content which takes their percentage from container.
I suggest you to use
max-width
withrem
for your container. That way it'll keep it's width on the wide screens and would shrink on the small ones.Hope that could be helpful =)
Marked as helpful0@GabrielNP96Posted 4 months ago@Alex-Archer-I Thank you so much for your feedback! I'm really happy to receive your suggestions and I'll make sure to implement them in the project. I thought using percentages would make everything more responsive, but I see your point now.
1@Alex-Archer-IPosted 4 months ago@GabrielNP96
Guess they make everything too responsive =)
Btw, there is a good article about where to use which values. Sometimes
px
are good too =)Also I forgot to tell about
height
. Forbody
it's better to usemin-height: 100vh
cos content might overflow if became lager than the screen. And as for.main-div
you can omit height at all sinceauto
is a default value.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