Survey and Tribute Certification Projects

HTML-CSS
1

Hello,

I’ve used

in both my Survey and Tribute Certification Projects, but when I view the projects in my profile, the alignments are out.

Any suggestions please.

2

Post the entire html and css code.

3 
<!DOCTYPE html>
<head>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css"/>
</head>
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
</header>
<fieldset>
<form id="survey-form">
  <div id="survey-form" class="form-group">  
  <label for="name" id="name-label">Name: </label><br>
  <input id="name" type="text" class="form-control" placeholder="Enter your name" required /></div><br> 
  <div class="form-group">
    <label for="email" id="email-label">Email: </label><br>
    <input id="email" type="email" class="form-control" placeholder="Enter your email"required error /></label></div><br>
    <div class="form-group">
<label for=:"age" id="number-label">Age: </label><br> 
<input id="number" type="number" min="10" max="120" class="form-control" placeholder="10" required /></div><br> 
  <div id="survey-form" class="form-group">
 <label for="referrer">What is your favorite feature of freeCodeCamp?</label>
  <br><select id="dropdown" name="referrer" class="survey-form" required>
    <option disabled selected value="">Select an option</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Open Source</option>
  </select>
</div><br>
  <div id="survey-form" class="form-group">
  <label>Would you recommend freeCodeCamp to a friend?</label><br>
<input id="definitely" type="radio" name="user-recommend" value="definitely" class="survey-form" />Definitely<br>
 <input id="maybe" type="radio" name="user-recommend" value="maybe" class="survey-form" />Maybe <br>
 <input id="not sure" type="radio" name="user-recommend" value="not sure" class="survey-form" />Not sure </div><br>  
<div id="survey-form" class="form-group">
 <label>What would you like to see improved? (Check all that apply)<br></label>
  <input id="Front-end Projects" type="checkbox" value="Front-end Projects" name="answer" />Front-end Projects<br>
   <input id="Back-end Projects" type="checkbox" value="Back-end Projects" name="answer" />Back-end Projects<br>
   <input id="Data Visualization" type="checkbox" value="Data Visualization" name="answer" />Data Visualization<br>
<input id="Challenges" type="checkbox" value="Challenges" name="answer" />Challenges<br>
<input id="Open Source Community" type="checkbox" value="Open Source Community" name="answer" />Open Source Community<br>
<input id="Gitter help rooms" type="checkbox" value="Gitter help rooms" name="answer" />Gitter help rooms<br>
<input id="Videos" type="checkbox" value="Videos" name="answer" />Videos<br>
<input id="City Meetups" type="checkbox" value="City Meetups" name="answer" />City Meetups<br>
<input id="Wiki" type="checkbox" value="Wiki" name="answer" />Wiki<br>
<input id="Forum" type="checkbox" value="Forum" name="answer" />Forum<br>
<input id="Additional Courses" type="checkbox" value="Additional Courses" name="answer" />Additional Courses
</div><br>   
   <div id="survey-form" class="form-group">
   <label>Any comments or suggestions?</label><br>
   </div><textarea></textarea></div><br>
   <div id="survey-form" class="form-group">
   <input type="submit" id="submit" value="Submit">
   </div>
   </form>
</fieldset>
</html>

body {color: white;
      font-family: Helvetica , Arial, sans-serif;
      background: purple linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) );
      font-size: 18px;
      font-weight: normal;         
      text-align: justified;
      border: none;
}

h1 {font-size: 2.1em;
font-weight: normal;
padding: 50px 10px 0px 10px;
}

p {font-size: 1.1em;
font-style: italic;
}

h1, p {text-align: center;
      border: none;
}

fieldset {background-color: rgba(27, 27, 50, 0.8);
      padding: 60px 60px; /*vertical horizontal*/
      margin: 40px 380px 40px 380px;
      display: block;
      width: 620px;
      border: none;     
}
input {box-sizing: border-box;     
      padding: 0 10px;
      width: 100%;
      height: 40px;
      margin-top: 5px;
      border-radius: 5px;
      color: dark-grey;
      border: none;
}
select {box-sizing: border-box;      
      padding: 0 10px;
      width: 100%;
      height: 40px; 
      border-radius: 5px;
      margin-top: 5px;
      font-color: dark-grey;
}
input[type="radio"] {
  width: 12px;
  height: 12px;
  padding: 20px;
  margin-top: 10px;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  padding: 20px;
  margin-top: 10px;
}

textarea  {box-sizing: border-box;      
      padding: 0 10px;
      width: 100%;
      height: 80px; 
      color: dark-grey;
      margin-top: 10px;
      border: none;
      border-radius: 5px;
}

input[type="submit"]  {
      padding: 20px 10px 30px 10px;
       width: 100%;
       height: 30px;
       border: none;
       color: white;
       background-color: green;
       margin-top: 50px;
}
4

There are too many mistakes to write about them here. Check it for yourself:
https://validator.w3.org/nu/

  • the same ids duplicated: id="survey-form"
  • characters that don’t belong there: for=:"age"
    .
    .
    .

Try to fix all the html code first. Then, make your ‘form’ element to be flexible, as this example shows:

form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: your color;
  width: 550px;
  padding: 15px;
}

