Single Price Grid Component | HTML, CSS Grid & Responsive Design

What are you most proud of, and what would you do differently next time?

I’m most proud of creating a clean and fully responsive pricing component that closely matches the provided design on both desktop and mobile screens. I also improved my understanding of CSS Grid, spacing, and hover effects. Next time, I would focus more on accessibility and use a more structured CSS methodology like BEM for better scalability.

What challenges did you encounter, and how did you overcome them?

One of the main challenges was making the layout responsive while maintaining proper spacing and alignment across different screen sizes. I overcame this by using CSS Grid along with media queries to switch between desktop and mobile layouts smoothly. I also adjusted padding, font sizes, and section spacing carefully to match the design more accurately.

What specific areas of your project would you like help with?

I’d appreciate feedback on improving my CSS structure and responsiveness. I’d also like suggestions on writing cleaner, more maintainable CSS and improving accessibility practices such as semantic HTML, focus states, and color contrast. Additionally, I’d love tips on optimizing layouts for different screen sizes more efficiently.