Feedback on my survey form for HTML/CSS

Hey everyone, I just completed my survey form on the HTML/CSS category and I would like anyone’s honest feedback on it. I worked really hard on it and went the extra mile to use all the knowledge I had. Would really appreciate the feedback.
Here’s the project: https://codepen.io/fatir004/pen/ZEKZWNm

Code is clean and well organized, I like it.
Page is clean responsive, that is also good.

What can be improved:

  • contrast of the submit button
  • responsiveness in fieldset-middle-block (change window size to vertical and increase font size - you will see what I mean)

Very nice job.

1 Like

Idk what this means, how do you change window size to vertical? Isn’t that changed using units (like pixels, rem and similar units) .

Also thanks for the response, this is my first time sharing anything and your words are really encouraging for me :slight_smile:

Maybe my choice of words was wrong.

What I mean is: change the size of your browser window. Make it slim and tall. Then increase font size (still in your browser) by holding ctrl and moving mouse wheel up/down.

You should see what I mean by then.
No changes in code necessary.

Welcome to the forums @fatir. Your form looks good. Some things to revisit;

  • Verify your email addr with codepen so we can see your page full view
  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
      Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (remember, an id must be unique within the document)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Text on your form says age is optional yet the user is required to enter it before being allowed to continue. This is a bad UX.
  • Change the cursor to a pointer when hovering over the submit button
  • Placeholder text should not mirror the label, it should show the user the format they are expected to enter
1 Like

Ohh you mean that I have to make it look readable on smaller screens. Yeah, that’s something I forgot during making it. Will keep that in mind

I’ll be honest with you, I don’t know what a test script is and how and where I should submit it. Also, I don’t know how to check user stories.

You say to click the red button, and I don’t really know where the red button is.
Would you please let me know about these issues and of course, thanks for the feedback. Really appreciate it.

This will answer both of your questions.
In the upper left corner of your project you’ll see a green hamburger menu.
Click to expand it, and there’s a dropdown. From the dropdown select your project then click the “Run Tests” button.
If all tests pass the bottom button will be green and show that all tests passed successfully.
If one (or more) tests fail the bottom button will be red and show the number of tests that passed out of the number of tests run.

When a test fails, follow the instructions as noted in my first response.

Hope that helps. Let us know if you need more.

1 Like

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