Feedback for my survey page

Code Feedback
1

Hey all!

I got to the point that my survey form is nearly finished. Before working on compatibility for different browser sizes, I would like to have your input on my html code, and maybe some css tips.

1 Like
2

Nice!

I really like submit button animation :clap:

I think is good to use auto-indentation, SHIFT+TAB, it’s in the shortcuts section:

a
a1298×605 234 KB

Just remember to first select a part of the text you want to fix.

I read somewhere that alphabetic ordering of attributes in CSS helps a lot, it’s easier to find specific one later, works well for me but I didn’t write much(yet)

Good luck!

3

  1. I wouldn’t use absolute position and fixed width on the form. That will just make it harder to make responsive. Use max-width instead and center the form using auto margin.

  2. I would prefer left aligning the form elements. It makes it easier to scan/read and faster to fill out.

  3. Give the form some top/bottom padding (you need bottom padding after removing absolute positioning on the form).

  4. Give the select element some padding and make it wider.

  5. Use flexbox on the .checkbox-labels and vertically align the labels and inputs using align-items: center.

  6. Instead of using the <br> element, make a utility class that has the margin or padding you want for the grouping containers.

  7. When asking for Gender you may want to consider giving more choices that just Male and Female to not discriminate. One options is to have an Other option with a text input. Just something to consider.