Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Cant tell where to start the CSS from to be honest. The test just says I passed without even doing the CSS part. Would be nice to the system require me to do it, so i can have a test guide on it just like I had with the HTML part.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
  <title>
    Stan's Survey Form
  </title>
</head>
<body>
  <h1 id="title">
  Stan's Survey Form
  </h1>
    <p id="description"> Thank you for taking time to build capacity, the world needs you. </P>
    <form id="survey-form">
      <p> <label id="name-label"> Name <input id="name" type="text" placeholder="Enter your name" required></input>
      </label></p>
      <p><label id="email-label"> Email <input id="email" type="email" placeholder="Enter your email" required></input>
      </label></p>
      <p><label id="number-label"> Age <input id="number" type="number" min="13" max="100" placeholder="Enter your age" required></input>
      </label></p>
      <p><label> Which option best describes your current role?
      <select id="dropdown">
        <option>Select current role</option>
        <option>Student</option>
        <option>Full Time job</option>
        <option>Full Time Learner</option>
        <option>Prefare not to say</option>
        <option>Other</option>
      </select>
      </label></p>
      <p> Would you recommend this Tech hub to a friend?
        <label><input type="radio" name="referral" value="Definitely"> Definitely 
      </label>
      <label><input type="radio" name="referral" value="Maybe"> Maybe 
      </label>
      <label><input type="radio" name="referral" value="Not-sure"> Not Sure 
      </label></p>
      <P> What would you like to learn? <label><input type="checkbox" value="Front-end"> Front-end development </label>
      <label><input type="checkbox" value="Figma"> Figma 
      </label>
      <label><input type="checkbox" value="Digital-Marketing"> Digital Marketing
      </label>
      <label><input type="checkbox" value="Event-Planning"> Event Planning
      </label>
      <label><input type="checkbox" value="Baking"> Baking
      </label>
      <label><input type="checkbox" value="Web-Development"> Web Development
      </label>
      </p>
      <p><label> Any Comments? <textarea>
      </textarea></label></p>
      <button id="submit"> Submit
      </button>
    </form>
</body>
</html>

/* file: styles.css */
h1 {
margin: auto;
}
input {

}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

There is not many css tests in all the projects, because that would make the projects all pretty similar. Instead have fun, make a project you like!

3

I just needed a guide through the exercise for the linked css part.

4

Some of the other projects have a few CSS requirements. With a form, the most important is the structure, semantics, and accessibility, which is just HTML.

CSS is about the look more than functionality (with a few exceptions, like responsiveness). As such it is up to you to come up with the CSS for how you want your project to look. I’d suggest looking at the example project and maybe doing a bit of searching for form examples and seeing how much you can implement. If you need help you can always post it in this thread or create a new thread.

5

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