My Survey Form - Would Love Some Feedback!

Hi all - it’s me again :grin: (this is what happens when you finish multiple projects and don’t upload it for feedback once you’ve completed them!)

Here is my Survey Form. I’m fairly proud of this one! I think it’s definately a bit more asthetically pleasing than my first, but I realise I should have gone back and refactored/reorganised my CSS, as the selectors are just in such a random order!!

Anyways, as always, fire away, and please…don’t hold back!

It seems like it didn’t pass test #2 i.e.,
" User Story #2: I can see a short explanation with id="description" in P sized text."

Also, run your source through the validator at: (It may or may not yield other stuff, but just the same…)
https://validator.w3.org/#validate_by_input

As others have said here, try not to use BR. Use CSS instead.

A few more things:

  • Every input, including selects and textareas, needs a <label>. And some of the labels you do have are not working correctly. Remember, the for attribute on the label points to the id of its corresponding input, so every input needs an id.

  • The main content should be wrapped in a <main> tag.

  • The sentence " Let’s build a better picture of our community!" is not really a heading. It can just be a regular old <p> tag.

  • At very narrow browser widths the form gets really skinny and takes up maybe a third of the available width. It should probably take up almost all of the width so the content has more room to breath. I would not put a specific width on the container div. Instead, I would put a max-width on it, preferably in rem units. That keeps it from getting too wide but allows it to use all of the horizontal space available. To keep the form from touching the edge of the browser you can put some side padding on the body.

Thanks @wannacode.

Sorry about that! I believe I was messing around with Codepen on my mobile and changed a few things and must have accidentally saved it. The version I have actually submitted had the correct <p> element instead of an <h2>.

What’s the reason for this?

Hello again @bbsmooth :smiley:

This is actually what I would have thought myself, however, I ‘borrowed heavily’ from the example Codepen’s HTML structure, and noticed that it did not use labels for all types of inputs. For example:

<div class="form-group">
  <p>
    What is your favorite feature of freeCodeCamp?
  </p>
  <select id="most-like" name="mostLike" class="form-control" required>
    <option disabled selected value>Select an option</option>
    <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="openSource">Open Source</option>
  </select>
</div>

As you can see from the above example, the <p> tag was used here instead of a <label>, which, given that it’s the example we’re given by FCC, I just assumed it would be a shining example of accessible/semantic HTML!

I found a great article describing how it should be done here: Accessible Forms – Should Every Input Have a Label? - Coolfields Consulting. It echoes your advice :slight_smile:

Yup, this again :laughing: I think I’ve got the whole head/body/header/main/footer thing down now thankfully!

Thanks for this. As I said to @wannacode in the reply above, it was originally wrapped in a <p> tag :roll_eyes:

This is great, thank you. I will likely re-write this one as well as my first project (which I’m doing currently) to get in some more practice. As I mentioned in my reply to your feedback on my first project, I really need to work on my understanding of sizing and responsiveness!

Thank you once again for your great feedback, Bruce!

At first I didn’t get it as well. It seems BR is more of a structural tag and you are using it to space things apart.
See…
The Line Break element
…and…
Replacing BR with CSS
…and…
Should you EVER use the BR tag?

Maybe use padding, margin, or line-height instead.

I myself am also redoing the Survey Form. Your creation looks nice. I look up as well and have an 80mm scope. I don’t use it often though, too light polluted where I am.

1 Like

Thanks for the resources, I will have a look when I get a mo. I feel like there just aren’t enough hours in the day to practise and learn!

Speaking of which, how long have you been programming for? Looking at your projects it seems like you’ve included some more advanced stuff than just what we’re learning in this course? (obviously we’re all learning from other places as we go, I just wondered if you had other experience, or it’s just that we’ve been learning about different additional stuff?

I don’t have my scope anymore, but used to really enjoy it! And yeah, I hear those newer LED streetlights are virtually impossible to filter out!

This HTML, CSS stuff is just last year (when the pandemic hit), JS not so much yet. I took some Coursera courses also— ‘Web Applications for Everybody’ (PHP) taught by Dr. Chuck (enjoyed it) and ‘Web Design for Everybody’ (HTML, CSS) taught by Coleen van Lent (a little basic but got my feet wet).

The rest I learned from YouTube (Kevin Powell, Gary Simon, WebDev Simplified) and reading around. Then I decided to sign up with FCC as it seems to be recommended a lot. I still have some ways to go on design though. I sometimes look at other people’s work and I go, “Whoa! Why didn’t I think of that?” Then I want to learn full stack stuff also and combine everything.

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