Survey form (project)

Hi, this is my Survey-Form and I would like to hear some feedback. I was thinking maybe to put some picture as background or this is fine? Please help me make it better!

https://codepen.io/amaranthaST/pen/xxbGxgR

Thank you!

1 Like

Hi @amaranthaST, your form looks okay but there are things you need 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 project.
  • 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>’
    • I mention this because I see you have an opening html tag but no closing one. Just don’t include it. The other thing is you have a call to a font but I don’t see where you’ve linked it or imported it. The font family name should be in quotes and you should include a fallback font like serif or sans-serif
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since copy/paste from codepen you can ignore the first warning and first two errors. There are a lot of errors you need to clean up.
    • Review the lessons on creating radio buttons and checkboxes and how you nest them within their own label. You don’t group a set of radio buttons and checkboxes within one label. You can group the set of similar questions in a div or look into how the fieldset element works.
    • On a side note, is one the best or worse?
  • All styling should be external. I see one instance of in-line styling
  • Change the cursor to a pointer when hovering over the submit button
1 Like

Thank You very much I will do as You suggested!

“The other thing is you have a call to a font but I don’t see where you’ve linked it or imported it” <- Why I have to link it or import it, when it works?
edit: changed

“Font-family name should be in quotes” - I guess this is good practice? On examples like W3 I saw no quotes on some examples - https://www.w3schools.com/cssref/pr_font_font-family.asp .

1 Like
  font-family: "Palatino Linotype", "sans-serif";

You need to import “Palatino Linotype” font in html or css.
Right now your project is using sans-serif font, because it couldn’t find Palatino Linotype.

Not really, it is using Palatino: image

this is Sans Serif: image

they look similar really :slight_smile:

Anyway I will change it to something else and problem solved :smiley:

1 Like

If that is the case then Palatino is supported automatically. :smiley: :smiley: :smiley:
Try this with Roboto font, it won’t work because it is not supported by HTML and CSS unless you mention import inside css
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

1 Like

I know :slight_smile: On my other pen I have imported google fonts but here this worked…

1 Like

It may be that you have Palatino Linotype loaded on your machine and that’s why you see it. I don’t have it loaded on mine.

From the link you provided;
" Note: If a font name contains white-space, it must be quoted."

I said it wrong when I said the font-family name should be in quotes. I meant since the one you named had white space it should be in quotes. Not all font-family names need to be in quotes. So you would have something like;
font-family: "Palatino Linotype", sans-serif;

(Although realistically you’d probably choose serif because Palatino has serifs. I just wanted to show the difference between a font that has white space versus one that does not.)

1 Like

Thank you!

I corrected the mistakes you pointed out to me. I will be glad to hear further comments if any!