Day 8

The Survey Form, with a central white background and better styling - comment boxes line up now!

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.