Need feedback: Survey Form from Scratch! I think i have dirty code!

Need feedback: Survey Form from Scratch! I think i have dirty code!
0.0 0

#1

Hi!! I tried coding a form from scratch (my inspiration is cloning google forms), but as i style it, it seems that my CSS and HTML is blowing up. Need feedback on how to make my HTML and CSS a clean code!!

here’s the codepen link:
https://codepen.io/jcunanan05/full/ERKmYg/

heres the github link:
https://github.com/jcunanan05/fcc-rwd/tree/master/fcc-survey

screenshot!:


#2

Looks really clean, neat simple and cool. very good. I think the colour scheme is very good.

using placeholders for input textfields, awesome, great.

Using a smooth shadow for the form, very cool.

Same associated the label tag for radio and checkboxes, very good.

In desktop, it looks very good! but for mobile? needs some more work.

I think the margin/padding for mobile(main form) is a little too much. Simply try width:100% instead of 80% for main tag, I think looks very good.

If combo box comes with no value as default could be great, by default student is selected, nothing(or one non selectable/disabled item like “please select” could be better)

You used retro way to control the text area size using cols attribute. please don’t. it breaks the layout for mobile and small devices. use css instead.

I suggest you add horizontal lines between each section in form, for example after and before radio button goup for example.

You used relative units in many css attributes (very good), and some absolute units for another(could be great if they be in relative too), using relative units are recommended.

I also suggest you center the submit form.

I see you set minimum width for top level body and html tag, please don’t, it breaks the layout for small devices.

Having more space between radio and checkboxes in mobile view is appreciated. in mobile it’s hard to tap on exactly element when they are so near each other. With some good spacing between them, you help the user tap easier.

I also think the space you left between the form and the footer is a little too much ,could be better if you make it less. but to be honest, I think it works for mobile(good to have this space).

Would like to see another update with some fixes and good changes dude.

Keep going on great work, awesome. happy programming