Survey Form - Build a Survey Form

Tell us what’s happening:

I am doing my cert project HTML first, then the CSS. I ran the tester and got the message:
"// running tests
// tests completed
There was a big popup with a “Most efficient!”. Then "Completed 1 of 5 Cert projects. I didn’t really expect that. Continue with the CSS or move on?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<!-- 16 Steps -->
<html lang="en">

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
<h1 id="title">Free Code Camp Survey</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
</header>
<form id="survey-form" Survey Form>
<label id="name-label" for="name">Name</label>
<input id="name" type="text" name="name" placeholder="Enter Your Name" required>
<br>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your Email" required>
<br>
<label for="number" id="number-label">Age (Optional): </label>
<input id="number" type="number" min="10" max="99" name="age" placeholder="Enter your Age"></input>
<br>
<p>Which option best describes your current role?</p>
<select name="role" id="dropdown" >
  <option disabled selected value>Select current role</option>
  <option value="student">Student</option>
  <option value="full-time-job">Full Time Job</option>
  <option value="full-time-learner">Full Time Learner</option>
  <option value="prefer-not-to-say">Prefer not to say</option>
  <option value="other">Other</option>
</select>
<!-- 13. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the name attribute  -->
<p>Would you recommend freeCodeCamp to a friend?</p>
<label >
  <input name="recomend" type="radio" value="definitely" Checked>Definitely</input>
  <input name="recomend" type="radio" value="maybe">Maybe</input>
  <input name="recomend" type="radio" value="not-sure">Not Sure</input> 
</label>
<!-- 14. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a value attribute -->
<p>What is your favorite feature of freeCodeCamp?</p>
<select id="most-like" name="most-like" required>
  <option disabled selected value>Select an opton</option>
  <option value="challenges">Challenges</option>
  <option value="projects">Projects</option>
  <option value="community">Community</option>
  <option value="opensource">Open Source</option>
  </select>
<p>What would you like to see improved? (Check all that apply)</p>
<label>
  <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox">Fron End Projects</input>
  <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox">Back-end Projects</input>
  <input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox">Data Visualization</input>
  <input name="prefer" value="challenges" type="checkbox" class="input-checkbox">Challenges</input>
  <input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox">Open Source Community</input>
  <input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox">Gitter Help Rooms</input>
  <input name="prefer" value="videos" type="checkbox" class="input-checkbox">Videos</input>
  <input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox">City Meetups</input>
  <input name="prefer" value="wiki" type="checkbox" class="input-checkbox">Wiki</input>
  <input name="prefer" value="forum" type="checkbox" class="input-checkbox">Forum</input>
  <input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox">Additional Courses</input>
</label>
<!-- 15. Inside the form element, you are presented with a textarea for additional comments -->
<p>Any comments or suggestions?</p>
<textarea id="comments" class="input-textarea" name="comment" placeholder="Enter your comment here...">
</textarea>
<br>
<button  id="submit" type="submit" class="submit-button">
            Submit
</button>
</form>
</body>
</html>
/* file: styles.css */





Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

Hi there! I guess you can move on !

3 Likes

This project doesnt require any css. You just have to meet all the requirements which it sounds like you did. You can add some css to make it look better, and practice your skills. Or, if you rather go to the next section then you can do that

1 Like

Thanks. I added the CSS and it worked for the most part. The background image didn’t load. No big deal though. Moved on to the Rothko Painting.

Hello @rforster6 !

Congratulations on completing your first project.

You mentioned the background image did not load for your project.

Here is an article from the News category, that may help you to resolve that problem, too.
It has good guidance and good examples.
It is showing how to add it to more than just the div.

Wishing you more good progress.