Completed the Survey Form project on FreeCodeCamp.

I spent more time today finishing the styling and working out how to get the spacing more even and symmetrical.

You can view this project on my CodePen.

What I learned

• Most of my work today was getting the name, email, age and comment boxes to line up so that they were all the same width.
  • I used a input[type=""] selector and the id selector on the comments box to change their width to be 50%, which lined them up correctly.
• I also wanted to make the radio buttons line up correctly – previously they were centered in the right-hand column, and had the radio buttons on the right-hand side of the label rather than the left.
  • To fix the radio buttons, I looked back at some of the code I wrote in the HTML Forms course on Treehouse. I compared the code I had written on the radio buttons there, with what I had, and used that to change and correct it.
• I added styling to the Submit button, and updated the white background so that the h1 tag and the description would sit inside the white background (I think it looks better!).
• There are a few CSS styling changing the background colour and width, so to see what was changing the size of each part, I changed each one to a different colour. This really helped me to get a better idea of what was going on in each section of code (rather than putting them all as white) so I will do this again in future!
• I also added the minimum and maximum age to the Age box, to pass the final test.

I did find this quite challenging compared to the landing page (hence why it took longer) – especially getting all of the styling right. I think if I ever wanted to do a longer contact form or survey like this again, I’d use a service like SurveyMonkey that is free and already set up to quickly make these sorts of forms, but it is useful to know how to do it from scratch – especially if, for example, a client wanted the form to be embedded on their website and styled in their own branding.