Feedback Survey Page "Lets know each other better"

Code Feedback
1

Greets from Milan!

Hope all of you are doing great. I finished my second project on Survey Page.
https://codepen.io/pavoninushka/pen/eYpQyaa?editors=1100

Please share your feedback and comments. They always help me to improve!

Thank you a lot.
Take care.

1 Like
2

Hi Galina, I’d like to offer a few thoughts/suggestions.

  • The pink text on the purple semi-opaque background does not have enough color contrast to be accessible. I think it probably needs to be white. And even the white text is hard to read in certain places depending on where it is placed over the background image. You may need to turn up the opacity a little the #main div.
  • Each of those underlined headers should probably be coded as h2 headings.
  • Generally, people like a little more structure/conformity in element placement. Try to line up the labels/text inputs under general info so they look a little neater.
  • The select drop down and textarea need a label. You can put the label inside of the h2 heading.
  • As I tab through the form with my keyboard I can barely see the key board focus indicator. Use the CSS outline property to make the focus indicator more prominent.
  • I would make the textarea a little wider and taller to give people more room to type.
1 Like
3

Your form looks good @Galina. I’ll mimic what bbsmooth said.
Another thing to revisit;

  • In the button declaration in CSS you have the width property twice. Could cause problems if you want to ever edit the wrong one.
1 Like
4

Hi dear bbsmooth.
I do appreciate your feedback a lot! Thank you so much!

Please see my comments bellow after each your suggestions:

  • The pink text on the purple semi-opaque background does not have enough color contrast to be accessible. I think it probably needs to be white. And even the white text is hard to read in certain places depending on where it is placed over the background image. You may need to turn up the opacity a little the #main div - I kept still pink but following your suggestion increased opacity
  • Each of those underlined headers should probably be coded as h2 headings. - done
  • Generally, people like a little more structure/conformity in element placement. Try to line up the labels/text inputs under general info so they look a little neater. - done
  • The select drop down and textarea need a label. You can put the label inside of the h2 heading. - done
  • As I tab through the form with my keyboard I can barely see the key board focus indicator. Use the CSS outline property to make the focus indicator more prominent.- In safari it works, as well I checked chrome. May be you could advise me how to make it for other browesers
  • I would make the textarea a little wider and taller to give people more room to type. - done

Thank you again a lot!

5

Nice job Galina. Everything looks real good except for the keyboard focus. To fix that, you would set the CSS outline property on the inputs. For example:

input:focus {
  outline: 2px dotted black;
}

Will set the outline to show as dotted black when the input has focus. Yes, some browsers have better defaults for the outline than others, so it may look OK by default for those browsers. But to ensure that every browser has a good outline you should set the outline property.

1 Like
6

Hi dear Roma.

Thank you a lot!

  • In the button declaration in CSS you have the width property twice. Could cause problems if you want to ever edit the wrong one.

Done!
Take care

7

Another challenge if you are up for it. Slowly narrow your browser as far as it will go and pay attention to the check box inputs. At some point the text for the last one (Friendly) will wrap to the next line but the check box itself will stay on the original line. You always want the check box and its label to be together.

Personally, I would use a CSS media query break point to rearrange the check boxes into one column for narrower view ports.

1 Like
8

Thank you a lot bbsmooth. Done - I used your advice (for sure with pink color :blush:).

9

Hi dear bbsmooth. :slightly_smiling_face:
I did it. I don’t know if I did it in the best way but I tried =)

Take care.

10

I think you should use a good font like montserrat, roboto, and many others are there you can pick them from google fonts.

1 Like
11

Hi dear codewithgarvit.

Thank you a lot for advice! I changed to roboto one :slightly_smiling_face: