Finaaaaaaaaalllyyyyyyy I've done the survey form please your feedback will help me a lot

Nice work but the test suite is missing. You can use this CDN link for testing the user stories of this project.

Nice job! I would make sure to work on the responsiveness of it. The form gets very narrow when resizing the window smaller. Maybe stack each label on top of its corresponding input when the window is a certain width. This would let it ‘breathe’ a bit.

1 Like

Good job! The form also took me a bit of time, kudos for keeping on it! Colour scheme looks nice and works well with the background :slight_smile:

Couple of things to up it to the next level:

  • The background may look better if you want a pattern texture because they “clip” seamlessly if you repeat the background picture. There are a lot of free pattern texture so if you’re interested in learning something on that just google around for free background pattern etc. That’s more of an aesthetic thing though.

  • The dropdown fields don’t properly align with the label, most notably on “* How often do you clean your Face: [dropdown menu]” and “* how important is the organic product? [dropdown menu]”. I think one way to go about it would be to either change the label font size or adjust the margin-top on the dropdown menus.

  • As bradyvossler said, the form survey is a great opportunity to work on those responsiveness skills! If you shrink down the browserwindow to smartphone size or try it on a smartphone, you’ll see the issue. Of course you’d want customers to be able to fill out the form on a smartphone as well, so it’s a good lesson there :slight_smile:
    For starters you could add an @media query and rework some of the margins to work with vw instead of px. Also see if you can rework some texts like the header font to be more responsive. I found the calc() function to be helpful there, e.g. font-size: calc(14px + 0.2vw); There are a few tutorials out there on this and just playing around with the function can lead you to good results.

Happy coding!