Survey Form - Build a Survey Form

HTML-CSS
1

I completed the survey form already but am trying to incorporate some css to make it look better. I understand that its not set up to submit anywhere. I was under the impression using a block display for inline elements would move them down but that didnt quite work either did margins. Can someone please explain.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
</head>
<body>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<div class="personal">
  <label id="name-label"> Name:<input type="text" placeholder="Enter your name" id="name" required></label>
  <label id="email-label"> Email:<input type="email" placeholder="Enter your email" id="email" required></label>
  <label id="number-label"> Age (Optional)<input type="number" placeholder="Age" max="99" min="13" id="number"></label>
</div>

<div class="roles">
  <p>Which option best describes your current role?</p>
  <label id="dropdown-list">
    <select id="dropdown">
      <option>Select An Option</option>
      <option>Student</option>
      <option>Intern</option>
      <option>Full Time Employee</option>
      <option>Part Time Employee</option>
      <option>Other</option>
    </select>
  </label>
  
</div>

<div class="recommend">
  <p>Would you recommend freeCodeCamp to a friend?</p>
  <input type="radio" name="radio" value="definitley" id="choice"> Definitley
  <input type="radio" name="radio" value="not-sure"  id="negative"> Not Sure
  <input type="radio" name="radio" value="maybe"  id="choice"> Maybe
  <input type="radio" name="radio" value="not-at-this-time"  id="negative"> Not At This Time  
</div>

<div class="features">
  <p>What is your favorite feature of freeCodeCamp?</p>
  <select>
    <option value="dropdown">Select An Option</option>
    <option value="community" name="community">Community</option>
    <option value="challenges" name="challenges">Challenges</option>
    <option value="projects" name="projects">Projects</option>
    <option value="open-source" name="open-source">Open Source</option>
  </select>  
</div>

<div class="improvements">
  <p>What would you like to see improved? (Check all that apply)</p>
    <input type="checkbox" value="front-end" name="front-end">Front-end Projects
    <input type="checkbox" value="back-end" name="back-end">Back-end Projects
    <input type="checkbox" value="vis-data" name="">Data Visualization
    <input type="checkbox" value="open-source" name="open-source">Open Source Community
    <input type="checkbox" value="extra" name="extra">Additional Courses
    <input type="checkbox" value="challenge-2" name="challenge-2">Challenges
</div>

<div class="feedback">
  <textarea cols="35" rows="3"> </textarea> 
</div>

<button class="submit" type="submit" id="submit">Submit</button>

</body>
</html>

/* file: styles.css */
body {
background-image: url("http://govexec.com/media/background.jpg")
}
h1
{
  text-align:center;
}
p {
  font-weight: bold; 
  text-align:left;
  font-family:Georgia;
}
 .submit {
   background-color:tan;
   border-color:black;
   font-family:Georgia;
   font-weight:bold; 
   border-radius: 8px;
 }
 .personal {
  display:block;
 }

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Display block makes the element take up the entire row it is in (within its parent).

If you need help with layout please create a codepen and give us a link then take a screenshot to show us the issue you are referring to.

1 Like
3

Ah okay I had a feeling I wasnt remembering quite correctly, I did check w3schools but ended up more confused.

4

It is a little hard to understand these ideas without looking at the code and the resulting effects. MDN has a good explanation but you should read the code samples to really get it.

5

Do you have a link I can refer to? I am not sure what MDN is?

6

here is a specific link but the whole site has much more than this in the html/css and other realms

7

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