Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Why is it that we are not given instructions on CSS just like the HTML?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>FreeCodeCamp Survey Form</title>
  </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">
      <fieldset>
        <div>
        <label id="name-label">Name <input id="name" type="text"  placeholder="Enter your name" required  </label>
        </div>
        <div>
        <label id="email-label">Email <input id="email" type="email" placeholder="Enter your email" required </label>
        </div>
        <div>
        <label id="number-label">Age(optional) <input id="number" type="number" min="8" max="130" placeholder="Age" required</label>
        </div>
      </fieldset>
      <fieldset>
        <div>
        <label>Which options best describes the current role?
          <select id="dropdown">
            <option value="">Select a 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 say</option>
            <option value="5">Others</option>
          </select>
        </label></div>
        <div>
        <label for="recommend">Would you recommend a freecodecamp to a friend?<input type="radio" value="definitely" name="recommend">Definitely</label>
        <label for="recommend"><input type="radio" value="maybe" name="recommend">Maybe</label>
        <label><input type="radio" value="not-sure" name="recommend">Not sure</label> 
        <label for="features">What is your favorite features?<input type="checkbox" name="features" value="projects" >Projects</label>  
        <label><input type="checkbox" name="features" value="community-discussion">Community Discussion</label>
        <label><input type="checkbox" name="features" value="open-source">Open Source</label>
        </div>    
      </fieldset>
      <fieldset>
        <div>
        <label for="suggestions">Any Suggestions?
        <textarea id="suggestions" row="5" col="50" placeholder="Enter your suggestions here"></textarea>
        <input id="submit" type="submit">
        </div>
      </fieldset>
    </form>
  </body>
<html>

/* file: styles.css */
body {
  background-color: #0000cd;
}

h1, p {
  text-align: center;
  color: white
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

the instructions say:

Give it your own personal style. Happy Coding!

So that means no instructions will be given and you are free to play with the styling.

3

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