Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive card details form

Graham 930

@GrahamTheobald

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am unsure about how I have structured my divs and the corresponding structure of my SASS style sheet. It feels cluttered and overly complex somehow but I am unsure of protocols to follow in order to keep it tidy and concise.

Community feedback

@ms097530

Posted

Hi Graham,

The structure of the HTML looks fine to me, though it may be worth considering using section tags in place of the outermost div tags. Instead of using two separate inputs for MM and YY I would advise using the fieldset as it is made for grouping inputs together.

I found moving to a mobile-first approach helped me structure my styling more effectively. The reasoning is that if you approach the layout from a mobile-first perspective you will often be able to keep much of the default styling (i.e. content stacking to form a column) and then simply adjusting from there for wider screens. This may help you tidy up your styling and make it feel less complex.

Cheers, Mike

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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