Design comparison
Solution retrospective
I'm proud to manage the font size changes without a media query.
What challenges did you encounter, and how did you overcome them?Not the first time to use clamp(), but it has always been a gray area. So now, I’ve looked into it more deeper and now I understand how to use it!
What specific areas of your project would you like help with?In the code, I added the title as H2 because I thought there would be multiple components like this on the page, so it can't be H1. Am I correct?
Community feedback
- @dar-juPosted 3 months ago
Hi Adam Nagy!
Answer to your question: it's just a piece of content, not a full page, so it doesn't matter if you use h1 or h2. Need to look at the full page, it might also be h3.
If you don't mind, I'll comment on your code:
- you're using the figure tag, but in that case there should be a caption for the image. In this case, you can get by with the <img> tag
- it's semantically correct if you use the time tag like this:
<time class="card__date" datetime="2020-06-28">28 Jun 2020</time>Here about time tag.
Otherwise, everything is great!
Good luck with the development!
Marked as helpful1@nadam-designPosted 3 months ago@dar-ju Thanks for pointing that out! I should have used the <picture> element instead of the <figure> tag (thanks for clarifying the difference). I sometimes feel unsure about choosing the right heading size, but you're right – since we're looking at a component and not a full page, it doesn't matter as much. I also had never used the <time> tag before, so your suggestion is really valuable. I truly appreciate your feedback!
0@dar-juPosted 3 months ago@nadam-design You are welcome.
The <picture> tag is used if you have different images for different resolutions. Note that if you will do a task with a product card, then there are exactly 2 images used and there <picture> tag is needed. In this task, just img is enough.
Headings are ranked not by their size (the size can always be changed) but by their importance. The most important one is h1, subheadings from the main one are h2, and so on. It is better not to skip the order.
Marked as helpful1@nadam-designPosted 3 months ago@dar-ju Ok, it's clear now with the images. It was already worth registering! :) Thank you!
0
Please log in to post a comment
Log in with GitHub
Join 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