Survey Page - Feedback requested

https://codepen.io/ccblair/pen/QWpGjpQ

or you can also view here:

https://christianblair.com/survey.html

I would especially love any advice about making the page more responsive, or how to better format the code. (I know it’s pretty messy.)

Looks good overall. I like the title, and how “icy” it looks… The color and font in “Please take a few moment” (shound be “moments”) is light (and some may say that it lacks contrast), but this is fine, as it looks a bit like the clouds around it.

A few things did catch unneeded attention, though, but these are just “subjective”, of course… I’m looking at it just as a “user”…

  1. Font size in “Any comments…” is not consistent with the rest of the page.
  2. The “Submit” button color should be different, imo
  3. I would also try to play with the form background color a bit, to try to make it more consistent (e.g., make it closer to the dark blue of the mountains in the picture)…
    Re 2 & 3, as a general rule, it’s better to have fewer colors… Hope this helps, and thanks for sharing your page!
1 Like

honestly, i don’t know much about web development, but i think the page looks great. it responds well, the colors are vibrant and easy to differentiate and, overall, i think you did quite well. i don’t know why i noticed this, but i like how on the checkbox question you can click the words to mark the box if that makes sense.

Welcome to the forums @ccblair. Your form looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Maybe review this lesson and get your checkboxes to align better. You can also do the radio buttons.
1 Like

Thanks for the help. Yeah I was confused by the script at first, but I figured out what you meant and added the test script to the pen. I had just started a new pen myself instead of forking so I guess that’s why I never noticed it.

Those are some good suggestions, and I would agree with all of them. I felt the colors could have been improved upon too. I think I’ll mess around more with the colors later so they’re more harmonious.

1 Like

Hi, some tools to help you.

With this, you can test the contrast
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy! (contrast-ratio.com)

With this, you can explore and build your color palette. And simulate how people with some eye disease see the colors.
Paletton - The Color Scheme Designer

And this is about the color meaning
Color Matters welcomes you to the world of color: Symbolism, design, vision, science, marketing and more!

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.