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 theid
selector on the comments box to change their width to be 50%, which lined them up correctly.
- I used a
- 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.