My survey form

Web Development Bootcamp
1

Here is my survey form :point_right: https://codepen.io/NKaav/pen/JjJQbdV
Critique it and any suggestions to improve it would be helpful.

Have a nice day,
Thanks

2 Likes
2

First off, good job on completing the project!

Here’s some feedback that I hope helps as you progress:

HTML

  • Comments: allow your markup to elaborate for you. Semantic HTML not only helps search engines and screen readers, it’s also a huge help when it comes to readability.
    I’d go as far as to say none of the comments in your HTML are necessary.
  • Line Breaks: avoid using <br> for creating visual space. Make use of CSS instead. Grouping content in a div is very helpful with creating a neat layout.
  • Select Form: It’s important that your select element has a name attribute. The name is how the data will be referenced once the form is submitted.
  • Radio Buttons: If your input is wrapped inside a label, you can omit the for attribute, as they’re associated by a child-parent relationship. id should always be unique. Only the name attribute should be the same here.
    You Inputs will need to have unique value attributes too. When the data is received it comes back as name = value
  • Checkboxes: Similar to radio buttons. You’ll need a value attribute. Your ids should be unique, and you could omit the for if you wanted to.
    Your name attribute needs to be the same on all checkbox inputs to signify their relationship.
  • Keep an eye out on extra spaces as seen below. Consistency is pleasing to the eye.

image
image204×100 1.5 KB

Styling

(I’m no expert)

  • Your main header and description text are a bit too close in size and appearance. You could make the head quite a bit bigger, and the description smaller. Also look at bringing them closer together for a visual relation.
  • The page’s main background is a bit dark, especially for the black header. I’d add an overlay to lighten it a bit.
    That CSS can be a bit cryptic, so I’ll add it in here:
background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255,255, 255, 0.3)),
   url("https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80")
   no-repeat center fixed;
  • Sharp corners draw our attention. This can be useful for things like call-to-actions, but distracting in other situations. I’d look at adding a small border-radius (± 5px) to the form’s edge and inputs to make it easier on the eye.
  • The form’s background is too similar to the page’s background which flushes it out. It’s also very dark, which makes the text more difficult to read. I think white looks better, but anything with a stronger contrast will do.
  • Once you’ve removed the <br>s you’ll need to use margin and/or padding to create spacing between your inputs. When spacing out your form (or doing any layout, really), try to be as consistent as possible.

There’s a lot there. Don’t feel like you need to absolutely remember all of it; it’s enough to be aware, it’s all on Google.

Happy coding!

1 Like
3

Hello Kay,

I have these two comments:

  1. What is the purpose of the 3rd item "Number : " ?
  2. The text area for suggestions is too small. Consider replacing lines 155 to 162 with:
<textarea rows="4" cols="50" type="text" id="comments" name="comments">Enter your comments here.....
</textarea>
1 Like
4

Thanks for the inputs.

just to indicate Number of courses completed.
I should have described it as Number of courses completed :

1 Like
5

Thanks @matthewrawlin2592434 and @kris0000000000196074 for the inputs, I’ve made changes to my survey form :point_right:https://codepen.io/NKaav/pen/qBXLKJW

image

I have trouble with placing last 3 items properly any help would be appreciated

Any advise on styling would be appreciated too.

6

Hello Kay, you can simply type a space before those three word.

1 Like
7

Great job! I especially like the font choice. My only suggestion (and this is likely just my personal preference) is to make the font and the form a tad bigger.

I did this for all my checkboxes. It might help your situation:

input[type="checkbox"] {
    margin-right: .5rem;
    min-height: 1.25rem;
    min-width: 1.25rem;
}
8

I’m trying to make a nav bar with logo on left and Home, products and contacts on right. I’m having trouble placing the (Home, products and contacts) on right. I’ve used flexbox but how to move (Home, products and contacts) to the right?

9

Put the logo in one div, and the links in another. Put both in the navbar.
Add display flex to the navbar, and use margin-left:auto on the div with the links. It should put them over to the right side.

1 Like