2nd html/css project: survey - Your feedback is much appreciated!

Hi everybody!

After making my tribute page I decided to have a try at making a survey for some fictional company.

Currently I am learning about CSS flex and grid. When I made this survey I did not know of these subjects yet but I wanted to make something anyway. So not all of the curriculum has been applied here and I think I will make another survey when I have finished the responsive web design curriculum so I can really apply all I know.

In the meantime your feedback is very much appreciated so I can learn more!

Survey: https://codepen.io/mpavcell/full/ZEGXbEE

I have some questions for those willing to answer:
As you may see I have had some problems getting the textbox to work and I wonder what I am doing wrong (it writes in the middle of the textbox and the cursor does not return to start a new line when reaching the end of the textbox but instead keeps writing on the horizontal line).
Also: I write my code originally in VScode (then I copypaste it to codepen to place it online). Problem I had is the following: when I open my html in firefox to view my output in a browser everything works splendidly. When I open it in chrome none of the photos load. What would be the problem with my code here and what can I do to fix this?

A bit of a long post. Thank you very much for your time!

Mpavcell.

I was hoping to be some help on your textbox, but I’m too new to figure it out. I also don’t see your images when using Safari.

But, I think you’ve done a great job with all of your questions. I’m assuming that you didn’t type out that entire list of countries. Where did you find it?

1 Like

You forgot all the <label> tags for your inputs. Those are very important for accessibility.
Also, you should use a fieldset for all the radio button/check box groupings:
https://webaim.org/techniques/forms/controls#radio

1 Like

hey! Thanks for the reply!

I actually did not forget my label tags. I had a label around every individual input. However these inputs are ordered as a list, and when I ran my html through a validator to check for errors it replied something to the effect of label tags not being permitted inside of a list element. I just deleted them but I suppose that’s not a proper solution either. I’ll see what to do about it!

Regarding fieldset - I 'll take it into account for the next survey I’ll be making. Thanks again for the input!

@terrifricker

A quick google " select country html code" got me there. :slight_smile: https://www.technicalkeeda.com/html-tutorials/all-countries-drop-down-list-in-html

1 Like

Yes, you cannot use labels inside a list. The solution is to not use a list to display the radio button/check boxes. Use fieldset instead and CSS to create the line breaks needed.

1 Like

Thanks for the help man!

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 15/17 user stories.
    • The test script should also be there when you submit your projects.
  • We don’t have access to your Google acc’t so we don’t see the logo. Maybe consider hosting it on GitHub.
  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
  • If you’ve ever filled out a form on-line you may have noticed that the asterisk denotes a required field. You have asterisks by four fields but only three are required.
2 Likes