@DylandeBruijn
Posted
@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! 😎
@atomic-variable
Posted
Hi @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.
- Sure
Try 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.
- Sure
I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.
- Sure
I don't think content is a valid HTML element, try using p for your card description.
- Yeah
Try making your card responsive.
- It has the same dimensions for both web & mobile, what do you mean by making it responsive?
Happy coding!