My project Survey FCC (finish)

I’ve been hard at work on the form, designed it in figma and then got down to business. I tried to make it as responsive as possible, it has given me quite a few headaches to leave it as I have designed it.

I should optimize it a lot more, but it is the most I can achieve at the moment with the knowledge I have.

From knowing nothing to being able to do this in just 3 weeks, I feel like this is the best place in the world to learn.

https://codepen.io/raulsanctes/full/zYNRKgY

Your form looks good @raulsanctes. 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.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for. If you want two paragraphs then user two paragraph elements.
  • In other places, instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • maybe revisit the lesson on creating checkboxes
  • It’s a bad UX when the user has to delete text in the comment area in order to enter theirs

Side note, I notice you use a font-weight of 900. Also noticed it doesn’t render as such. Couple of things;

  1. you only link one font weight and
  2. the font you link to doesn’t have a font-weight of 900
    the browser can only do so much so the font weight is the same throughout
1 Like

you designed it mobile first I believe, and it looks great on mobile, but on a big screen it doesn’t look good,

On I big screen I would make the survey into a side bar

other wise I would say 7/10

Thank you very much for so much feedback!

Finally I chose not to customize the checkboxes, it was generating unnecessary problems for me at this stage. :woozy_face:

I have solved all the problems you have observed me, thanks again for always helping me.

https://codepen.io/raulsanctes/pen/zYNRKgY

It’s true, I removed the background image and contrasted the gradient more.

Perhaps it would have been better if it was only in 1 rectangular container in 2 columns.

Thanks for the observation. :grin:

I just realized that a user can expand the comment section beyond the form, and might not be able to see what they are typing, might want to add a max-width: property on your text box

1 Like

Oh, it’s a great observation. You’re right, I’ll add that detail. Thank you very much for your feedback :slight_smile:

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