index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Survey Form</title>
    <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">

        <fieldset>
            <label for="name" id="name-label">
                Name
                <input type="text" id="name" required placeholder="Enter your name">
            </label>
            <label for="email" id="email-label">
                Email
                <input type="email" id="email" required placeholder="Enter your Email">
            </label>
            <label for="age" id="number-label">
                Age (optional)
                <input type="number" id="number" min=10 max=99 required placeholder="Age">
            </label>

        </fieldset>

        <fieldset>
            <label>
                Which option best describes your current role?
                <select id="dropdown">
                    <option selected value="" disabled>Select current role</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 to not say">Prefer to not say</option>
                    <option value="Other">Other</option>
                </select>
            </label>
        </fieldset>

        <fieldset>
            <p>Would you recommend freeCodeCamp to a friend?</p>
            <input type="radio" name="recommend" value="Definitely">
            <label>Definitely</label><br>
            <input type="radio" name="recommend" value="Maybe">
            <label>Maybe</label><br>
            <input type="radio" name="recommend" value="Not sure">
            <label>Not sure</label>

        </fieldset>

        <fieldset>
            <p>What is your favorite feature of freeCodeCamp?</p>
            <select id="dropdown">
                <option selected value="" disabled>Select an option</option>
                <option value="Challenges">Challenges</option>
                <option value="Projects">Projects</option>
                <option value="Community">Community</option>
                <option value="Open Source">Open Source</option>
            </select>
        </fieldset>

        <fieldset>
            <p>What would you like to see improved? (Check all that apply)</p>
            <input type="checkbox" id="front-end-project" value="Front-end Projects">
            <label for="front-end-project">Front-end Projects</label><br>

            <input type="checkbox" id="back-end-project" value="Back-end Projects">
            <label for="back-end-project">Back-end Projects</label><br>

            <input type="checkbox" id="data-visualization" value="Data Visualization">
            <label for="data-visualization">Data Visualization</label><br>

            <input type="checkbox" id="challenges" value="Challenges">
            <label for="challenges">Challenges</label><br>

            <input type="checkbox" id="open-source-community" value="Open Source Community">
            <label for="open-source-community">Open Source Community</label><br>

            <input type="checkbox" id="gitter-help-rooms" value="Challenges">
            <label for="gitter-help-rooms">Challenges</label><br>

            <input type="checkbox" id="videos" value="Videos">
            <label for="videos">Videos</label><br>

            <input type="checkbox" id="city-meetups" value="City Meetups">
            <label for="city-meetups">City Meetups</label><br>

            <input type="checkbox" id="wiki" value="Wiki">
            <label for="wiki">Wiki</label><br>

            <input type="checkbox" id="forum" value="Forum">
            <label for="forum">Forum</label><br>

            <input type="checkbox" id="additional-course" value="Additional Courses">
            <label for="additional-course">Additional Courses</label>
        </fieldset>

        <fieldset>
            <label>
                Any comments or suggestions?
                <textarea rows="7" placeholder="Enter your comment here..."></textarea>
            </label>
        </fieldset>

        <input type="submit" value="Submit" id="submit">
    </form>
</body>

</html>