Survey Form, my work

Code Feedback
1

Hello, this is my solution !

I will happy to hear your opinion ! but not for the color scheme !! :rofl:
Thanks !

2 Likes
2

A carbonara survey…Awesome! I still don’t know a lot of coding yet but I think the page is cool, and I love pasta. :spaghetti:

3

Your form looks good @nicolas. Some things to revisit;

  • Change the cursor to a pointer when hovering over the submit button
  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
4

Good job @nicolas. I like it. But, center align the text below the heading so that it’s center aligned in smaller devices also.

Anyway, I like it. No other suggestions to give. Thumbs up! :+1:

5

Hey, I’m going to list some accessibility issues for you:

  • If you are not wrapping an <input> in a <label> then the <label> needs to have a for attribute that points to the id of its associated <input>. For example, all of your text inputs at the top.
  • The <select>s and <textarea> need <label>s so just change the <p>s above them to <label> (and don’t forget the for attributes).
  • The keyboard focus indicator is so light that it is basically not there. You should be able to clearly see which input the keyboard focus is currently on as you Tab through the page. Use the CSS outline property to increase the visibility of the focus indicator.
  • Consider using a fieldset/legend combo for the radio button and check box groupings:
    https://webaim.org/techniques/forms/controls#checkbox
  • Probably change <div id="main"> to a <main>. All of your content should be within a <main> element.

And I agree with @Roma, start over from scratch and make it your own.

1 Like
6

Hello, thanks for the feedback.
Text below the form title is centered with margin: auto; as the title, when i display the form in small screen it seems to be still centered.
What exactly you mean ?

1 Like
7

This is what I am talking about:
image

That text is left-aligned. Add text-align: center; to that text.

8

Hello Roma, thanks for the feedback,
Done for the pointer !

Yes that’s true i took code from sample project, it’s easier like that to understand how to make a first form survey. But maybe it’s not very constructive for my learning process. I will do in other way for the next challenge.

9

Understood ! :muscle:t4:

Capture d’écran 2020-11-07 085621

2 Likes
10

The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
As this project introduces an element that wasn’t covered in the FCC curriculum it’s a good time to use the Search that FCC propounds with their Read-Search-Ask method. A search for “html form elements” would be a good first step.

1 Like
11

Hello bbsmooth and thanks for your feedback.
(sorry for the late reply but system said i speak too much yesterday !)

Done.

Done.

I think it’s ok now, not sure of the syntax

:focus {    outline: 4px dashed orange;  }

Done.

Done too !

Thanks again to all to help me in this challenge.

12

Great work but it would be better to use other colours for your page.

13

is just for fun, i wil not use it :grinning:

1 Like