
Design comparison
Solution retrospective
This time, I’m just focusing on improving my CSS skills. I’m not using any special methods, just aiming to complete the assignment. Of course, I’ll also look at other people’s work to absorb their excellent coding skills.
:)
What challenges did you encounter, and how did you overcome them?When encountering difficulties, for me, it’s about adjusting the layout for different device sizes. For example, between 1024 and 1200px, my footer looks strange. It seems too wide for medium devices but too cramped for large devices within the 1024px to 1200px range. In the end, I chose to render the large device style at 1200px.
What specific areas of your project would you like help with?I have used SCSS to manage CSS before and know that SCSS allows for nested writing and inheritance to manage styles. However, in my practical experience, it’s difficult for me to consider all the SCSS processing at the beginning, so I still prefer to write directly in CSS. Should SCSS be handled at the end to optimize CSS? Because my proficiency in SCSS is not very high, I usually end up choosing to write directly in CSS.
Community feedback
- P@ylin320Posted 5 days ago
Great job on the Meet Landing Page!🚀
Strengths:
- Good responsive design implementation with media queries
- Clean HTML structure and semantic markup
- Well-organized CSS with clear sections
- Well-implemented BEM-like naming conventions
- Good use of grid and flexbox layouts
- Proper image handling for different screen sizes
Issues:
-
Mobile Button Layout Issue (Critical)
- The buttons should be stacked vertically on mobile (< 375px)
- Current implementation shows buttons in row layout by default
- Suggestion: Move the row layout to media query and make column layout the default
-
CSS Structure Issues:
- Some magic numbers in margins/paddings could be converted to CSS variables
- Colors should be defined as CSS custom properties for easier maintenance
This is a solid implementation with great responsive design principles! Just a few tweaks to refine accessibility and mobile usability. Keep up the great work! 💪🚀🔥
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