Design comparison
SolutionDesign
Community feedback
- @roberto-rojas-devPosted 3 months ago
Hi Yani, I hope you're doing well.
Your solution looks great!
I have a few tips that might help you improve it even further.
- You should avoid using
px
for setting font sizes, you should userem
instead, this way, when the user increases the zoom setting of the website, the fonts will scale accordingly. This video can give you some examples of when to use each unit: Are you using the right CSS units? - I liked that you're using
clamp()
for font sizes, however, they are not working in your project because clamp requires the second value to be a relative unit like a%
orvw
, you could try something likefont-size: clamp(1rem, 4vw, 1.25rem)
(you can change the values as you need). - A nice trick to set the card width is to use the
min()
function, for example:width: min(85%, 24rem)
,min()
will choose the smaller value between the two, so on larger screens, the card will be 24 rem while on smaller screens it will be 85% of it's container's width, allowing the card to shrink while keeping a nice 'margin' on both sides. - In 'HTML & CSS foundations' title the
<a>
must be inside the<h1>
with the text inside the<a>
tag. - One important issue I noticed in the HTML code is an incorrect use of headings, you shouldn't place a
<h3>
before a<h1>
, for the case of the text 'Published 21 Dec 2023' you could use a<p>
tag. It’s important to think of heading levels like titles and subtitles, where a subtitle should follow a title, not the opposite. This resource dives deeper into proper heading usage: The most common HTML mistake
I hope these tips help you enhance your project. You’re doing a good job.
Wishing you all the best with your coding journey ✨
Marked as helpful0@YaniChavesPosted 3 months ago@roberto-rojas-dev Hi there! thank you so much for your tips, honestly. The clamp() function was something new i was trying so i really appreciate the feedback. In relation to the other tips, thanks for the heads up. I will be more conscious about them. Thanks Roberto :)
0 - You should avoid using
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