@Alex-Archer-I
Posted
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 except body 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 contain h1, p etc. All content in this project should be inside main (you can use header inside main though).
Also there is a list of links here, so you should use ul tag alongside with the li.
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 with rem 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 helpful
@GabrielNP96
Posted
@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.
@Alex-Archer-I
Posted
@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. For body it's better to use min-height: 100vh cos content might overflow if became lager than the screen. And as for .main-div you can omit height at all since auto is a default value.
Marked as helpful
