Survey Form "Hobbies"

This one took more work to get it looking decent. More elements to deal with.

Had some issue with the checkbox and radio buttons not activating when clicking the label. Maybe related to the lack of id attribute…still not completely sure. But it’s working now.

Used bootstrap on this page, but didn’t really use it beyond the default changes it makes.

So far as I can tell it’s responsive. Any thoughts?

Also, I see most people submit from code pen. Is it preferable for feedback? I like working locally and then just getting it on GitHub, but I’ll get it on codepen if it’s better for the forums.

Thank you.

Hey Ricardo,

nice to meet you! :wave:

Great job so far! :clap:

My ideas:

  • all tests pass, awesome!

  • HTML validation and CSS validation show no errors! :clap:

  • you can increase the readability of your code by using a code formatter, e.g. Prettier; e.g. your labels are not formatted consistently

  • you can increase the overall readability of your page by adding some more spacing, e.g. between the different questions; you can read more about it in principles of design

  • I’m having a hard time to focus on the survey, because the background pattern/image seems very disturbing

  • not everyone knows how to use git/GitHub
  • not everyone knows how to have a look at your code when deployed on GH Pages, so you probably get less feedback

I think it’s great that you use git. In the future I’d add a second link, to the code repository on GitHub.

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

1 Like

A few minor issues:

  • The labels on your input boxes at the top and select drop down are not correct, there is no for attribute on them. Kudos for using fieldset/legend for the radio/checkbox groupings.
  • I would make the keyboard focus indicator a little stronger (perhaps make it 2 or 3 px and a color that stands out more). When a radio button/checkbox is checked you can’t see the indicator at all. Also make it look the same on the select drop down as the others.
  • The color of the text is somewhat hard to see (maybe not for you personally, but for people who don’t have the best vision it is challenging). On that background I would definitely make the text color #000 and maybe use a font that has a little more girth to it. The font you are using is very skinny.
  • The responsiveness to both changes in view port width and text size is very good. The only thing I noticed is that the textarea height does not grow as I manually increase the text size. Instead of using px for the height there I would use em.
1 Like

Took your suggestions and made the following changes:

->corrected labels, and improved formatting. I am working with prettier, but I guess it doesn’t correct everything.

->added more space between elements

->toned down the colors on the background to make it less distracting

->increased focus outline width, and changed the font to one with greater weight

->text area height em based

Thank you for your help.

1 Like