Hi All,
I have been actively trying to learn web development for about a year now on and off. I have tried to learn via many different resource however i was struggling to piece everything together so i decided to return back to the “responsive web design” course. I have followed through all the tutorials and completed the Survey form.
I have been struggling with the CSS styling on the Survey Form, the form is functional and does work. I am able to proceed with the other tutorials however i am wondering if i should go back and try to complete the Survey to replicate it as best as possible with CSS.
In addition is it considered cheating if i inspect the Survey form on https://survey-form.freecodecamp.rocks/.
I can see their is div elements used to break up the form into its respected grouping. However as of far following the FCC tutorials we have only covered sections, articles but not so much on divs.
What would be advisable to stay and finish it as best as possible or move on? I have pasted my code below, please let me know your thoughts.
Also do let me know if i am on the right path or if i have missed anything.
Any suggestions or tips will be highly appreciated.
Many Thanks,
Serk
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>survey-form.freecodecamp.rocks</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>
<div>
<form id="survey-form">
<label id="name-label">Name<input id="name" type="text" placeholder="Enter your name" required></input> </label>
<label id="email-label">Email<input id="email" type="email" required placeholder="Enter your emmail"></input></label>
<label id="number-label">Age<input id="number" type="number" min="1" max="120" placeholder="Age" pattern="[0-9]"></input></label>Which option best describes your current role?
<select id="dropdown">
<option>Select a current role</option>
<option>Student</option>
<option>Full Time job</option>
<option>Full Time learner</option>
<option>Prefer Not to say</option>
<option>Other</option>
</select>
<label><input type="radio" name="radio-btn"value="1"></input>Definitely</label>
<label><input type="radio" name="radio-btn" value="2"></input>Maybe</label>
<label><input type="radio" name="radio-btn" value="3"></input>Not Sure</label>
<select id="dropdown">
<option>Select an option</option>
<option>Challenges</option>
<option>Projects job</option>
<option>Community</option>
<option>Open Source</option>
</select>
<label>What would you like to see improved? (Check all that apply)
<label><input type="checkbox" value="1">Front-end Projects</input></label>
<label><input type="checkbox" value="2">Back-end Projects</input></label>
<label><input type="checkbox" value="3">Data Visualization</input></label>
<label><input type="checkbox" value="4">Challenges</input></label>
<label><input type="checkbox" value="5">Open Source Community</input></label>
<label><input type="checkbox" value="6">Gitter help rooms</input></label>
<label><input type="checkbox" value="7">Videos</input></label>
<label><input type="checkbox" value="8"></input>City Meetups</label>
<label><input type="checkbox" value="9"></input>Wiki</label>
<label><input type="checkbox" value="10"></input>Forum</label>
<label><input type="checkbox" value="11"></input>Additional Courses</label>
</label>Any comments or suggestions?
<textarea></textarea>
<input id="submit" type="Submit"></input>
</form>
</body>
</div>
</html>
CSS:
body{
background-image: url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
font-family: 'Poppins', sans-serif;
/* linear-gradient:(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)); */
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
div{
background-color: #1b1b32;
border-radius: 10px;
color: white;
padding: 30px;
width:600px;
margin:0 auto;
}
#title, #description{
text-align: center;
color: white;
}
label {
display:block;
}
input[type="submit"]{
display:block;
background-color: green;
color:white;
margin-top: 20px;
padding: 10px 0;
}
#name, #email, #number, #dropdown,#survey-form, textarea, checkbox{
display: block;
width:100%;
}
input[type="submit"]{
width: 100%;
margin: 20px 0 0 0;
}
.
