Second project finished: Survey

Code Feedback
1

(Pen link to Survey page below)
I made a long intro post when I joined. Short version, I am older and trying to learn to code. I finished the Tribute page and did not understand why I was doing a lot of what I was doing, and did not get why I was having to use id="!!!" (among a lot of other things) and so on. I was irritated that I could not remember all of the information had been studying and reading the last few weeks. (Which I know is impossible to do anyway).

But through the Survey page, it began to make some sense to me. I now understand a lot of the attributes a lot better and I see that it is doing again and again which will make the whole thing make more and more sense after enough repetition.

I am starting to ask myself “But how can I make it look like ???” Which I think is good. I tried to make my survey page look similar to the example in the challenge. I looked at the pic and wanted to answer questions like “How can I round the corners and style all the fields in the form?” (got that one) or “How can I style the BG image more like I want?” (Didn’t get that one the way I wanted, but I got some good advice and realized that that is more of a bridge too far right now, but on the list). But I am trying to sort of copy a look and then I need to ask myself “How can I make mine look like that?” and that is my present strategy. I do NOT just want to pass the requirements. I want to learn and solve all of those “how do I do that’s?” (Hmmm, not sure how to write the plural of “how do I do that”…??

I need to organize my code. I am not sure how to but I will do some research. My next project should include more than just what is required, and #1 priority (other than the regular requirements) will be to organize my code to a more comprehensible read. In this pen it is pretty sloppy…

Pen: https://codepen.io/Fletchdad/pen/zYKRrgN

Anyway, project 2 done and I thank everyone in advance for any feedback.

I am using < br > 2-3-4 times in a row in this pen. Is this standard or when I need a little more space should I use padding/invisible border instead or can this be answered as a one size fits all?

2

Your form looks good @studiofletch. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The test script is JS. In full code that includes the boilerplate HTML tags it would be placed right before the closing body tag. It will not work correctly if placed in the head element. Codepen is forgiving.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • There’s a typo on the “pop” checkbox that prevents this
  • User’s should not have to delete text in the comments section when they choose to make a comment.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

As a suggestion, rather than using dashes to offset revisit this lesson. It’s not just for radio buttons.