Survey form weird looking

Code Feedback
1

Hello everyone!!

I have just finished the Survey-form project:

https://codepen.io/Mikelevra/pen/KKddyyo?editors=1100

And the first conclusion is that it looks ugly as hell, it feels like those days in which every clothe you put on look ridiculous. Well, let’s hope that my vision improves with practice.
Apart from that, I have learnt a lot with this projects, mostly in relation to looking for information, as I don’t know some structures by heart and I need to check them up.
I am still having troubles with the allignment of the different element, and I have to admit that I don’t still fully understand the padding, margin, and borders.

I would love to have your feedback, and I am willing to receive any correction or comment.

Stay safe out there, best wishes.

2

Your form looks good @mikelmendibe99. There are some things you can revisit;

  • Run your HTML code through the W3C validator.
    • There are errors in your code to clean up
  • Don’t use <br> to force line breaks.
  • In your textarea, ‘additional comments’ should be a placeholder. Don’t make users delete.
  • Change the cursor to a pointer when hovering over the submit button
3

Design is hard, it needs to be learned and practiced just like coding.

  1. Your age label for attribute value does not match the related input id value.

  2. I would give the form a max-width.

  3. The width of the input elements in relation to the width of the form is a little disproportional.

  4. Give the textarea resize: vertical so the user can not pull it wider than the form.

  5. I’d give the form element a small border-radius.

Good job, keep it up.

4

Hello!

First of all, thank you so much for your review and the corrections, everything is so messy at the beggining, and they are helping me a lot.
I had some trouble when avoiding the <br>, but I think that I sorted it out.
I corrected all the errors and it looks like this:
https://codepen.io/Mikelevra/pen/KKddyyo?editors=1100

I will now go and try to correct the Tribute page (the one with the tank animation), let’s hope for the best! :smile:

Best wishes, and stay safe!

1 Like
5

Hello!

First of all, as I said to Roma, thank you so much for your review and the corrections, they help me a lot.
I corrected the errors, and with the small styling tips you gave me it looks much more natural (still weird, but more natural haha). :smile: https://codepen.io/Mikelevra/pen/KKddyyo?editors=1100

Best wishes, and stay safe!