Project 2: Build a Survey Page - Completed

Code Feedback
1

Tell us what’s happening:
Hi. I just completed my second project, the survey form. I passed all the 17 user stories, I just wanted to get feedback from real people before I move on to the third project. Be as brutally honest as you can, thank you!

Your browser information:

Challenge:

Link to the challenge:
https://codepen.io/mastercoder92/pen/mdOPdod

2

The font size in the select fields is quite friendly towards really really short sighted people, but maybe 100px-200px is a bit much, it also kind of ruins the layout :smiley:
(I think you mixed up font-size and padding a couple of times)

Also, instead of this: margin: 0px 400px 0px 410px;, it’s much better to use margin:0 auto. Imagine what happens on a smartphone with 360px width, and you give an element a margin-left of 400px…

You can also drastically increase responsiveness if you give your <form> a max-width of maybe 500px, center it with margin:0 auto, and all the inputs inside get a width of 100% (or 90%) and again margin:0 auto to center them.

Now for the form elements, it’s always a good idea with radio buttons and checkboxes to nest the input inside the label, or to use the for attribute, either this:

<label>
  <input type="checkbox">
  label text
</label>

or this:

<label for="my-checkbox">label text</label>
<input id="my-checkbox" type="checkbox">

That way, you can click on the label and it’ll check the checkbox. Right now, you have to exactly hit the tiny box to check/uncheck a box.

You also have some HTML errors (<input type="birthday"> is not a valid input type, for example). You can run your code through a validator like this: https://validator.w3.org/

Last issue - you use a lot of <br> tags for spacing between the inputs. That should rather be done with margin-bottom.

But on the plus side, that’s a good clean design, and the text is readable even on the image background.

3

Thank you so much for the feedback! I made the changes and I made it look MUCH better on the smart phone with media queries. I couldn’t figure out how to break lines of the radio buttons and checkboxes without using br, as margin-bottom doesn’t line break. Here’s the updated link. https://codepen.io/mastercoder92/pen/mdOPdod

4

HI @Stampflmail92 !

I think your page looks good.

Just a couple of things that I noticed.

The big tag is now obsolete.

  <header id="header"><big>Massage Survey Form</big></header>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big

Also it would be nice if the submit button had the {cursor: pointer;}

As for the br tag issue you can create space between elements using the margin property. Since labels are inline elements you have to set them to display block. You can do the same with the inputs. Now you can ditch the br tags :grinning:

label {
  display:block;
  margin:40px 0;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

5

Hi, thank you so much for the feedback. You gave some unique tips that I never knew before, like the big tag obsolete and the cursor pointer- I loved that! I made all the changes you suggested. I did what you told me about the margins and display block and it worked! but also, I created little classes such as for the “no” radio button and did more margin spacing that way and it worked out nicely.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.