@DylandeBruijn
Posted
@Drewizzz
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 🎉
- Clear descriptive CSS classes
- Use of ChatGPT to help you learn, make sure you understand the code it spits out though. Try not to just copy and paste
- Good use of Figma as a tool
Things you could improve ✍️
-
Change
height: 100vh
tomin-height: 100vh
on thebody
element so it's100vh
at a minimum but can still grow when the content inside it grows. -
Try using CSS custom properties, they help you make your CSS values more reusable and descriptive.
-
Try using more semantic HTML elements. Wrap your main content in a
<main>
for example. -
Try keeping the
height
of your.container
element fluid. At the moment you have a fixedwidth
andheight
which causes overflow issues when the content inside your card grows. -
It's not necessary to have a
<div>
around your image. You can style the image itself and achieve the same result. -
Try using relative units like
rem
andem
for your text.
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! 😎
Marked as helpful