Build a Survey Form, Positing Things Vertically

HTML-CSS
1

Tell us what’s happening:
As you can probably tell from the code I have no real idea how to position my html elements yet especially vertically. I am also missing the last two p elements from the form as well. I hope I am posting this in the correct format and thanks.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
<body>

  <h1 id="title">Survey Form</h1>
  <div id="box1">
    <p id="description">Let us know how we can improve freeCodeCamp</p>
    <form id="survey-form">
      <label id="name-label" for="name">* Name: </label>
      <input type="name" id="name" value="Enter your name" required>
      <br>
      <label id="email-label" for="email">* Email: </label>
      <input type="email" id="email" placeholder="Enter your Email" required></input>
      <br>
    <label id="number-label" for="age">* Age: </label>
    <input type="number" id="number" placeholder="Age" min="0" max="150" required></input>
    </form>
    <form id="dropdown">
      <label for="role">Which option best describes your current role?</label>
      <select type="text" name="role" placeholder="Select an option">
        <option value="">Select an option</option>
        <option value="Student">Student</option>
        <option value="Full Time Job">Full Time Job</option>
        <option value="Full Time Learner">Full Time Learner</option>
        <option value="Prefer not to say">Pefer not to say</option>
        <option value="Other">Other</option>
      </input>
  </form>
  <br>
    <p>* How likely is that you would recommend freeCodeCamp to a friend?</p>
    <input type="radio" name="recommend" value="Definitely">Definitely</input>
    <input type="radio" name="recommend" value="Maybe">Maybe</input>
    <br>
    <input type="radio" name="recommend" value="Not sure">Not sure</input>
    <br>
    <label for="fav">What do you like most in FCC:</label>
      <select type="text" name="role" placeholder="Select an option">
        <option value="">Select an option</option>
        <option value="Chanllenges">Chanllenges</option>
        <option value="Projects">Projects</option>
        <option value="Community">Community</option>
        <option value="Open Source">Open Source</option>
      </input>
    <br>
    <p>Things that should be improved in the future
(Check all that apply):</p>
    <input type="checkbox" name="futurestuff" value="front-end" />Front-End Projects
    <input type="checkbox" name="futurestuff" value="back-end" />Back-End Projects
    <input type="checkbox" name="futurestuff" value="datavizulization" />Data Visualization
    <input type="checkbox" name="futurestuff" value="Challenges" />Challenges
    <input type="checkbox" name="futurestuff" value="OpenCommunity" />Open Source Community
    <input type="checkbox" name="futurestuff" value="gitterhelprooms" />Gitter help rooms
    <input type="checkbox" name="futurestuff" value="videos" />Videos
    <input type="checkbox" name="futurestuff" value="citymeetups" />City Meetups
    <input type="checkbox" name="futurestuff" value="wiki" />Wiki
    <input type="checkbox" name="futurestuff" value="forum" />Forum
    <input type="checkbox" name="futurestuff" value="additionacourse" />Additional Courses
<br>
<p>Any Comments or Suggestions?</p>
<textarea name="commnets" id="comments" cols="40" rows="5">Enter your comment here...</textarea>
<br>
<input id="button" type="submit" name="Submit" value="Submit">
</div> 
</body>
</html>

Your code so far

body {
background: powderblue;
}

h1 {
text-align: center;
}
#box1 p {
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
#survey-form {
text-align: center;

}
label {
line-height: 3.5em;
text-align: right;
display: inline-block;
}
input, select{
font-size: 125%;
width: 275px;
float: center;
margin-left: 35%;
display: inline-block;
}

#box1 {
width: 1000px;
height: 1000px;
background: white;
border: block;
margin: auto;
margin-bottom: 50px;
border-radius: 5px;
}

#button {
margin: auto;
border-radius: 5px;
background: cyan;
width: 125px;
height: 35px;
color: white;
}
Your browser information:

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

Link to the challenge:

2

Hi,

I don’t see a question so I’ll just go with what you’ve posted.

This is a survey form but you only have a small piece of it in the <form> elements.
To build this, start off reading the user stories one at a time. Do the first one and when you think you have it correct run the test and if it passes, move on to the next.
Don’t worry about any CSS until you have all the user stories passing.

Once the user stories are done, then go on and style your form.

As an aside, codepen assumes the basics for you so you don’t need to;
declare the doctype or use the <html> and <body> elements.

Have fun!

3

okay, the first thing you need to change is the name input. now you did pretty well with everything else (the html) and instead of value = "Enter Your Name" it should be placeholder = "Enter Your name"
maybe you should re-learn basic css or get a better explanation for beginners at https://www.khanacademy.org/computer-programming.
if you need an example, you can use my pen as a template:
https://codepen.io/Glaurung/full/BvEmyd