Design comparison
Solution retrospective
I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?I struggled with making the font size responsive without using media queries. I don't know which one to use rem, em, vh, vw.
What specific areas of your project would you like help with?.
Community feedback
- @R3ygoskiPosted 8 months ago
Hi Kaoutar, good job!
Answering your question about font-size, is highly recommended to use or rem(Root) or em (Element), and there's another option, that is
clamp()
, as it can be used to set a value range, like that:clamp(minVal, preferred, maxVal)
, you can find about it here: MDN Clamp.Marked as helpful0 - @autistickyriosPosted 8 months ago
Congratulations on completing the project! You are doing great.
- This is a "One-Card" type of project which fits on a non scrolling page.
Your website has a scroll right now.
Try to avoid that for these type of single page projects which shouldn't have scroll bar.
It can be done by adding
display: flex; height: 100vh; width: auto; align-items: center; justify-content: center;
to the parent element. Create that "parent" element right after the body tag and then start coding in it.
- Try to avoid giving fixed widths and heights to the cards like these unless its necessary.
- You missed to add active states CSS on hover on that "HTML & CSS foundations" thing.
Small mistakes! All the best for your coding journey
Marked as helpful0 - This is a "One-Card" type of project which fits on a non scrolling page.
Your website has a scroll right now.
Try to avoid that for these type of single page projects which shouldn't have scroll bar.
It can be done by adding
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