Beta survey form-feedback please

Code Feedback
1

I appreciate all your feedbacks, thanks in advance.

https://codepen.io/zoey1988/pen/oEwgxB

1 Like
2

@zeinab88 Great form! :stars: All of the fCC tests pass and your form looks and works fine on all viewport widths. I think this is a great form! :tada:

  • Low Color Contrast: The top Survey Form heading color has a contrast ratio of 1.17:1. The ratio for that size text is supposed to be at least 4.5:1. I like to use ColorSafe.co to find colors that have a high enough contrast ratio.

  • CSS ID Selectors: Even though some may disagree, a common CSS opinion is to avoid using ID selectors whenever possible. The ID Selectors section of Interneting is Hard has a short and simple explanation of one of the reasons:

    The problem is, if we wanted to share this style with another button, we’d have to give it another unique id attribute. … For this reason, ID selectors are generally frowned upon. Use class selectors instead.

  • Form Labels and Fieldsets: Most of your form labels are correct. However, a few of them are not associated correctly with their form elements/controls. Here are the form labels that have problems:

    • Gender label
    • What languages and libraries are you good at?
    • The text input after other doesn’t have a label

    Those two sections should also be enclosed in fieldsets, as we learned about in the beta curriculum: Wrap Radio Buttons in a fieldset Element for Better Accessibility.

Other than those relatively minor issues, I think you’ve done really great work on this! :sunny:

1 Like
3

@camper Thanks for your kind words and invaluable feedbacks, :slight_smile:

number one: done :white_check_mark: (i was too lasy to check the contrast!!! :sweat: )

number two: :white_check_mark: I always try not to use IDs as you suggested me before, except for passing the tests. Now i know you mean in CSS.

number three: done :white_check_mark:

1 Like