Design comparison
Solution retrospective
I had a bit more difficulty, but I managed to solve it and I feel proud of that, of recognizing the mistakes and starting over. In the end, everything worked out!
What challenges did you encounter, and how did you overcome them?On my first attempt, there was something wrong with the resizing and alignment, something that messed up the entire page when using media queries. So I decided to delete all the code and start over with a bit more care.
What specific areas of your project would you like help with?In this project, I have no doubts; everything is perfect.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @hmdev2,
Nice project! Here are a couple of suggestions to refine your work:
Reduce Containers: Consider simplifying your layout by reducing the number of containers. For this project, a single <main> container with display: flex and flex-direction: column for stacking content should suffice. On the body, use flexbox with align-items: center and justify-content: center to enhance cleanliness and readability.
Heading Tags: Although it's typically correct to use only one <h1> per page, in this case, starting with an <h2> tag is more appropriate since the component doesn’t function as a page title.
Keep up the great work!
Best, Teodor
Marked as helpful1@hmdev2Posted 3 months ago@TedJenkler I understand, thank you for the tip! I will try to implement it in future projects.
1 - @Abby-LiuPosted 3 months ago
Nice job! Your implementation effectively uses a global reset, CSS variables, and flexbox for layout alignment and responsiveness, with media queries adjusting widths for various screen sizes.
It promotes consistency and ease of updates, but the over-reliance on id selectors limits scalability, and fixed widths in media queries reduce flexibility. Magic numbers for margins and paddings could be replaced with relative units (rem, em), while better use of flexbox alignment could eliminate the need for manual centering.
Marked as helpful1@hmdev2Posted 3 months ago@Abby-Liu Thank you for the tips, I will pay more attention to the recommendations and try to implement them in future projects.
0
Please log in to post a comment
Log in with GitHub
Join 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