Design comparison
Community feedback
- @R3ygoskiPosted 7 months ago
Hello Nikola,
Firstly, congratulations on completing the project!
I have some tips for you that I think could help you improve your solution. In your
body
, addheight: 100vh
. This way, you ensure that the body's height matches the exact height of the vertical viewport.Also, in your card, try using
clamp()
. This allows you to set a minimum, base, and maximum size. For example:clamp(310px, 100%, 420px)
. This will prevent your card from growing too large on larger screens.Now, a tip more focused on HTML. Try using more semantic tags, as this improves accessibility. Here are four tags you could consider changing:
<div class="body">
: Instead of thisdiv
, you could use a<main>
tag because it's the main content of your page.<div class="body-header">
: Instead of thisdiv
, you could use a<figure>
tag because it contains the main image of your page.<div class="body-body">
: Instead of thisdiv
, you could use a<section>
tag because the internal content of thisdiv
is related to each other and dependent on the main content.<div class="body-footer">
: Instead of thisdiv
, you could use a<footer>
tag because it marks the end of the content.
Once again, congratulations on your project! Keep practicing and improving. If anything I said is confusing, please ask below, and I'll try to help in the best way possible.
0
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