FCC survey form - feedback please

https://codepen.io/klarissawitania/pen/GRjxvvE
the checkbox part was kinda a mess… I tried to make it to 3 equal parts/columns but I couldn’t. I’ve tried using display: flex but it didn’t work. so I ended up having it centered, tho it was not bad but I would like it better if it was tidier.

For your checkbox you can use display grid like so.
{ display:grid; grid-template-columns: auto auto auto; }
but since you did not set your container width you will have to adjust the width manually and do margin:auto; then in your @media you could add checkbox{ grid-template-columns:auto; } so there will only be 1 column.
and u can change grid-template-columns depending on how many column you want.
Your header dont need to be in the main section. Normally the 3 big thing in the body is <header><main><footer> then you put things inside these.

1 Like

thank you for the feedback :slight_smile:

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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 chevron 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).
    • (The one for HTML misses things which is why I recommend W3C)
  • 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

thank you for your feedback

Hello Guys,

I am actually doing the second project i.e the survey form and i am stuck with the last test which is the button submit

i have tried<button type="submit" value="Submit">Submit</button>

and<input type="submit" id="submit" value="Submit">

but nothing works.

Any help from you guys will be most welcome.

@yousoof, if you’re having an issue please open your own topic and ask.
Quickly though, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.