Design comparison
Solution retrospective
It is tough to figure out CSS properties from Figma when using the free version.
Community feedback
- @DylandeBruijnPosted 5 months ago
@atomic-variable
Hiya! 👋
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things I like about your solution 🎉
- Use of semantic HTML elements
Things you could improve ✍️
-
I suggest adding a bit of
padding
to yourbody
element so the card has some space around it on smaller viewports. -
Try experimenting with the CSS layout tool Flexbox, it will help you greatly structuring elements on your webpage.
-
You could add a
min-height: 100vh
to yourbody
element so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.
-
I suggest using clear descriptive CSS classes like
.card
,.card-title
and.card-description
. -
I don't think
content
is a valid HTML element, try usingp
for your card description. -
Try making your card responsive.
I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟
Let me know if you have more questions and I'll do my best to answer them. 🙋♂️
Happy coding! 😎
0@atomic-variablePosted 5 months agoHi @DylandeBruijn
Thank you for your review. Please find my response below.
I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.
- SureTry experimenting with the CSS layout tool Flexbox, it will help you greatly structuring elements on your webpage.
- I've used Flexbox to structure my elements already, can you please be more specific?You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.
- I've added it to the main tag actually, but adding it to body makes sense, sure.Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.
- SureI suggest using clear descriptive CSS classes like .card, .card-title and .card-description.
- SureI don't think content is a valid HTML element, try using p for your card description.
- YeahTry making your card responsive.
- It has the same dimensions for both web & mobile, what do you mean by making it responsive?Happy coding!
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