Survey Form, Opinions Please (Resolved)

https://codepen.io/jennifer-maldonado/pen/RwWaPwQ?editors=1100

I am trying to create a dropdown menu for the Hygienist names. I noticed that there were a few ways of doing this. One way that I thought was appropriate, was this “Option” that I am currently attempting on using.

Is this assumption correct? I am a little overwhelmed with my ignorance in regards to this matter, but I guess if I want to be self-taught I have to get use to the feeling. Or should I go and create an unordered list?

Thank you so much!

Yes, using select/option elements is a correct way and seems appropriate for the case. I would suggest adding an element with the question to be answered before the dropdown (i.e. What hygienist did you see?)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

I got it! Is there anyway you can give me any recommendations?
https://codepen.io/jennifer-maldonado/pen/RwWaPwQ

  1. You should remove the <style> element from the CSS. That is only used when adding CSS inside the HTML.

  2. The background image on the body is way too small to be used like you are, it’s basically just some pixelated colors. Use a different image or just use some nice color. Also, align: center is not a valid property.

  3. <heading> is not a valid element, you want the header element.

  4. The header text is not very legible on the current background image. Depending on the background image or color you have, you need to make adjustments to the text to make sure it has good contrast with the background and is easy to read. I’d also suggest centering the text.

  5. The Premier-logo image is fixed width and will overflow the page, make it responsive.

  6. You need to give the label elements a for attribute with a value that matches the corresponding input elements id. Or you need to nest the input inside the label. For the checkbox and radio elements, you have nested them all inside one label. That is not correct, each input element should have its own label with its own association to that label. There is no need for a <p> element inside the label element, just set the label to be display: block instead.

  7. Typographical elements should not be used as container elements, you are using an h3 as a container for an image and you are also using a p element as a container for some form element grouping. Use a generic container element like the div instead.

  8. Give the textarea resize: vertical so it can not be pulled wider by the user.

  9. Give the submit button cursor: pointer.

  10. Validate the HTML and CSS.

Read some articles on design and watch some videos.

Quick random list with focus on design/CSS
http://forum.freecodecamp.org/t/the-basic-principles-of-web-design-introduction

Thank you so much for all of the constructive feedback! When I first was going through all the mistakes, I felt like a dummy; however, I have to realize if I want to do this self-taught I do need to be open to corrections. I will be reading all of your recommended articles. Thank you so much!