Survey Form Feedback :-)

Hi, I’d love to get some feedback on my Feedback Form project.

It passes both codepen and w3c, but maybe there’s some other best practices I could be doing better on?

JLPT: Self-Assessment Form (codepen.io)

I wrote the page in VS Code and just pasted it into codepen, so in case the indentation is bad here’s a clean version:
Untitled - Pastebin

Outside of writing Good Code, the other thing that bothers me about the state of this project is that it just doesn’t look like a professional website. I’m less than a week into learning so maybe I should keep my ambitions in check, but I’d still like to improve this. I assume it’s down to spacing, color, and typography? What are some good resources to learn about this, and at what point in my learning should I start thinking more about that?

Thanks!

FYI. Codepen can format the code. Each code box has a down arrow on the right side, click it and select the format option from the menu.


  1. Use margin to give space between elements, do not use the <br> tag for this.

  2. I would give the text/number inputs and select elements some padding. Or increase the height of them some other way. Increasing the line-height and font-size would make the elements taller as well and I think you should increase the font-size on the text/number input elements in any case.

  3. I don’t think using a link for the label text is a good idea. I would switch it around so the link text is just the label text and then put the link in the parentheses. I’m also not sure what the No label is supposed to represent.

  4. It may be better to not have a value selected by default for the select elements. That way the user can not submit the default value by accident if they miss an option. You can look at the code for the example project to see how it is done.

  5. Use resize: vertical on the textarea to constrain it to only be vertically resized by the user.

  6. Add cursor: pointer to the submit button.


Learning design is its own discipline, it takes studying just like coding.

If it speaks to you, I would suggest you learn about it when you have the time. If you hate it, I would still suggest you at least learn some basics, as it will help you in your communication with designers.

Google search for GitHub awesome lists for UX/design.

1 Like

Thanks for the thorough feedback!

I fixed the issues, and cleaned up the design a bit by adding more whitespace and doing padding/margins in multiples of 8pt. Definitely still a lot of room for improvement in that regard (and a lot to learn regarding design), but I’m surprised by how big of a difference these fairly small changes made.

Your page is good @cehrlich :+1:

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