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

It still have some error. So far this is what i am at

Tanu 80

@tanu-12

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


This isn't complete just want some helpful feedbacks

Community feedback

@GeorgeDaris

Posted

Hey, there!

You have made quite some progress from what I can see. The data from the form gets displayed on the cards as intended, and you have placed a check to make sure the user fills out the form before being able to submit it.

Here are some things you could consider to improve your app:

  • Use relative units, such as rems, to make your design more responsive.
  • Your cards are inside divs which take up more space than the cards themselves, making the form inaccessible when the width of the screen becomes smaller.
  • Instead of using absolute positioning for the cards, consider placing them inside a grid container and using gaps or margins to create the spacing you are looking for. This can help make it work for mobile devices as well, where you would have a one column grid with two rows: one for the cards, and another for the form.
  • The large top margin you have set on the form could be replaced by justifying the items of your container in the center. No matter how large or small the screen, your content will be placed in the middle vertically.

I hope this helps you consider some solutions to your problems. I would highly suggest you read articles from MDN Web Docs, as they cover a wide range of topics related to CSS and web development in general.

Happy coding!

Marked as helpful

1

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