In the following html code … there has always been an addition of …id=“dropdown-label” or (something-label) but there was no such mention of that particular id in the css code. Also was used but there was no mention of “survey-form” in the css code … There were many instances of such occurences … any explanations ?
HTML CODE -->
FCC: Survey FormSurvey Form
<main role="main" class="">
<div class="main">
<p id="description">Tell me your interest in freeCodeCamp and coding!</p>
<div id="form-area">
<form id="survey-form">
<div class="form-item">
<label id="name-label" for="name">Name:</label></br>
<input id="name" type="text" name="name" required placeholder="Your name"></br>
<label id="email-label" for="email">Email:</label></br>
<input id="email" type="email" name="email" required placeholder="email@example.com"></br>
<label id="number-label" for="number">Age:</label></br>
<input id="number" type="number" name="number" max="999" min="0" placeholder="30"></br>
</div>
<!-- select box -->
<div class="form-item">
<label id="dropdown-label" for="dropdown">Which option best describes your current role?</label></br>
<select id="dropdown">
<option value="" disabled selected>Select an option</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select></br>
</div>
<!-- radio button -->
<div class="form-item">
<label>What are your experience in coding?</label></br>
<input type="radio" name="recommend" value="0">freeCodeCamp is the first code learning project for you</br>
<input type="radio" name="recommend" value="1">You have tried other coding lessons</br>
<input type="radio" name="recommend" value="2">You have developed something as a personal project</br>
<input type="radio" name="recommend" value="3">You already have experience as a professional developer</br>
</div>
<!-- checkbox -->
<div class="form-item">
<label>What are you willing to learn at freeCodeCamp?</label></br>
<input type="checkbox" name="improve" value="0">HTML</br>
<input type="checkbox" name="improve" value="1">CSS</br>
<input type="checkbox" name="improve" value="2">JavaScript</br>
<input type="checkbox" name="improve" value="3">Other</br>
</div>
<!-- textarea -->
<div class="form-item">
<label id="comment-label" for="comment">Comment:</label></br>
<textarea id="comment" rows="3"></textarea>
</div>
<div id="submit-btn">
<input id="submit" class="button" type="submit" value="Submit">
</div>
</form>
</div>
<!-- end form-area -->
</div>
</main>
<footer class="header-footer">
<div class="footer">
<div class="center">
This page was built as a code learning project at <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
</div>
<div class="center">
</div>
</div>
</footer>
…
CSS CODE ---->
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 0;
font-family: Sunflower;
–main-color: hsl(104, 29%, 31%);
background-color: #dceace;
}
a:link {
color: hsl(0, 0%, 90%);
}
a:visited {
color: hsl(0, 0%, 70%);
}
a:hover {
color: hsl(0, 0%, 98%);
}
a:active {
color: hsl(0, 0%, 100%);
}
.main {
border-style: solid;
border-radius: 10px;
border-width: 1px;
border-color: #b4c4ae;
background-color: #f2f4ef;
margin: 2em 1em;
padding: 1em;
color: var(–main-color);
}
#description {
text-align: center;
}
.form-item {
padding: 1rem;
}
label {
font-weight: bold;
}
#comment {
width: 100%;
}
.button {
display: block;
margin: 0 auto;
border-radius: 8px;
color: white;
padding: 10px 20px;
background-color: var(–main-color);
border: none;
}
.button:hover {
background-color: hsl(104, 29%, 40%);
}
.header-footer {
background-color: var(–main-color);
width: 100%;
text-align: center;
color: white;
}