Finally finished the second project "survey"

Finally finished the second project “survey”. Would like feedback from anyone, still learning and still improving… thanks …

1 Like

Your form looks okay @xaviergeorge99. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. Everything the browser displays belongs in the body element.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
    • This doesn’t work with the checkboxes.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.
  • In codepen, click on the down arrow in the HTML and CSS sections and select the format option of each. See how it improves readability? This is how you should learn to write your code.

I don’t often comment on someone’s design choices but;

  • Rather than hardcoding a max-width with a pixel value for your form why not leave it as a width with a percentage? Responsiveness doesn’t change and it’ll look better no matter the screen size rather than good on a small screen and extremely narrow on a desktop.
  • Make the submit button look like a button rather than a bar.
1 Like

Will do and will look it over… thank you

I revised certain things that you mentioned, others things are a little confusing since i do not have a 'coding" background. Mostly googled info on what you mentioned. I am a little confused, but i revised and will listen what you have to say. In terms of the
tag . I couldnt find alternatives without screwing everything up… Pretty sure its cause of my lack of knowledge but open to suggestions thanks

Hi @xaviergeorge99,

  • instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
  • For the checkboxes. User’s should be able to click on the label to toggle a selection, not just the checkbox.
  • All your styling should be external. Do not use in-line styling.
    • Either I didn’t notice it when I first looked at your page or you added as part of your revision

On a side note, in the HTML and CSS sections click on the down arrow in the upper right and select the “Format”. You’ll notice it makes your code easier to read. You should strive to write your code this way too.
You can also change the ‘Behavior’ to ‘style on save’ in codepen

Thanks a bunch, and i did think about container elements just didnt follow through :+1: :+1: :+1:

1 Like

Another revision,going to step-by step. i have to thank you this is helpful despite how rudimentary it seems. The “format” is a major plus cleans up everything, never knew… thanks

That looks good @xaviergeorge99. Looks like you’ve incorporated everything. Nice job!

There are two typo’s in your HTML code. You didn’t properly close the last two header tags.
And two omissions. You didn’t close the main tag you opened and you didn’t close the form.

I don’t comment on design choices unless it’s something that makes it difficult to read. Your design is your design. Yes, there are things you may revisit later as you progress but for now you’ve met all the user stories and when you clean up the aforementioned typo’s and omissions you’ve got a good page.

Let us see the final, cleaned up result.

Revised…You been a big help, for lack of a better term… pretty awesome… thanks for all input

Glad to help. Nice job! Looking forward to seeing your next project.
Happy coding!