Responsive Web Design Projects - Build a Survey Form

Tell us what’s happening:
I am having trouble finishing the project . Can someone help me? Thank you!

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title>freeCodeCamp  Survey Form</title>
 <link rel="stylesheet" href="styles.css" >
</head>
<body>
 <h1>freeCodeCamp Survey Form</h1>
 <p>Thank you for taking the time to help us improve the platform 
   </p>
   <form action='https://register-demo.freecodecamp.org'>
    <fieldset>
       <label>Name: <input type="text" name="name-label" required ></label>
       <label>Email: <input type="email" name="email-label" required ></label>
       <label>Age (years): <input type="number-label" name="age" min="13" max="120"/></label>
       <label>Which option best describes your current role?<select name="referrer">
           <option value="">Select current role</option>
           <option value="1">Student</option>
           <option value="2">Full Time Job</option>
           <option value="3">Full Time Learner</option>
           <option value="4">Prefer not to say</option>
           <option value="5">Other</option>
         </select>
       </label>
     </fieldset>
     <fieldset>
<label>Would you recommend freeCodeCamp to a friend?</label>
     </fieldset>
<label><input type="radio" name="account-type" class="inline" /> Definitely</label>
       <label><input type="radio" name="account-type" class="inline" /> Maybe</label>
   <label><input type="radio" name="account-type" class="inline" /> Not Sure
   </label>    
       <label>
         <fieldset>
           <label>What is your favorite feature of freeCodeCamp?
             <select name="referrer">
           <option value="">Select an option</option>
           <option value="1">Challenges</option>
           <option value="2">Projects</option>
           <option value="3">Community</option>
           <option value="4">Open source</option>
         </select>
           </label>
           <fieldset>
           <label>What would you like to see improved? (Check all that apply)</label><label><input type="checkbox" name="terms" class="inline" required/>Front-end Projects</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Back-end Projects</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Data Visualization</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Challenges</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Gitter help rooms</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Videos</label>
           <label><input type="checkbox" name="terms" class="inline" required/>City Meetups</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Wiki</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Forum</label>
           <label><input type="checkbox" name="terms" class="inline" required/>Additional Courses</label></fieldset>
            <label>Any comments or suggestions?
         <textarea name="bio" rows="3" cols="30" placeholder="Enter your comments here..."></textarea>
			  </label>
       </fieldset>
     <input type="submit" value="Submit" />
         </fieldset>
         </body>
</html>
/* file: styles.css */
body {
 width: 100%;
 height: 100vh;
 margin: 0;
 background-color: #1b1b32;
	color: #f5f6f7;
 font-family: Tahoma;
	font-size: 16px;
}

h1, p {
 margin: 1em auto;
 text-align: center;
}

form {
 width: 60vw;
	max-width: 500px;
	min-width: 300px;
	margin: 0 auto;
}

fieldset {
 border: none;
 padding: 2rem 0;
 border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
 border-bottom: none;
}

label {
 display: block;
	margin: 0.5rem 0;
}

input,
textarea,
select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;
}

input, textarea {
 background-color: #0a0a23;
 border: 1px solid #0a0a23;
 color: #ffffff;
}

.inline {
 width: unset;
 margin: 0 0.5em 0 0;
 vertical-align: middle;
}

input[type="submit"] {
 display: block;
 width: 60%;
 margin: 0 auto;
 height: 2em;
 font-size: 1.1rem;
 background-color: #3b3b4f;
 border-color: white;

}
   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

What kind of help would you need?

In the instructions it states: for example,

  • You should have a page title in an h1 element with an id of title
  • You should have a short explanation in a p element with an id of description

Do I need to add an “id” to these lines of code?

freeCodeCamp Survey Form

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

Up until this point I don’t think element “ID” has been discussed in the curriculum.

You should know that ID works similar to how CLASS does. Except ID is used to designate a unique element.

An ID can only be used by one ELEMENT.

This is a good breakdown of how those work:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.