Survey Form - Build a Survey Form

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

hey guys, i don’t have a problem with my code or need help with it. i just want to find out if i should style the html before i run my code? or do i only do the html then run my code
or can i start styling it ?
im sorry if this question might be confusing xD

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
<!--TOP HEADING OUTSIDE FORM-->
  <h1 id="title">Web App Survey For Businesses</h1>
  <p id="description">What are you looking for the most in a web application that will make your life easier?</p>

<!--FORM-->
  <form id="survey-form">

   <label id="name-label">
    <p>Name</p>
    <input id="name" type="text" placeholder="Enter your name">
   </label>

   <label id="email-label">
    <p>Email</p>
    <input id="email" type="text" placeholder="Enter your email">
   </label>
    
   <label id="number-label">
    <p>Age</p>
    <input id="number" type="number" placeholder="Enter your age">
   </label>

  <label id="dropdown-label">
    <p>Which option best describes your issue?</p>  
    <select id="dropdown">
     <option>I struggle to keep all of my businesses data in place</option>
     <option>I dont have a structured system to log my employees working hours</option>
     <option>My payment system is outdated</option>
    </select>
   </label>

   <label id="radio-label">
     <p>Which would you prefer as a solution to your problem?</p>
     <p><input type="radio" name="radio-option"> Custom App</p>
     <p><input type="radio" name="radio-option"> Existing Free App</p>
     <p><input type="radio" name="radio-option"> Existing Paid App</p>
    </label>

    <label id="checkbox-label">
      <p>What could make a diffirence?</p>
      <p><input type="checkbox" value="check-1"> Stock Taking App</p>
      <p><input type="checkbox" value="check-2"> Chat Bot</p>
      <p><input type="checkbox" value="check-3"> CRM System</p>
    </label>

    <label id="textarea-label">
      <p>Any extra information</p>
      <input type="textarea" placeholder="Enter your comment here">
    </label>

    <div>
      <input type="submit" id="submit">
    <div>
    

   

  </form>

</body>
</html>

/* file: styles.css */

  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

You can do either. Whatever is easiest for you. I don’t think there are any actual CSS tests for this project, so you don’t even need to style it to pass all the tests.

1 Like