create two files named:

  • index.html
  • style.css

Html Code:(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">
    <title>Survey form</title>
    <link rel="stylesheet" href="style.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 id="name">Name</label><br/>
        <input type="text" name="" value="" id="name-label" placeholder="Enter your name" required /><br/>
        <label id="email">Email</label><br/>
        <input type="email" name="" id="email-label" placeholder="Enter your Email" required /><br/>
        <label id="number">Age(optional)</label><br/>
        <input type="number" min="0" max="100" id="number-label" placeholder="Age" /><br/>
        <label>Which option best describes your current role</label><br/>
        <select name="" value="" id="dropdown" required>
            <option selected value="" disabled>Select current role</option>
            <option value="">Student</option>
            <option value="">Full Time Job</option>
            <option value="">full Time Learner</option>
            <option value="">Prefer not to say</option>
            <option value="">Other</option>
        </select><br/>
        <label>Would you recommend freecodecamp to a friend </label><br/>
        <input type="radio" name="ali" id="Definetly" /><label for="Definetly">Definetly</label><br/>
        <input type="radio" name="ali" id="Maybe" /><label for="Maybe">Maybe</label><br/>
        <input type="radio" name="ali" id="Notsure" /><label for="Notsure">Notsure</label><br/>
        <label>What is your favourite feature of freeCodeCamp</label><br/>
        <select name="" id="" required>
            <option selected value="" disabled>Select an option</option><br/>
            <option value="">Challenges</option><br/>
            <option value="">Projects</option><br/>
            <option value="">Community</option><br/>
            <option value="">Open source</option><br/>
        </select><br/>
        <label>What would you like to see improved(select all that apply)</label><br/>
        <input type="checkbox" name="" value="" id="Front-end-Projects" /><label for="Front-end-Projects">Front-end projects</label><br/>
        <input type="checkbox" name="" value="" id="Back-end-Projects" /><label for="Back-end-Projects">Back-end Projects</label><br/>
        <input type="checkbox" name="" value="" id="Data-Visualization" /><label for="Data-Visualization">Data Visualization</label><br/>
        <input type="checkbox" name="" value="" id="Challenges" /><label for="Challenges ">Challenges </label><br/>
        <input type="checkbox" name="" value="" id="Open-Source-Community" /><label for="Open-Source-Community">Open Source Community</label><br/>
        <input type="checkbox" name="" value="" id="Gitter-help-rooms" /><label for="Gitter-help-rooms">Videos</label><br/>
        <input type="checkbox" name="" value="" id="Videos" /><label for="Videos">Videos</label><br/>
        <input type="checkbox" name="" value="" id="City-Meetups" /><label for="City-Meetups">City Meetups</label><br/>
        <input type="checkbox" name="" value="" id="Wiki" /><label for="Wiki">Wiki</label><br/>
        <input type="checkbox" name="" value="" id="Forum" /><label for="Forum">Forum</label><br/>
        <input type="checkbox" name="" value="" id="Additional-Courses" /><label for="Additional-Courses">Additional Courses</label><br/>
        <label>Any comments or suggestions</label><br/>
        <textarea placeholder="Enter your comment here..."></textarea><br/>
        <input type="submit" value="submit" id="submit" />
    </form>
</body>
</html>

Css Code:(style.css)

*{
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;   
}
body{
    background-color: rgb(63, 57, 117);
}
h1{
    text-align: center;
    font-size: 25px;
    color: white;
}
p{
    text-align: center;
    color: white;
}
form{
    border:2px solid black;
    width:50%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #191936;
    font-size: 20px;
    color: white;
}
form>*{
    margin-left: 20px;
    margin-right: 20px;
}
input[type=text],input[type=email],input[type=number],input[type=submit],select,textarea{
    margin-top: 5px;
    margin-bottom: 20px;
    width:90%;
    padding: 10px;
    border-radius: 5px;
    border:1px solid black;
    outline-offset: 0;
}
input[type=radio]{
    display:inline-block;
    padding:0;
    margin-left: 18px;
    margin-right: 0;
    cursor: pointer;
}
input[type=checkbox]{
    display: inline-block;
    padding:0;
    margin-left: 18px;
    margin-right: 0;
    cursor: pointer;
}
textarea{
    height:100px;
}
input,select,textarea::placeholder{
    font-size: 17px;
}
#Additional-Courses,#Notsure{
    margin-bottom: 20px;
}
#submit{
    background-color: green;
    font-size:20px;
    color: white;
}
label{
    display:inline-block;
}
label[for]{
    margin-left: 8px;
    cursor: pointer;
    line-height: 30px;
}
@media screen and (max-width:500px) { 
    form{
        width:97%;
    }
    form>*{
        margin-left: 5px;
        margin-right: 5px;
    }           
}