Survey form - really appreciate feedbacks

Code Feedback
1

https://codepen.io/jude-create/pen/abZXQyy

I will really appreciate your feedback

1 Like
2

Hello! Good work ! i just have some remarks
First of all add this one to your code so you can see if you passed the tests correctly

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Secondly, in my opinion i guess it’s better to style the input types as well as the checkboxes and radios and put them bigger a bit . Also it’s better to have each part on a section so the page will be ordered and styled better.

3 Likes
3

Thanks really appreciate

1 Like
4

Welcome to the forums @jude-create. Your form looks good. Some things to revisit;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • 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)
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
  • 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.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens

Your design is your design but;

  • maybe rethink the tiny size of the submit button and make it larger
  • dark blue on black is hard to see. there should be more contrast
  • contrary to what it says, not all fields are required
1 Like
5

thanks @Roma made it better

6

Nice job cleaning things up but there are still some things you should revisit @jude-create;

  • Run your HTML code through the W3C validator again.
    • The two errors are easy to correct
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • This course is about responsiveness
  • As previously mentioned, change the cursor to a pointer when hovering over the submit button
7

Hi @jude-create,

your work is good but I recommend some details.
First of all, know that we are designers and therefore we have to give an impressive style to all our works.

Second, you need to review again and correct your code because you did not pass all the tests.

8

@jude-create Welcome. Good job on your project.

Here is my feedback.

I would say that you need to

  • Fix the overlap of text here.
    screenshot
  • The mobile version has too much spacing at the sides.
    screeeenshot
    screeeenshot345×684 52.1 KB
  • The input field for the phone number is not validating properly. You can see that by the red outline.
9

thanks, i hope it is better now

10

Some things to revisit @jude-create;

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator (linked earlier)
    • There is an HTML coding error you should be aware of and address.
    • This <div class"form-box"> is not the way to set an attribute. You did it correctly two times before this one.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Read the links in the previous post about proper use of <br>
    • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
  • As previously mentioned, user’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
    • Revisit the lessons on adding radio buttons and checkboxes and note how you’re able to toggle when clicking the label
  • As previously mentioned, make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • This course is about responsiveness