Survey form project - please be very critical

Project Feedback
#1

Here is my second project - the survey form:
https://codepen.io/btedds/full/QWGbqmN

Please be very critical, I would like to know how I can improve it.

Thanks

#2

Hmm, well.

The black text on the background is hard to read. Better contrast would be appreciated,

Text fields, buttons and other components could have styles to make the form more attractive.

Background moves when changing size of the last text field.

Form is not very responsive for mobile devices.

You could get some more pointers from running your markup through the W3 validator. https://validator.w3.org/

Best of luck!

1 Like
#3

I suggest that you add background-attachment: fixed,

1 Like
#4
  • Not all of your inputs have labels.
  • Don’t use <br> to create vertical spacing, use CSS (i.e. margin, padding, etc…)
  • Use fieldset/legend for the radio button/check box groupings.
  • Placeholder text should be used to give an example of the input you want the user to enter, not just repeat the label name
  • The form should be contained in a <main>.
1 Like
#5

Your form looks good @BTedds. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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.
  • User’s are not seeing your page the way you want them to. Most won’t have ‘Poppins’ loaded on their computer and you neither link to it (head element in HTML) or import it (CSS).
1 Like
#6

Brilliant feedback - I will look at every single point and try to improve it.

Thanks everyone really appreciated

#7

I have updated these, hopefully fixed any issues now. The rest I will look at another time (mobile issues & styling) but thanks for the feedback. It is really helpful.

#8

I am still not sure what labels do but i have done my best to make sure all my inputs have labels.

I have removed all the extra breaks that I was using and replaced them with padding and margins. That was tricky :laughing:

U have changed the checkbox to use [fieldset/legend] as suggested. Thanks for the link.

Placeholder text has been changed to examples and main has been added to contain the form.

Hopefully it is all improved at least but thanks for all the exceptional feedback - really appreciated :+1:

#9

I have no idea how to address this issue or make the page more responsive for mobile devices !

#10

@BTedds, to address the issue re: calling a google font family that has no link to ( head element in HTML) or import (CSS).

Was there a search result that came back that you didn’t understand?

In this lesson you were introduced to Google fonts maybe a brief review.

If you have questions, come back and tell us what you don’t understand.

1 Like
#11

I’m not sure if you are being facetious here but you should always try to understand why you are doing something. This will allow you to verify that the person giving you advice is actually correct and hopefully prevent you from making the same mistakes down the road.

Always, always, always be curious about what you are doing, and spend the necessary time to educate yourself until you feel you have a good understanding of the concept. If you want to do web development professionally you will be spending a significant amount of time researching and learning on your own so you should probably get used to it now :slight_smile:

So fire up your favorite search engine, type in ‘html label element’ and don’t stop reading until you can explain it back to me.

3 Likes
#12

Sorry I wrote that after 2 hours of trying to clean up my code! I am totally new to all this and trying to understand everything new I encounter is really tough.

But I know you are right I should always try to understand why I am doing something, it’s just that at the moment that means 5 minutes of writing code and then an hour of researching and learning.

But I did need the reminder that this is something I definitely need to get used to doing - so thank you.

I am going to start allocating some time each day to FCC but also an equal amount of time researching and learning all the things I am not totally comfortable with.

I really needed this… thanks :+1:

#13

Hello,
Overall, I think you have done a great job with your second project. Almost all have given the required suggestions for your project. I have no new thing as almost all have been suggested. I hope following these suggestions will help you a lot.