Interactive Card Details Form

Hey, Clem FRontend! 👋

Your solution looks great! 👏 Good job with the semantics, accessibility, and functionality of the form, as well! 👍

I wouldn't make the credit card number the h1 of the page since it isn't a very meaningful heading and doesn't describe the content of the page to users. Instead, given that the design of this page doesn't have a visible heading, you can add an invisible heading for semantics (as every page should have at an h1) and screen readers. Check out this helpful read on the topic.

And one minor thing in terms of design—it would be good to add a max width to the form in the tablet view so that its controls don't become too wide when the layout first changes from desktop to tablet.

Also, as @eng-milan mentioned, splitting your CSS into separate files is a good practice moving forward since it makes things easier to organize and work with (especially in large projects). 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Awsome design. I am also new and I am myself learning good practices so I won't be able to give you advise on your code bu UI is absolutely stunning.

To answer your question about css, React fundamental is about creating reusable components with disconnectivity to the whole project. So in my opinion if you create your own styles and not using css libraries, it's better to create separate css file for each component.

Hope this'll help.