That way the header, paragraph text and form will move all together as you change a display size.

1 Like
5

Corrected all my html code- MANY thanks. Issue not resolved- please see screenshots:

1
1944×746 100 KB

2
21127×817 52.3 KB

3
31126×816 53.9 KB

4
41127×811 42.5 KB

6

Another example of inconsistency (just changed and saved the code to make the text “Check all that apply” smaller)- the preview within the project is correct, but viewing the completed project through my profile doesn’t correlate:

1
1710×240 42.3 KB

2
2923×163 16.4 KB

3
31003×419 55.7 KB

4
41126×699 62.9 KB

7

Here is my code for reference:

<!DOCTYPE html>
<head>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css"/>
</head>
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
</header>
<fieldset>
<form id="survey-form">
  <div id="survey-form" class="form-group">  
  <label for="name" id="name-label">Name: </label><br>
  <input id="name" type="text" class="form-control" placeholder="Enter your name" required /></div><br> 
  <div class="form-group">
    <label for="email" id="email-label">Email: </label><br>
    <input id="email" type="email" class="form-control" placeholder="Enter your email"required error /></label></div><br>
    <div class="form-group">
<label for=:"age" id="number-label">Age: </label><br> 
<input id="number" type="number" min="10" max="120" class="form-control" placeholder="10" required /></div><br> 
  <div id="survey-form" class="form-group">
 <label for="referrer">What is your favorite feature of freeCodeCamp?</label>
  <br><select id="dropdown" name="referrer" class="survey-form" required>
    <option disabled selected value="">Select an option</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Open Source</option>
  </select>
</div><br>
  <div id="survey-form" class="form-group">
  <label>Would you recommend freeCodeCamp to a friend?</label><br>
<input id="definitely" type="radio" name="user-recommend" value="definitely" class="survey-form" />Definitely<br>
 <input id="maybe" type="radio" name="user-recommend" value="maybe" class="survey-form" />Maybe <br>
 <input id="not sure" type="radio" name="user-recommend" value="not sure" class="survey-form" />Not sure </div><br>  
<div id="survey-form" class="form-group">
 <label>What would you like to see improved? (Check all that apply)<br></label>
  <input id="Front-end Projects" type="checkbox" value="Front-end Projects" name="answer" />Front-end Projects<br>
   <input id="Back-end Projects" type="checkbox" value="Back-end Projects" name="answer" />Back-end Projects<br>
   <input id="Data Visualization" type="checkbox" value="Data Visualization" name="answer" />Data Visualization<br>
<input id="Challenges" type="checkbox" value="Challenges" name="answer" />Challenges<br>
<input id="Open Source Community" type="checkbox" value="Open Source Community" name="answer" />Open Source Community<br>
<input id="Gitter help rooms" type="checkbox" value="Gitter help rooms" name="answer" />Gitter help rooms<br>
<input id="Videos" type="checkbox" value="Videos" name="answer" />Videos<br>
<input id="City Meetups" type="checkbox" value="City Meetups" name="answer" />City Meetups<br>
<input id="Wiki" type="checkbox" value="Wiki" name="answer" />Wiki<br>
<input id="Forum" type="checkbox" value="Forum" name="answer" />Forum<br>
<input id="Additional Courses" type="checkbox" value="Additional Courses" name="answer" />Additional Courses
</div><br>   
   <div id="survey-form" class="form-group">
   <label>Any comments or suggestions?</label><br>
   </div><textarea></textarea></div><br>
   <div id="survey-form" class="form-group">
   <input type="submit" id="submit" value="Submit">
   </div>
   </form>
</fieldset>
</html>
CSS
body {color: white;
      font-family: Helvetica , Arial, sans-serif;
      background: purple linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) );
      font-size: 18px;
      font-weight: normal;         
      text-align: justified;
      border: none;
}

h1 {font-size: 2.1em;
font-weight: normal;
padding: 50px 10px 0px 10px;
}

p {font-size: 1.1em;
font-style: italic;
}

h1, p {text-align: center;
      border: none;
}

fieldset {background-color: rgba(27, 27, 50, 0.8);
      padding: 60px 60px; /*vertical horizontal*/
      margin: 40px 380px 40px 380px;
      display: block;
      width: 620px;
      border: none;     
}
input {box-sizing: border-box;     
      padding: 0 10px;
      width: 100%;
      height: 40px;
      margin-top: 5px;
      border-radius: 5px;
      color: dark-grey;
      border: none;
}
select {box-sizing: border-box;      
      padding: 0 10px;
      width: 100%;
      height: 40px; 
      border-radius: 5px;
      margin-top: 5px;
      font-color: dark-grey;
}
input[type="radio"] {
  width: 12px;
  height: 12px;
  padding: 20px;
  margin-top: 10px;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  padding: 20px;
  margin-top: 10px;
}

textarea  {box-sizing: border-box;      
      padding: 0 10px;
      width: 100%;
      height: 80px; 
      color: dark-grey;
      margin-top: 10px;
      border: none;
      border-radius: 5px;
}

input[type="submit"]  {
      padding: 20px 10px 30px 10px;
       width: 100%;
       height: 30px;
       border: none;
       color: white;
       background-color: green;
       margin-top: 50px;
}
8

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