Hey guys im done with my second project

its a little bland but i’m fine with that. Could I get some feedback on anything that needs improving?
Here’s the link: https://codepen.io/E_athan/pen/dyMezRW

Take it with a grain of salt.

1)I really dont like max-width:500. It’s very very tight, don’t be afraid to use more space.
2)I don’t like the green background, it’s too bright. I don’t know about you, but if it was a real survey, i would feel very discouraged with completing it.
3)Name,Email inputs are tooooooo small, way too small. You can kinda see the problem where the suggestion box that pops up when you try to type something is larger than your input width.
4) Inputs have very annoying focus ring. This is a default outline, the reason for it is because when you apply border radius, your element is slightly rounded, while outline doesn’t care for it. I suggest using replacing outline with some slight border color to show user that the element is indeed focused. Border works great as it corresponds greatly with border radius.
5)Checkboxex and radio buttons - i’ll suggest making them side by side with flexbox, with checkbox on the left side and label on the right side.
6)Textarea should have less width and more height to look more like a box and placeholder text as well as text when user types shouldnt be in the middle
7) submit button should have the cursor:pointer applied

1 Like

@themilkman try using flexbox for this usecase. It will become a lot easier for you to layout your form fields.

1 Like

yeah, ill try doing that. thanks for the suggestion

@themilkman, not trying to be harsh but in the name, email, age, dropdown, radio buttons sections the only difference between the sample HTML and your HTML that’s apparent is the class name change from ‘form-group’ to ‘form-container’.
It’s best to start with a blank page and do your own code. Don’t try to replicate the sample pages. They are just examples of one way the project can be done. Each of the projects says “functionally similar” and “give it your own personal style”.

2 Likes