Survey Form Feedback

Hello, I completed the Survey Form project. I used flexbox instead of
tags.

Full page view: https://codepen.io/marcus-smo/full/NWmVpQj
Source code: https://codepen.io/marcus-smo/pen/NWmVpQj

Feedback is wanted and appreciated.

1 Like

It looks pretty clean with no major issues.

  1. id="dropdown label" is an invalid id. An id can not have spaces.

  2. I would suggest always adding box-sizing: border-box to your * selector. Especially with form elements. It won’t do much for your page, but if you look very closely you can see the textarea has a tiny overflow without it (you will need to use the dev tools and select the form container to see it).

  3. Instead of using a percentage margin on the body, I would suggest creating a max-width auto margin type container. But I wouldn’t really suggest using the body for it. I would create a container element or use the form element.

Example:

body {
/*   margin: 0 20%; */
  width: min(80%, 980px);
  margin-inline: auto;
  font-family: sans-serif;
  background-color: lightgrey;
  color: #fff;
}

Thank you for your feedback. I’ve implemented your suggestions into my codepen.