What do you think of my FCC Survey Form?

I have to stop looking at this thing! :laughing: I’m passing all the tests, finally. I was able to do a few fancy (for me) stylistic embellishments, but I am still not 100% happy with how it looks. One thing I may play with is the font-style. Also, I don’t know if I am in love with everything being centered. I created my first flex-box for my radio and checkbox fields, and it’s not AWFUL (or maybe it is, idk). It serves the purpose at least.
If you have any suggestions, I would welcome them! Thanks!

Book Suggestions

2 Likes

Hi @micha.ella !

Congrats on finishing your second project.

I think the text can be a little bit bigger so it is easier to read.

I would keep working on responsiveness for mobile.
Right now the textarea and checkboxes spill out of the container.

I think you should add a cursor pointer to the submit button.

You have a couple of errors in your html.
Run your code through the html validator

Keep learning and coding :grinning:

2 Likes

It does look good, well done!
Don’t worry about keeping looking at it. I actually submitted all my projects a month ago but I still go back to them occasionally and improve little things (usually when I’m fed up of being stuck on the javascript course which happens every 30 minutes). So you can submit them but still continue to improve them when an idea pops up.
As for centering it’s usually good but when things are all different sizes can sometimes look a bit jumbled. I centered my inputs but I also made them all the same size to try and keep them in order.
One thing I would perhaps look at is that as the screen shrinks some of your inputs start to move outside thier container as the container is responsive but the inputs are not. On the other hand if they were responsive they would get very small as screen shrinks.
I might put in a media query and make the input container wider at smaller screen widths whilst giving the inputs some responsiveness.
Whatever you have plenty of time to finesse so for now give yourself a pat on the back.

2 Likes

Your form looks good @micha.ella. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
2 Likes

Thank you. I am looking at the W3C validator, and these error messages are confusing to me. They seem contradictory, but maybe I have the “form” tags in the wrong position?


If you could shed some light on this, I could use some. Thank you!

Hi @micha.ella ,

Your page looks extremely great!. Congrats on finishing your project. :+1: :grinning:

The error you are in the W3C validator is because you are closing two <div>(closed </div> tags) before the <form> tag. You should be calling it after the <form> tag.

Just have a glance through your code, I hope you get my point.

2 Likes

Ahhh! Thank you! I get it now, and I’ll be more alert to making this type of error in the future. I think my code is in good shape now! :hugs:

1 Like

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