Feedback requested for my HTML/CSS Survey Form (Fruit and Health)

Code Feedback
1

Hello,

I have created a simple survey form about fruits and health using HTML and CSS. The form contains four questions, including name, email and age (required fields), with a submit button at the bottom. The design has a green background color with red text, and I tried to make it clear and well centered.

I would like to receive feedback on the following aspects:

Structure and readability: Is the formatting clear? Are the fields logical and well categorized?
Design: What do you think of the color palette (green and red)? Does it fit well with the topic of ā€œfruit and healthā€?
Functionality: Do the radio buttons, checkboxes and form work as expected?
Iā€™ve uploaded the project on GitHub, and you can find it there at this link: GitHub - Ilias-eloua/Survey-form: A simple survey--form project with HTML and CSS. [link to GitHub repository].

Thanks in advance for your time and feedback!

1 Like
2

Hi @Khadija35

  • Good use of web friendly fonts.
  • The CSS can go into the styles.css file.
  • Since you are using a stylesheet, you do not really need to use the style attribute. Placing it in the stylesheet makes the code easier to maintain, and is a best practice - separation of concerns.
  • Also, remove the .txt extension from the HTML file.
  • Indent your code. This make it easier to read, maintain, and debug.
  • I noticed the fieldset element is not closed.
  • Consider resizing the input, textarea, and select elements. They donā€™t need to take up the full width of the page.
  • In the "When do you usually eat fruit?" section, two of the options are not aligned like the rest of the options.
  • How about rewording "In between ..." for morning and afternoon to "Morning snack" and "Afternoon snack"?

Happy coding

3

Iā€™ve made the improvements based on your feedback, [Teller]. Iā€™d love to hear your thoughts on the updated version, and feel free to anyone else to give their feedback as well!

Hereā€™s the updated version of my project: [surveyform.html by Ilias-eloua Ā· Pull Request #2 Ā· Ilias-eloua/Survey-form Ā· GitHub].

4

Hi @Khadija35

image

When using symbols it is safer to use character codes, as the browser can sometimes confuse them for code instead of text.

Using id, class attributes and type selectors is a cleaner way to style elements instead of the style attribute.

I had a quick look at the updated code.
How about adding some padding so the text and elements are not so close to the edge of the browser window?

Happy coding

5

Hi Teller,

Yesterday, I mistakenly submitted my old code instead of the improved version. As a result, the feedback I received was based on the previous code, not the updated one. My apologies for the confusion!

Here is the correct, updated version of my project: [Survey-form/surveyform.html at main Ā· Ilias-eloua/Survey-form Ā· GitHub]

I would love to hear your thoughts on this version and see if there are any further improvements to be made. Also, anyone else is welcome to share their feedback as well!

Thanks in advance for taking the time to review it again.

6

Hi @Khadija35

The updated version looks much more cleaner and elegant.

Good use of the fieldset element to display the purpose of each section.
The rounded corners of each box gives it a nice touch.
Placing a subtle box shadow around the form gives it the feel of an actual form.
Removing the vibrant colours reduced their distracting effect.
The page is responsive to various viewport sizes.

Excellent work.

Happy coding

7

Thanks for your feedback! I appreciate it and will keep improving. Happy coding!

1 Like
8

2 posts were merged into an existing topic: Feedback requested for my HTML/CSS Build a Tribute Page