Survey Form Mastering 😁

Dear FreeCodeCamp,

After countless amount of time and me giving up I’ve finally completed my Survey form. I’ve barely been able to make it responsive and I mainly have flexbox to thank for that. Please give me advice and be brutal. Should I have used CSS grid instead of flexbox or what could I do differently? How do people find such great website backgrounds? Any youtube channels or resources I should turn to? Lacking a mentor…

Thank you,
Jeffrey

https://codepen.io/jeffrey-lynn/pen/zbpJRz

Honestly doesn’t matter. Use whatever you feel more comfortable. When working with responsive design, you will find grid more useful though.

You can use a tool like this if you want gradient backgrounds. https://uigradients.com/#Horizon

If you are interested in hands on web designs with css. I recommend this channel.

2 Likes

I’m not quite liking the fact that in order to complete your survey I have to check every single checkbox or it won’t submit. That’s NOT the purpose of a checkbox.

You’re using <br> a lot. If you want to add spacing you should be doing this in CSS with either margin or padding.

1 Like
  1. The alignment needs some work. Making a nicely aligned form can be surprisingly difficult.

  2. You have vertical text overflow on small screens caused by giving elements a fixed height.

  3. You have the .button-container selector declared twice (line 72 and 99)

  4. The <label> element cannot be a child of the <ul> element.

You have:

<ul style="list-style: none;">
  <label for="dancesafe">
   <li>
     <input  type="checkbox" name="checkboxes" id="dancesafe" value="1" required> Allow Dancesafe to be on scene
   </li>
  </label>
</ul>

Should be:

<ul style="list-style: none;">
   <li>
     <label for="dancesafe">
       <input  type="checkbox" name="checkboxes" id="dancesafe" value="1" required> Allow Dancesafe to be on scene
	 </label>
   </li>
</ul>
  1. On line 69 and 91 you have closed the ul before the label, you have a few other mismatched tags. The best way to avoid this is by being very judicial about your formatting, always have clear indentation and nesting of elements.

  2. ‘value’ is not a valid attribute of the <select> element. On line 36.

<select id="dropdown" name="option" value="concertSobriety">

1 Like

Noted. When would be an ideal time to use < br>? or should I use padding and margin all the time? I have gone back and corrected the checklist.

  • I feel you on number 1, doing so has been my biggest hurdle at least terms of making it look really neat.

  • How would I correct number 2/ could you elaborate briefly…

  • Didn’t even realize the extra button container, I suppose it doesn’t hurt to go over your code one last time.

  • Number 4 was an internal question I had when I had began typing it out so thank you for resolving that and showing me how to properly format!

  • What would be an appropriate value for the < select> element. I do not have the clearest understanding of the value attribute.

Thanks for taking time to look at it. This was very helpful
Thank you!

For 2 just remove all the fixed hight declarations, use margin (and padding if needed) to space the elements. You probably have to do it per-element to make it look the same but here is a selector that at least shows what I mean.

#survey-form > * {
  margin-bottom: 40px;
}

The select element just doesn’t take a value, it is the child option elements that do.

1 Like