Survey Form Mastering šŸ˜

Code Feedback
1

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

2

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
3

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
4

  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
5

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.

6

  • 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!

7

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