Critiques on my Form Survey Project

Project Feedback
#1

Hey! I am really new to coding (three weeks in) and trying to submit the projects to get the basic HTML certification. I was wondering if anyone had any critiques on my survey form. I thought it would be cool to have the survey show up just in the background’s movie screen, but I can’t figure that out!

Here is my form so far.

Thank you!

#2

Hi Victoria

What do you mean when you say:

I thought it would be cool to have the survey show up just in the background’s movie screen, but I can’t figure that out!

As for a critique, you have done awesome for only being 3 weeks in! Basic things like good contrast, good use of html attributes. The only thing I would recommend is keeping your CSS a bit more DRY(Don’t Repeat Yourself). Instead of using

#movie-label {color:white;}
#movies {color:white;}

you can do something like adding a class to all of them and use the class to make the labels white.

#3

Thank you! I appreciate the tip on the class.

I meant that I was trying to figure out how to make the code only appear in the background image’s movie screen. Kinda like the form would look like credits? Not sure if I just got a bug in my bonnet about something silly.

#4

like making the survey form scroll up and down, but the background stay fixed?

or what else?

#5

Welcome to the forums @victoriakee95. Your form looks good. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • There are a few errors and warnings you should clean up.
  • Users should be able to click on the labels to select, not just the radio buttons/checkboxes
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS
    • There are ways to group radio buttons and checkboxes, Google ‘fieldset’
  • Change the cursor to a pointer when hovering over the submit button
  • Make your form responsive.
    • Your title and description fall out on smaller screens.
  • For practice, in the CSS section, click on the down arrow and then click on the ‘Format CSS’ link to see how your CSS file should be formatted for readability.

As an aside, Arial does not need to be in quotes as it’s a single name and the correct name for the fallback font is sans-serif

#6

Thank you so much! The W3C validator is a lifesaver. I honestly forgot about fieldsets until you said that, much appreciated. What do you mean by “users should be able to click on labels to select”? I don’t know if I’ve run across that yet or know why it would be important.

Thank you for your help!

#7

You’re welcome.

You learned about this in this lesson
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons
and the following one
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes
What is means is that the user shouldn’t have to just click the radio button or the checkbox. They should also be able to click on the word(s) (label) that is next to it and that will select the radio button and/or checkbox.

#8

Thank you for the links. I understand the concept, but I am having trouble figuring out how to make the labels clickable.

#9

@victoriakee95, all you need to do is nest the buttons within their own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it. (Directly quoting the lesson and the same thing goes for checkboxes)

So something like;
<label for="romcom"><input id="romcom" type="radio" name="movie-genres" value="romcom">Romantic Comedy</label>
will make it so users can click either the radio button, or the label ‘Romantic Comedy’ to select it.

1 Like
#10

Thank you for being so patient with me, I really appreciate your help. The last comment makes total sense!

1 Like
#11