My survey form is completed

What is your hint or solution suggestion?
I feel so happy for having completed my survey form webpage and I would like to share it with the codecampers: https://codepen.io/stevetilsise/full/XWKwvjj

Challenge: Build a Survey Form

Link to the challenge:

thank you for your suggestion foe the guide, but at the moment we are not adding guide pages for the peojects. I have moved your post to #project-feedback so you can get feeback on your project by other campers

1 Like

It would be better to post my completed projects to the page #project-feedback in the future?

Hi! Nice concept but i have some remarks if you don’t mind
First of all the description and the image isn’t responsive
secondly it’s better to style the checkboxes radios input types etc so the page will be more interesting
Last thing , in my opinion it’s better to border the form and give it a background-color which will suits your background-image

1 Like

Thank you so much for the suggestions. Regarding the first suggestion, how could I make my description more responsive? You are more than welcome to provide your remarks.

if you want feedback on your project, the #project-feedback subforum is the best place

Thank you for your assistance.

just use the media query
media query is the main thing to have a responsive web page it’s written like that

@media (max-width: 600px) {
 
}

600px means when the page reached that size it should do this ( the media is empty you should add what you wanna add . Moreover you can add inside classes or ids in depends on what you wanna change)

1 Like

Welcome to the forums @stevetilsise. Your form looks good. 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.

  • 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.
  • Make your page responsive. Remember, the R in RWD stands for Responsive

    • There’s a horizontal scrollbar on smaller screens
    • On a small form like this you shouldn’t need to use media queries. You’ll find it’s easier to make your page responsive if you use relative units like percentages or em for width, left/right margin and padding rather than hardcoding pixel values.
  • For grouping like sections try searching for “html form elements”

    • This will introduce you to elements that weren’t covered in the FCC curriculum. (You had to do some kind of search to learn how to do a dropdown.)
  • Change the cursor to a pointer when hovering over the submit button

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

  • It’s a nit but, the placeholder should just show the user the type of input that is expected. Latin is a dead language, not everyone understands the abbreviations. You don’t need to have “e.g.”

1 Like