Design comparison
Solution retrospective
I am improving the CSS organization and HTML optimization to give better structure to the web in general. I would like to use more grids in a project.
What challenges did you encounter, and how did you overcome them?In mobile mode, the padding of the elements except in the banner with the image, I had to add :not of CSS not to modify the HTML structure that was already done.
What specific areas of your project would you like help with?I would like you to help me with the small details and to optimize the code according to best practices.
Community feedback
- @DylandeBruijnPosted 4 months ago
@codigotin
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
- Clear descriptive CSS classes
- Use of CSS custom properties
Things you could improve βοΈ
-
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 using using relative CSS units like
rem
andem
they make your layout more adaptable. -
You donβt have to wrap your image in a separate
div
, itβs possible to style it directly to achieve the same result. I also would suggest keeping theheight
of your image asauto
so the aspect ratio is preserved. At the moment when the viewport gets smaller your image will warp.
I hope you find my feedback helpful! π
Let me know if you have more questions and I'll do my best to answer them. πββοΈ
Happy coding! π
Marked as helpful1
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