Coding Survey Form. Please give feedback

I’ve restarted freecodecamp to get a good review and I’ve gotten a lot more experience with programming. I’ve made this survey form:

Here is the Github link:

Thanks to @usaspiff for helping me fix the thirteenth test.

Any and all feedback is appreciated.


It looks like the user story #13 doesn’t pass because the radio buttons “Yes”, “No” and “Maybe” in the “Would you recommend freecodecamp to a friend?” section don’t have a value input, only a type and a name.
Try to add a value input set to their field for each one and see if it works.
You can check out this link if you are stuck:

Good luck!

1 Like

Thank you, @usaspiff

Now a github view is available.

Your page looks good! :clap:
It’s responvise

  • Only ‘Would you recommend freecodecamp to a friend?’ answers have some problems on smaller screens. I would use flex in this case, I have no simple idea for you without it yet, not enough experience :sweat_smile:

  • Try to use ‘Tidy’ option, it’s easier to read code if you do that:

  • I don’t think using <br> for spacings is a good idea
    You can use container like <section></section> or just <div class="container"></div> and then add margins to get the same result. Use any approprierate name for that class

  • That <span>....................</span> from there:

<input type = "checkbox" value = "0">HTML <span>....................</span>
CSS<input type = "checkbox" value = "1"><br>
  • can be replaced by sth better. Try using classes: class="checkbox-left" and class="checkbox-rigth" and then add some margins to them
    You could also use CSS Flex / Grid

  • Add more space for the footer, it collides with submit button on small screens

Your page is really well done so far :star_struck:
Happy coding!

1 Like

Okay. I’ll try my best to do what you asked. The checkboxes had to be aligned that way with invisible rows of periods because I don’t really know any other way to align them. I’ve tried like fifty times and failed every single time except when I did it like that.

I’ll try using section tags to space things out.

Yeah. Responsiveness was one of my enemies when I started coding. I always resize the editor to see if it works. I will tidy my code.

Thanks for the feedback.

1 Like

I did it that way
It’s my own project. I could fix some things there, but maybe later :stuck_out_tongue:
What important is this:

<div class="grid_wrapper">
    <input type="checkbox" id="action" value="on">
    <label for="action">Action</label>

    <input type="checkbox" id="adventure" value="on">
    <label for="adventure">Adventure</label>

and this:

.grid_wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr) );

Just set different values in minmax() function and use margins or max-width attribute

For reference:
repeat() on MDN
CSS Grid guide