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 thehead
. (So in codepen, click on the Settings button and add it into the box labeled âStuff for <head>â). In CSS, youimport
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 thelink
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.
- 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
- 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
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.