Semantic HTML5 markup, FlexBox, Responsive
Design comparison
Solution retrospective
I’m most proud of achieving a responsive component that closely matches the visual design provided. Next time, I would implement the BEM naming convention from the beginning to better organize the CSS. This would allow for clearer structure and easier management, especially in larger projects or if future updates are needed.
What challenges did you encounter, and how did you overcome them?I faced two main challenges: ensuring responsiveness across different screen sizes and matching the design's exact spacing and font details. To handle responsiveness, I used a mobile-first approach with flexible units and media queries. For precise design alignment, I relied on developer tools to adjust margins, padding, and font sizes. These strategies helped me create a more consistent and adaptable component.
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