Feedback request [Landing Page] [Survey Form] (I'm a total beginner so any suggestions are welcome)

[Noorulhuda]

hi everyone! I just wanted to share my projects and it would be great if someone could give me a feedback on my html / css structure and advise on how I could improve it.

Survey Form Link: https://codepen.io/unoor3524/full/ZEKozRM
Product Landing Page Link: https://codepen.io/unoor3524/full/eYWrajK

[Roma]

Pages look good @Noorulhuda. Some things to revisit;

form

• Run your HTML code through the W3C validator.
  • There are HTML syntax/coding errors you should be aware of and address.
  • 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.
  • Reference MDN Docs
• Change the cursor to a pointer when hovering over the submit button
• User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  There’s a typo preventing one of your checkboxes from being selected
• Check responsiveness, the submit label falls out of its container on smaller screens
• Placeholder text should not mirror the label. It should show the format the user is expected to enter

prod landing

• Run your HTML code through the W3C validator.
  • There are HTML syntax/coding errors you should be aware of and address.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
  • The one for CSS is good. Use it and address the issue(s).
  • (The one for HTML misses things which is why I recommend W3C)
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
• Make your page responsive. Remember, the R in RWD stands for Responsive
  • There’s a horizontal scrollbar on smaller screens. Elements fall out of their containers.
• In the form portion of your code, placeholder text should not mirror the label.