Survey Form Project#2

Hello Campers. Feedback on my Second Project - Survey Form would be appreciated.
Thanks!

Hi @RajR. Your form looks good on a desktop. Some things to revisit;

  • There are two ways to call a font for use. In HTML you link to it in the head. (So in codepen, click on the Settings button and add it into the box labeled ‘Stuff for <head>’). In CSS, you import the font.
    • When you click on embed in fonts.google, there are two choices. Link by default and that’s what you copied. If you want to use import then click on the import link and copy that. You stayed on the link link. You can’t just add @import to a link and expect it to work correctly. I hope I explained that good enough.
    • As an aside, you only choose a weight of 700. Normally you’d choose 400 for regular font weight and 700 if you wanted to use the <b> tag to make something bold.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are a few errors you want to clean up.
  • Make your form responsive. Things fall out of the container on smaller screens.
  • Change the cursor to a pointer when hovering over the submit button.
  • Make the submit button look like a button instead of a bar.

Now about that 25% off my next bill :slightly_smiling_face:

Edit:
Couple of additional thoughts. You also have “Comic Neue” linked but you never use it. While “Baloo Thambi 2” doesn’t have an italic font, “Comic Neue” does but you have to add it.

1 Like

Hey @Roma ,

Thank you so much for reviewing my work once again. I appreciate your honest feedback. It helps me learn a lot in the process of fixing .

Here’s what I have fixed:

  • I went into the google fonts embed and picked the @import url instead of the link. The correct font is showing now. I picked the Regular 400 as suggested. Please confirm if this is the standard for any font!
  • I cleared the error message for using <p> tag on labels.
  • Removed the errors on using duplicate ids by turning them into classes.
  • Changed the cursor to a pointer on hovering the submit button.
  • Used active pseudo class and added transform animation to create pressing effect for the submit button.
  • I tried my best to make my form responsive to phones. I am not sure if I did it right but I cant get some of the elements to work as well as on the big screens.

Please advice.

Move your media query down to the bottom so things don’t get overwritten.