Health Insurance Survey

[mikeben]

Would like some feedback
HTML/CSS, design, color choices anything wrong or out of place, please share.

https://codepen.io/mikeben/pen/YbbNMg

[saclark12000]

Looking good!

I’d put the h1 ‘title’ inside the div ‘form-outer’ (without the <header>).

I’d also give the div ‘form-outer’ more padding, maybe 15px so it would look better at mobile widths.

[mikeben]

Moved h1 into the form-outer and gave it more padding.
Thank you

[Roma]

A nice looking page @mikeben. Some things to revisit;

• in your checkboxes section a user can click on all of the labels to select except the ‘bipolar disorder’ label.
• change the cursor to a pointer when hovering over your submit button
• in CSS you have the color property duplicated when styling your submit button. One overrides the other
• it’s a nit but, if you’ve ever filled out a form on-line you may have noticed that required fields have an asterisk. If the field is not required, don’t mark it as such.

[lasjorg]

Looks good.

1. You have a mismatch on the for attribute and id on the age label/input. The id on the input should be age not number.

2. I would stack the form a bit sooner and probably center the textarea (remove the float on it) at that breakpoint.

3. I’d advise you to put a little more effort into your HTML formatting, it pays off in the long run.

[mikeben]

@Roma

• fixed the bipolar
• added the cursor
• removed the duplicated property
• added required and removed the asterisk where it made sense.
  Thank you very much

@lasjorg

1. Since the project requires number id, changed age to number instead.
2. Don’t see where the textarea has float.
3. Did try to tidy up the HTML, not sure if it is exactly what you were talking about though.
   Wouldn´t mind the push in the right direction of what good formatting should look like .
   Thanks for taking the time.

[Roma]

Very nice. And I just noticed this in your HTML;
<ul style="list-style-type: none;">

Do your styling in CSS.

[lasjorg]

1. Yep, sorry my bad.

2. Right, the float is on the .answer container, not the textarea element.

3. Well, now you are missing most of the indentation. If you press the down arrow to the right of the HTML code box and select “Tidy HTML” it will add back the indentation.

Let me give you an example of what I mean.

Your formatting now:

<div class="answer">

<ul>
<li class="radio"><label>
<input name="radio-buttons" value="1" type="radio" class="Gender" required>Male</label></li>
  
<li class="radio"><label>
<input name="radio-buttons" value="2"  type="radio" class="Gender">Female</label></li>
  
<li class="radio"><label>
<input name="radio-buttons" value="3"  type="radio" class="Gender">Nonbinary</label></li>
  
<li class="radio"><label>
<input name="radio-buttons" value="4"  type="radio" class="Gender">Other</label></li>
  
<li class="radio"><label>
<input name="radio-buttons" value="5"  type="radio" class="Gender" >Prefer not to say</label></li>
  
</ul>  
</div>

More traditional formatting (by hand):

<div class="answer">
  <ul>
    <li class="radio">
      <label>
        <input name="radio-buttons" value="1" type="radio" class="Gender" required>Male
      </label>
    </li>

    <li class="radio">
      <label>
        <input name="radio-buttons" value="2" type="radio" class="Gender">Female
      </label>
    </li>

    <li class="radio">
      <label>
        <input name="radio-buttons" value="3" type="radio" class="Gender">Nonbinary
      </label>
    </li>

    <li class="radio">
      <label>
        <input name="radio-buttons" value="4" type="radio" class="Gender">Other
      </label>
    </li>

    <li class="radio">
      <label>
        <input name="radio-buttons" value="5" type="radio" class="Gender">Prefer not to say
      </label>
    </li>
  </ul>
</div>

Auto formatting done by Prettier:

<div class="answer">
  <ul>
    <li class="radio">
      <label>
        <input
          name="radio-buttons"
          value="1"
          type="radio"
          class="Gender"
          required
        />Male
      </label>
    </li>

    <li class="radio">
      <label>
        <input
          name="radio-buttons"
          value="2"
          type="radio"
          class="Gender"
        />Female
      </label>
    </li>

    <li class="radio">
      <label>
        <input
          name="radio-buttons"
          value="3"
          type="radio"
          class="Gender"
        />Nonbinary
      </label>
    </li>

    <li class="radio">
      <label>
        <input
          name="radio-buttons"
          value="4"
          type="radio"
          class="Gender"
        />Other
      </label>
    </li>

    <li class="radio">
      <label>
        <input
          name="radio-buttons"
          value="5"
          type="radio"
          class="Gender"
        />Prefer not to say
      </label>
    </li>
  </ul>
</div>

---

Codepen isn’t super great when you have to write a lot of HTML, it can get a bit messy. I prefer to use an editor like VS Code with the Prettier extension installed, do the work there, and then copy the code to Codepen when I’m done.

Google HTML/CSS Style Guide
https://google.github.io/styleguide/htmlcssguide.html

[ConnerOw1115]

Wow! nice job!
Everything is styled really nicely!!