Workplace Survey Project

Code Feedback
1

My second project. I still have some work to do with its responsive design.

https://codepen.io/BenCasson/full/ZEbMLGv

1 Like
2

I’ll give you a few things to work on:

  • You need <label>s for the select drop downs, check boxes, and textarea
  • Get rid of all those <hr>s. Use CSS to create vertical space between elements.
3

Hey thanks for the feedback! Just for my own knowledge, what is the difference between having a for those things as opposed to just including the text between the opening <> and closing </> ? Does it change a lot with css and other stuff like js down the road? My radio options (which all have s) appear to display about the same as my check boxes, for example. Also, I used

s simply because I couldn’t figure out a good way to create space between the label and input (I tried padding and margin stuff, but those didn’t work), and saw someone online recommend them to someone with the same problem.
4

I’m not sure I understand your first question. Can you give me a specific example? Also, if you want to include code examples in this forum be sure to wrap them with three back ticks on each side.

For the vertical spacing issue, you can definitely do this with just CSS (no need for <hr>). Let’s look at your radio buttons for example. You are wrapping them with a <label>. One way to create vertical spacing would be to set the display on those labels to block and then add a top margin whenever a label is proceeded by a label:

label {
      display: block;
}
label + label {
      margin-top: 1em;
}

This is just an example of how you can use CSS to create vertical spacing between inline elements.

5

Some things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There is a coding error you should address.
  • Users should be able to click on the label to select, not just the checkbox or radio button
  • Don’t use <br> to force spacing or line breaks. Use CSS
  • Change the cursor to a pointer when hovering over the submit button