First Survey Form Attempt (Feedback is welcomed)

Code Feedback
1

Hello everyone!

How are you? Hope you are doing well today.
This is my first finished attempt on making a survey form using a simplistic design with a restaurant-themed webpage. Feedback and further improvements are appreciated.

(some fonts are cursive)

Editor view: https://codepen.io/xolarized/pen/GVjPoo

Debug view: https://s.codepen.io/xolarized/debug/GVjPoo/jVMpoyePqZnk

Full view: https://codepen.io/xolarized/full/GVjPoo

Thank you.

2

Hi @plethoire,

  • Your form looks okay but only passes 13/17 user stories. Keep the tests when you fork the pen and make sure you pass all the user stories.
  • For the radio buttons (and when you do add the checkboxes) make it so the user can click on the button or the label.
  • You header points to a different pen. If the code is the same, good. If not, you may get feedback on a form you weren’t expecting to get feedback on. Plus you have to remember to make changes in both of them.
  • make your form responsive. On smaller screens things overlap each other.
  • don’t use the <br> element. Use margin and/or padding in CSS for styling.
  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • no need also to use the <html> or doctype tags
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in CSS you have a selector twice. Move the content from the bottom on to the top.
    • In HTML you have duplicate id's. They can be used only once. If you need to style something multiple times use class.
4

Hi @Roma,

Do you mind if i asked you a screenshot of what you saw in smaller device your (like the overlaps shown)? I tested this site in debug mode using an iphone 5 and the site was responsive and none of the screens were overlapping. Thanks, it would be a pleasure.

5

Hmmm… I can only check one checkbox out of all of them.
I think you gave them all the same name.

Hint

You gave all of your input radios the name “Quality”.

For the first set of checkboxes, give it a name like “FoodQ”
And the second set a name like “DrinkQ”
and so on.
The names have to be different for each set, or I will only be able to select one checkbox out of all of them.

6

Alright, thanks for the clarification of the input radios of this project.

7

Your welcome. Always glad to help

8

HI @plethoire, here’s the screenshot…

58
58322×595 69.2 KB

9

Hi @Roma,

I have fixed the overlaps and padding towards the project using a media query. I hope the layout is more responsive now.

Thanks.