mphello/survey-form

Hi! 👋

🚀 Survery Form Link

Click on this link

survey-form's Issues

Add border radius CSS property to inputs,button, textarea...

I would use border radius CSS for inputs and form element
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Reorder selectors by importance

1. • (the most important),head,body,etc...
2. Selectors by tag name
3. Then selectors by ID,class, etc. At the end, media queries

Avoid negative px

Is not a good practice use negative values try to play with padding/margin to change this. Maybe the solution could be change the values in the adjacent element

h1 {
  display: flex;
  justify-content: center;
  margin-bottom: -20px;
}

Remove <br> from HTML and fix styles from CSS file

Let's see if we can add breaklines for every input, like in the example. I'd suggest you check the solution and see how the play with the inputs, labels, button, etc.... We don't need <br>. We can make it from CSS

https://survey-form.freecodecamp.rocks/ Inspect a bit the CSS solution to see how to make the breaklines from CSS.

.submit-button {
  display: block;
  width: 100%;
  ...
  }
  
  .input-textarea {
  min-height: 120px;
  width: 100%;
  ---
  }
  .input-radio,
.input-checkbox {
  display: inline-block;
  ...
  }

Personalize font-family

Change the font family to make it more personalized

Feedback to your Survey Form

Hi again, Arman :)
Let's go with some feedback about your Survey Form 🚀

Some general feedback:

• Indentation is perfect, well done 👏🏻. Very clear structure, very easy to understand at first glance by an external developer who didn't code it (myself in this case). Nice!!
• Semantics is very good in general. I'll give you some ideas below so you can keep working on it and make some improvements :)

Small improvements I found:

• General semantics: Don't you miss a main tag? Where would you place it?
• Review your email tag, and all input types documentation here. Any idea of how to be more precise with that input? 😉
• Review your code in relation to labels: In lines 52 62, 90, 100 and 195 you have use paragraphs and is correct, but is not a perfect solution for screen readers / accesibility. My favourite choice: grouping them with fieldsets and legends, so these elements work together to tell screen readers that a group of form fields relate to each other, and to provide a label for the group (documentation).
• Review your first select dropdown (about current role, line 53): have a look to your select tag and compare it with the select tag documentation.. Do u see the difference, and how to fix it?
• About your radio button input (from line 62): I have noticed that on this case you have wrapped your inputs inside your labels. That is call "implicit labels" and it is also correct. In your first inputs, you have written then one after the other (that's called "explicit labels"). Semantically, both possibilities are correct, although I have read in many places like this one that, in general, some assistive technologies do not correctly handle "implicit labels" that well. So personally I prefer the more simple way, "explicit labels" (one after the other, as in this documentation) as they are better supported by assistive technology and they look more organized to me. But as both ways are correct, it's up to you :) I just would recommend you that, on this simple exercise, do it always in the same way (explicit or implicit) so your code is as much consistent as possible.
• For the submit button, use the way you have learn on the RefugeesCode materials: a simple input with a type submit and a value submit. Here the documentation.

That's all I see that could be improved for now. As you have realised, the form tags are a bit tricky in HTML, they have a lot of attributes and small details that we need to be careful about. So well done!! You can reply to this comment in GitHub if having any doubt. Let me know also when all those fixes are ready, I won't mind having a second look at your code to double-check that everything is perfect 🙂

Happy coding!!