Product preview card using Flexbox

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

“Next time, I would try to connect the form to a real email API like Mailchimp so it stores the emails.”

“I’d like to focus more on accessibility, like improving keyboard navigation and ARIA labels.”

“I would try to use a CSS framework (Tailwind or Bootstrap) to speed up the styling process.”

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

One challenge I faced was making the newsletter card fully responsive. At first, it didn’t look good on mobile, but I solved this by using media queries and testing on different screen sizes.

Another challenge was centering the card on the page. I overcame this by using flexbox with justify-content: center and align-items: center.

Finally, I struggled with pushing my project to GitHub, but after learning about personal access tokens, I was able to fix the authentication issue.

What specific areas of your project would you like help with? Areas I’d like help with

• I’d like feedback on my CSS structure — are my class names and styles organized well, or could I improve readability and reusability?
• I’m not fully confident about my responsive design. Does the layout work smoothly across different devices and screen sizes?
• I’d love suggestions on how I could improve the form validation (right now it’s very basic).
• Any tips for making my project more accessible (ARIA labels, keyboard navigation, screen readers) would be really valuable.
• If there are better best practices for Git/GitHub I should follow when uploading my projects, I’d appreciate advice.