Survey Form - Build a Survey Form

HTML-CSS
1

I passed all the test case but i am struck at css part
in Html i got the idea what i have to do but in css i have no clue from where to start and how to proceed further :smiling_face_with_tear:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <label for="name" id="name-label">Name</label>
    <input id="name" type="text" placeholder="Enter your name" required value="name">
    <br>
    <label for="email" id="email-label">Email</label>
    <input id="email" type="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" placeholder="Age">
    <br>
    <spam>Which option best describes your current role?<spam>
    <select id="dropdown">
      <option disabled hidden selected>Select current role</option>
      <option value="student">Student</option>
      <option value="job">Full time job</option>
      <option value="learner">Full time Learner</option>
      <option value="not">Prefer not to say</option>
      <option value="other">Other</option>
    </select>
    <br>
    <spam>Would you recommend freeCodeCamp to a friend?</spam>
    <input type="radio" id="definately" name="radio" value="def">
    <label for="definately">Definately</label>
    <input type="radio" id="maybe" name="radio" value="may">
    <label for="maybe">Maybe</label>
    <input type="radio" id="nots" name="radio" value="not">
    <label for="nots">Not sure</label>
    <br>
  <spam>What is your favorite feature of freeCodeCamp?</spam>
  <select id="dropdown">
    <option disabled hidden selected>Select an option</option>
    <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="open">Open source</option>
  </select>
  <br>
  <spam>What would you like to see improved? (Check all that apply)<spam>
    <input type="checkbox" id="front" name="frontend" value="fro">
    <label for="front">Front-end</label><br>
    <input type="checkbox" id="back" value="back">
    <label for="back">Back-end</label><br>
    <input type="checkbox" id="data" value="datavisualization">
    <label for="data">Data Visualization</label><br>
    <input type="checkbox" id="challenge" value="chall">
    <label for="challenge">Challenges</label><br>
    <input type="checkbox" id="open" value="opensource">
    <label for="open">Open Source</label><br>
    <input type="checkbox" id="git" value="gitter">
    <label for="git">Gitter Help Rooms</label><br>
    <input type="checkbox" id="video" value="videos">
    <label for="vider">Videos</label><br>
    <input type="checkbox" id="city" value="citi">
    <label for="city">City Meetups</label><br>
    <input type="checkbox" id="wikki" value="wiki">
    <label for="wikki">Wikki</label><br>
    <input type="checkbox" id="forun" value="forum">
    <label for="forum">Forum</label><br>
    <input type="checkbox" id="additional" value="add">
    <label for="additional">Additional Cources</label><br>

    </br>
    <label for="message">Any comments or suggestions?</label>
    <textarea id="message" placeholder="Enter your comment here..."></textarea>
    <br>
    <button id="submit">Submit</button>
  </form>
</body>
</html>

/* file: styles.css */
.body{
    justify-content:center;
    justify-item:center;
    align-item:center;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Concerning your current CSS, you are trying to use flexbox properties but you haven’t set the display to flex. Also, I’m assuming you meant to target the body element and not any element with a class of body.

I don’t think any of the courses prior to the Survey Form project introduce flexbox, so while you are more than welcome to learn flexbox on your own and use it on this project, if that is too much for you at this point then just use the CSS that you have learned so far to style your form. Refer to the registration from course you just completed to help you with that.

3

thats the thing i dont remember the properties used in css
i dont understant where to start in css at all

and about the justify content i just copied it from google and hoped that it works i dont know a thing abt it

4

You might want to go through the Registration Form course again as that will apply directly to the Survey Form project.

Then you probably don’t want to use it at this time. There is nothing wrong with using google to learn new things, but I would recommend against copy/pasting stuff you don’t understand and hoping that it will work. You should make the effort to understand what you are copy/pasting before you actually use it. If teaching yourself flexbox is beyond your capabilities at the moment, that’s fine, you are just beginning, you can only learn so much at a time. You will get to flexbox in FCC soon.

5

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