Please Check My Survey Form

Code Feedback
1

Give me your feedback on what to improve:

2 Likes
2

Hi!
You could add some colors to your text and styles to the button at the bottom.
Besides that, form looks nice to me

1 Like
3

Hey there,

nice to meet you!

Great job so far! :clap:

My ideas:

  • when you use codepen, you only have to add the code that belongs into the body; so you can remove your starting <html><head>...</head>; below you added a <header>...</header>: this part belongs into to <body>, so you have to move it; you should also remove <body id="main">, because you only need one body.

  • after you (re)moved this stuff, your code should look similar to this:

Screenshot_2020-08-17_09-21-28

  • you can get a code validation here by pasting your HTML code into the body; you will see a lot of errors, BUT most of them are only the same recurring error (the <br>); but I think you are able to fix them!

  • after you fixed the errors, you can increase the readability of your code by 1. clicking on the small arrow on the right side of the code box and 2. clicking Format HTML/CSS

  • when I decrease the width of my browser, the content gets cut off; this is important for people who read your page on a smartphone

Feel free to ask questions and keep up the good work!

1 Like
4

Welcome to the forums @seveeeen. Your form looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
    • As an aside, this </br> is not valid HTML
  • Users should be able to click on the label to select, not just the radio button / checkbox.
    • Review the lessons re: creating sets of radio buttons and checkboxes
  • Change the cursor to a pointer when hovering over the submit button
  • 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, there’s something to clean up.
    • The one for HTML misses things which is why I recommend W3C
  • As previously mentioned, codepen only expects the code you’d put between the body tags. You have elements out of order.
  • As previously mentioned, once you clean up your HTML, run it through the W3C validator and correct the HTML errors
  • As previously mentioned, your form needs to be responsive. Content falls out of the container on smaller screens.
2 Likes
5

Here’s an advice. After you have finished your page, visit it via phone.

In this case, parts of your page should adept to phone screen width using @media (max-width: …) …

Keep up the good work!

1 Like
6

thank you so much i would try my best

1 Like
7

Congrats for finishing the project.
Looking good in widescreen.
You may need to work on the width of form elements for the smaller screens.

1 Like
8

Yours is sure nicer than mine.
https://codepen.io/Hopefyx/pen/jOrEEmr

9

@Hopefy, if you’d like feedback on your page please open a new topic and ask.

1 Like