Design comparison
Solution retrospective
Implementation of Design: I am proud of how closely I adhered to the original design specifications. I paid careful attention to details like layout, colors, and typography, ensuring that the final product closely resembled the design provided in the challenge. Learning and Growth: This project allowed me to strengthen my HTML and CSS skills, as well as improve my understanding of accessibility practices, which I incorporated to ensure the component is user-friendly for everyone.
What challenges did you encounter, and how did you overcome them?Heading Visibility: I faced an issue where the heading was not visible on smaller screens due to setting the main container height to 100vh.
Solution: I removed the height: 100vh in the media query, allowing the content to flow naturally and keeping the heading visible.
What specific areas of your project would you like help with?CSS Media Queries: I'm struggling to make my layout fully responsive. I'd appreciate feedback on how to optimize my media queries for better visibility on smaller screens, especially regarding the heading and overall content structure.
Hover and Focus States: I'm looking for suggestions on how to improve the hover and focus states for my buttons and interactive elements to enhance accessibility.
Code Organization: Feedback on my CSS organization would be valuable. I'm trying to maintain clarity and avoid redundancy. Any tips on best practices for structuring CSS would be great.
Community feedback
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