Survey form - Yoga center survey form

Code Feedback
1

Hi Everyone!
I have completed the survey form project. I’d really appreciate some feedback.

Here is the link: https://codepen.io/Nandini-Dixit/pen/gONgrgw
Thanks so much for your time and help!

1 Like
2

Looks pretty good.

  1. Add box-sizing: border-box to your universal selector *

  2. Don’t use fixed width or height. Use max-width and min-height. That way, elements can shrink and grow as needed.

  3. Add resize: vertical to your textarea element, so the user can only drag it taller and not wider.

  4. Add cursor: pointer to your submit button.

  5. Always, test your layout with different screen sizes. You can use the browser dev tools as well.

Nice job, keep it up.

2 Likes
3

Thanks for pointing these out. I will refactor my code and will keep these suggestions in my mind for my next projects.

4

Welcome to the forum!

Well done on the Survey Form. Looks clean and smooth and you chose a nice palette. All of the suggestions above are excellent, and I thought I’d also let you know how to make the page a bit more responsive to different screen widths.

Your #survey-form width is a constant number. Try using percentages instead. These will always go by the width of the parent element as a gauge, making your elements more elastic. Or, if you want to use the whole screen width as a gauge instead, use the vw or vh way. Any number you put before vw or vh will be calculated as ()% of the viewport`s width or height, making it really useful for adapting to different screen sizes. Apply this to the #survey-form element and you will see the difference.

Also, I noticed all of your font is the same size. Try changing the size for the question
labels, making the titles bigger and the option labels smaller.

All in all great work and have fun coding many more great projects like this one in the future!

Nicolas

1 Like
5

Thanks for the warm welcome and your helpful feedback. I have now updated the code with all the suggestions. I really appreciate it.

1 Like
6

Nice work! Looks even better than before.
N

1 Like