Hello Everyone.
Finally managed to complete the Survey Form project. I have created a repo here
And the survey form is hosted on github pages here → Survey Form
Still a long long way to go. Comments/suggestions would be really helpful.
Thank you!
6 Likes
Hey, it looks good!
I really like how the button changes when you click it, well done 
Since you asked for comments and suggeststions, I have two:
-
see how it looks on a mobile devide - I think it doesn’t have enough room at the top, it’s too close to the border.
-
your input fields are overflowing the container, like this:
there’s a fix for this: box-sizing - CSS: Cascading Style Sheets | MDN
2 Likes
Thank you
Tried opening the form on a mobile and yes does need the changes. Thanks for sharing CSS box-sizing link.
2 Likes
Hi @janhavi04n
This is my feedback, take this as a few ideas, it might help or not, remember that the final decision is yours. 
You html needs a lang attribute because accessibility and SEO. Better work with browsers not against it.
Your head needs:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to look better in smaller devices and not like a tiny page inside my phone. 
It think is better to put our css as the last link, just in case you want to use an external one; to make sure that everything is load if your CSS stylesheet needs to use it, Google Fonts for example.
Right now it seems like body doesn’t need width and height because its content is bigger than does dimensiones, check if you need those CSS properties, maybe just max-width: 100vw; it would be enough at the end. It depends of your final layout.
I think your h1 will look better with a bigger font-size and your page sections could have a bit more spacing between then (more white spaces). After spacing your fieldsets maybe your bottom lines won’t look good enough, consider outline CSS property to get the same design or the ::after pseudo element to create that line, for example.
Your fieldsets should use legend tag instead label one.
Finally, your submit button should have a color that stands out; it is a call to action so everyone should see it at first look.
About colors… be consistent, try to use the same units throw your page. Better don’t use keyword colors. Also I think it is better to use colors similar to black or white, but not those ones.
Related with colors: remember to check if your text is easy to read. Consider contrast, fonts, line-height and word-spacing and word-break, for example. Don’t forget to google things like html checker, css checker, accessibility checker or contrast checker. Here you have the WebAIM Contrast Checker, for example.
I hope this helps.
Great job Janhavi!! Your nearly have got it.
Happy coding!
3 Likes
Thanks Carlos T.
Busy week ahead but looks like my weekend is sorted now. Got some pointers by Dominika Wojewska as well.
Lots to read and understand but enjoying learning html and css.
3 Likes
This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.