Certification Project: Survey Form

HTML-CSS
1

Hi Community. I completed the firt certification project but I have some quesstion about it.

My HTML file

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey-Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>

    <form id="survey-form">

      <div class="field">
        <label id="name-label" for="name">Name</label>
        <input id="name" required type="text" placeholder="Enter your name"></input>
      </div>

      <div class="field">
        <label id="email-label" for="email">Email</label>
        <input id="email" required type="email" placeholder="Enter your Email"></input>
      </div>

      <div class="field">
        <label id="number-label" for="number">Age (optional)</label>
        <input id="number" type="number" placeholder="Age" min="10" max="99"></input>
      </div>

      <div class="field">
        <label for="dropdown">Which option best describes your current role ?</label>
        <select id="dropdown" required>
          <option disabled>Select current role</option>
          <option>Student</option>
          <option>Full Time Job</option>
          <option>Full Time Learner</option>
          <option>Prefer not to say</option>
          <option>Other</option>
        </select>
      </div>

    
      <div class="field">
        <legend>Would you recommend freeCodeCamp to a friend?</legend>
        <label for="def"><input id="def" class="inline" type="radio" value="0" name="recommend"/>Definitely</label>
        <label for="may"><input id="may" class="inline" type="radio" value="1" name="recommend"/>Maybe</label>
        <label for="not"><input id="not" class="inline" type="radio" value="2" name="recommend"/>Not sure</label>
      </div>
      
      <div class="field">
        <label for="second-dropdown">What is your favorite feature of freeCodeCamp?</label>
          <select name="features" id="second-dropdown">
              <option value="0">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>
      </div>
        
      <div class="field">
          <legend>What would you like to see improved? (Check all that apply)</legend>
        
          <label><input class="inline" value="0" type="checkbox">Front-end Projects</label>
          <label><input class="inline" value="1" type="checkbox">Back-end Projects</label>
          <label><input class="inline" value="2" type="checkbox">Data Visualization</label>
          <label><input class="inline" value="3" type="checkbox">Challenges</label>
          <label><input class="inline" value="4" type="checkbox">Open Source Community</label>
          <label><input class="inline" value="5" type="checkbox">Gitter help rooms</label>
          <label><input class="inline" value="6" type="checkbox">Videos</label>
          <label><input class="inline" value="7" type="checkbox">City Meetups</label>
          <label><input class="inline" value="8" type="checkbox">Wiki</label>
          <label><input class="inline" value="9" type="checkbox">Forum</label>
          <label><input class="inline" value="10" type="checkbox">Additional Courses</label>
      </div>
          
      <div class="field">  
        <label for="comment">Any comments or suggestions?</label>
        <textarea id="comment" placeholder="Enter your comment here"></textarea>
        <button id="submit" type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

My CSS file

body {
  background-color: rgba(60, 60, 127, 0.7);
  color: white;
}

#title {
  margin-top: 50px;
  margin-bottom: 0.5rem;
}

#description {
  font-weight: 200;
  font-style: italic;
}

input, select, textarea, label  {
  display: block;
}

label {
  margin-bottom: 10px;
}

input, select, textarea, button {
  width: 100%;
  box-sizing: border-box;
}
  
.inline {
  display: inline;
  width: unset;
  margin: 0 0.7em 0 0;
  vertical-align: middle;    
}

select {
  height: 30px;
  box-sizing: border-box;
} 


h1, p {
  text-align: center;
}

form {
  background-color: #1b1b32;
  color: white;
  width: 50%;
  margin: 0 auto;
  padding: 40px;
  font-size: 20px;
}



.field {
  margin-top: 20px;
}

#comment {
  min-height: 120px;
  padding: 10px;
}

#submit {
  background-color: rgb(53, 150, 53);
  color: white;
  min-height: 30px;
  border: none;
  margin-top: 20px;
  font-size: large;
}

I run the all test and they are passed with success but I have the IDs in my html that I didn’t use. So, what am I doing wrong ? and What can i do for make it better ?

1 Like
2

I recently completed the same challenge and didn’t use all of the id’s it asked in the instructions. I thought they might ask for them to validate when you click run test, but I’m not sure!

1 Like
3

You don’t necessarily have to use all HTML elements, classes and id attributes in your CSS code. Remember that CSS is for styling the webpage so unless you want to specifically style those elements using the associated class, element, or id is not necessary. Sometimes you may assign an id or class for better understanding of what it is for or for later styling but it does not always need to be used.

As @Podrick pointed out, they are required for the passing of the project as the system checks to ensure they are there.

1 Like