Hey there,
https://codepen.io/nella1a/pen/jOmQNGo
Have just completed the survey form.
Looking forward to some feedback.
many thx,
2 Likes
Hey, nice job! The first thing I check on these is if every input has a label because usually they forget the label for either the select or textarea, but you got them all!
Responsiveness is pretty good except that I have a persistent horizontal scroll bar no matter the browser width. Granted, it doesn’t scroll very far but I still think you should eliminate it.
Also, on very narrow widths the blue box seems a little too skinny and the content feels cramped. I would reduce the green side padding on narrow widths so the content has more room to breath.
Last thing, the light text at the top on the green background is too hard to read and is technically not accessible because there is not enough contrast between the colors. You can use the WebAIM contrast checker to make sure your color combinations meet minimum accessibility standards.
1 Like
@bbsmooth
thank you for your feedback. I narrowed down the widths for small screens as advised, changed the color of the heading in order to increase the ratio between background color and color and also removed the scrollbar.
Is there anything else that I could improve? 
1 Like
This is pretty solid, so I’m going to nitpick here a little 
The placeholder text is probably a little too feint to be readable (at least it is in my browser). You can use the CSS :placeholder selector to darken it up just a bit. Is this something that needs to be done? Personally, I think the placeholder text is really not needed (but I understand if it is a requirement for the project), so not being very readable is not going to keep someone from being able to fill out the form. On the other hand, if you are going to have text on a page then it should probably be readable or what’s the point, eh? Personally, I almost never use placeholder text as it usually doesn’t add too much value. If there is important information that needs to be communicated to the user then it should not be in the placeholder in the first place. I do however use the autocomplete attribute wherever possible because it is much more useful and helps with accessibility.
The other thing I would encourage you to consider is using em units for your CSS break points and on any elements you need to add a width/max-width (for example, the form element). You can easily convert from px to em by dividing by 16. The reason for using em is that it will make your page responsive not just to changes in view port width but also changes in text size. Users do have the ability to change the text size they view your page with. I’m not referring to page zoom in which everything on the page gets bigger, but text only zoom in which only the text gets bigger. Granted, the default zoom method in browsers is page zoom and I think most developers only concern themselves with that, so I know I am in the minority opinion here. But since browsers do allow for users to do text only zoom then I think it is considerate to take that into account by using em units for break points and widths. I don’t think it’s that hard to do (I’ve been doing it for years with everything I build) and it really embraces the accessibility principle of allowing your content to be responsive to the user’s needs. OK, I’ll get off of my soapbox here, just something to think about.
Again, great job with this. Look forward to seeing your other projects, especially once you get into the frontend stuff.
2 Likes
Thanks a lot for your feedback! I really appreciate your time and help
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.