My fcc Survey-Form Project Feedback

Check this for me please, anything I need to improve on?

It would be great to have your feedback…!
Thank you!

https://codepen.io/Hopefyx/pen/jOrEEmr

1 Like

Hi @Hopefy, great survey form. However, there are a few corrections to make:

  • Your head element is not required. Instead, use the 'Stuff for ’ section in your pen settings.

  • Your body and html tags are also not required. The HTML editor serves as such. You should omit the tag.

  • Your textarea should have a set width so that the user cannot drag it outside of the form border.

1 Like

@Code_Camper thank you so much.

I will implement the corrections soon.
Thank you again.

Can let you know when I do?

1 Like

Hi @Hopefy!

I think your form looks good.

A few things.

  • There are some errors in your html. Run your code through the html validator. https://validator.w3.org/

  • There are some errors in your css. Run your code through the css analyzer in codepen.

  • I would add the cursor pointer to the submit button.
    {cursor: pointer;}

1 Like

Thank you so much.

I am currently working on another project, but I will be sure to implement your corrections as soon as possible.

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

  • As mentioned, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The test script would go right before the closing body tag. It will not work when placed in the head element. Codepen is forgiving which is why it works here.
  • Revisit the creating radio buttons lesson paying attention to the use of the name attribute.
    • currently in your form, any selection in II is removed when making a selection in III and/or V. That is the user is only able to answer one of those sections, not all three.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button
1 Like

link: https://codepen.io/Hopefyx/full/jOrEEmr
Please check this and kindly leave me your feedbacks.

Hey @Hopefy!

Your page looks good! There are some things to review.

  • The heading text is not clear to read. Try to Change the Color of the text to white.

  • The Text is too small to read in responsive mode.

  • You can add text at the bottom like “Made By @Hopefy

That’s my Feedback.

Thanks and Happy Coding!

1 Like

I have made changes, would you mind taking a look?
Thank you so much!

1 Like

I think for the text you can change into lighter color for the text and darker color for the background.

Your form is looking better @Hopefy. 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.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • This is not working for the first two radio buttons in question #2
  • Change the cursor to a pointer when hovering over the reset button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like

Thank you so much!
I couldn’t believe the errors, Codepen is so forgiving.
I have worked my way through them.
please take a look.
Thank you!

You’re welcome @Hopefy. Nice job cleaning things up.

I’ll say, codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.

  • The one for CSS is good. Use it and address the issue(s). I think it’s just a couple of typo’s that you have.

Thank you.

I see what you are saying, it’s done now

1 Like

Nice job @Hopefy. Look forward to seeing your next project.

1 Like

Thank you again.
You helped so much.
I learnt so much while cleaning up those codes.

1 Like