Reports

Hello and thank you for your hard work.

First, I want to talk about the input element: The input element is a self-closing element, meaning you cannot write it as: <input></input>. If you inspect it, you'll notice that the text you placed between it is displayed as text in the root. That is, a floating element in the HTML. Which is structurally incorrect. You can read about DOM and DOM tree.

The second point that I found very interesting was the excessive use of margin. Using unnecessary margins and paddings might later annoy you when making your design responsive and force you to write a lot of extra code. We could have used display: flex; to display the inputs and labels in a single row. It helps us arrange the elements in a row and column layout, adjust the spacing, and do it professionally.

The second point is the structure of your code: You can use div and section optimally to have clean sections, more readable code, and avoid responsive issues.

And finally, I want to address this structure that was not followed:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
            
</body>
</html>

HTML is a markup language, and it's natural for it to ignore these minor issues and display the output. However, we must adhere to the main structure.

And in the end, I created them by packing the inputs and using a class. I placed the texts in the label and used the "for" attribute to connect them to the desired input.

body {
    background-color: rgb(200, 200, 200)
  }
  
  h1 {
    font-size: 20px;
  }
  
  #title {
    font-family: sans-serif;
    text-align: center;
    font-size: 25px;
  }
  
  #description {
    font-family: sans-serif;
    font-size: 16px;
    display: block;
  }
  
  label {
    font-family: sans-serif;
    font-size: 14px;
    display: block;
    text-align: center;
  }
  
  radio {
    display: inline;
  }
  
  input {
    font-family: sans-serif;
    font-size: 14px;
    display: block;
  }
  
  button {
    margin-left: 50%;
    margin-right: 50%;
    display: block;
    font-size: 25px;
  }
  
/* div styles */
  .radioInputs{
    /* center div */
    margin: 0 auto; 
    width: 50%;
    /* change display */
    display: flex;
    justify-content: space-between;
    padding: 1%;
  }

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



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <fieldset>
        <form id="survey-form" action="submit_form.php" method="post">
            <label id="name-label" for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Jane Doe" required>
            <label id="email-label" for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="[email protected]" required>
            <label id="number-label" for="age">Age (optional)</label>
            <input type="number" min="13" max="120" id="number" name="age" placeholder="23">
            <label for="role">What option best describes your current role?</label>
            <select id="dropdown" required>
                <option id="">Please select one</label>
                <option id="student">Student</option>
                <option id="FTJ">Full Time Job</option>
                <option id="FTL">Full Time Learner</option>
                <option id="Prefer-not">Prefer Not To Say</option>
                <option id="Other">Other</option>
            </select>
            <label>Would you recommend freeCodeCamp to a friend?</label>

            <!-- radio box -->
            <div class="radioInputs">
                <label for="definitely">Definitely</label>
                <input type="radio" id="recommend" name="recommend" value="definitely" checked>
            </div>
            <div class="radioInputs">
                <label for="maybe">Maybe</label>
                <input type="radio" id="recommend" name="recommend" value="maybe">
            </div>
            <div class="radioInputs">
                <label for="not-sure">Not sure</label>
                <input type="radio" id="recommend" name="recommend" value="not-sure">
            </div>

            <!--  -->
           
            <label id="feature">What is your favorite feature of freeCodeCamp?</label>
            <select id="feature" required>
                <option id="">Please select one</option>
                <option id="challenges">Challenges</option>
                <option id="projects">Projects</option>
                <option id="community">Community</option>
                <option id="open-source">Open source</option>
            </select>
            <label for="improvements">What would you like to see improved? (Check all that apply)</label>
            <input for="improvements" type="checkbox" name="improvements" value="front-end-projects">Front-end
            projects</input>
            <input for="improvements" type="checkbox" name="improvements" value="back-end-projects">Back-end
            projects</input>
            <input for="improvements" type="checkbox" name="improvements" value="data-visualization">Data
            visualization</input>
            <input for="improvements" type="checkbox" name="improvements" value="challenges">Challenges</input>
            <input for="improvements" type="checkbox" name="improvements" value="open-source-community">Open-source
            community</input>
            <label for="comments">Any comments or suggestions?</label>
            <textarea id="comments" name="comments" rows="4" cols="50"
                placeholder="Please write any comments or suggestions here"></textarea>
            <button id="submit" type="submit">Submit</button>
    </fieldset>
</body>

</html>

I hope you succeed and shine on this path.

79276946