Build a survey challenge

Code Feedback
1

https://codepen.io/m-mohamud1/full/QWbqoNY

Hi so its day 12 in my coding journey and I have completed my “Build A Survey Form” project and although i have added all the required code I am not very pleased with the aesthetics of my project any constructive criticism and feedback will be much appreciated.
Many Thanks,
Mohamed

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form

3

Thank you so much for the feedback and the “colorhex” link which I will definitely be using on a regular basis. I think I will move on and improve it before I begin my portfolio as you recommend

4

I’d say with 12 days of learning you did pretty damn great.

  1. Make sure you have connected the labels and inputs correctly. The for attribute value on the label should match the id on the corresponding input.

  2. Do not use fixed dimensions on elements, use max-width/height and relative units like % and vw to keep everything responsive.

  3. Give the inputs some padding to make them a bit bigger.

  4. I would increase the font size a bit to make the form a little more accessible.

  5. Add resize: vertical to the textarea and cursor: pointer to the submit button.

Keep up the great work!

1 Like
5

Wow thank you I think i’ve caught the coding bug as it seems to be the only thing I can think about and in regards to your points I will make all those changes right away

6

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

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • There a errors you need to clean up.
    • Note that it’s just <p>…there are no such elements as <p1> <p2> etc
1 Like
7

Thank you the W3C validator has shown me many errors which I am currently fixing.

8