As the title says. I have never coded before and I did a bit of copy-paste to be completely honest. But most of it came from my notes and I’m pretty happy with the results. Especially with the color gradient background! Can’t seem to figure out how to set the legend/input stuff centered and stop it from locking to the left of the screen… If anyone wants to check it out, I’ll post my really bad, cluttered noob code below and you can all have a chuckle! Also I’m posting it so I can revisit this sometime in the future (hopefully) and see if I’m improving, and hopefully get a chuckle out of it myself 
Disclaimer! If this is not allowed please mods, remove! Also all cred and rights goes to freeCodeCamp where it is due.
** start of undefined **
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Survey Form</title>
</head>
<!-- BODY -->
<body>
<main>
<h1 id="title">Survey Form</h1>
<hr>
<p id="description">Let's see what I've learned...</p>
<!-- IMAGE <img class="inline" src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon from earlier tutorial"/> -->
<form id="survey-form">
<fieldset id="fieldset-one" name="fieldset-one">
<legend>Enter your information below!</legend>
<label class="name-label" id="name-label"><input id="name" class="name" type="text" required placeholder="Name">Your name</input></label>
<label class="email-label" id="email-label"><input id="email" type="email" required placeholder="Email">Your Email</input></label>
<label class="number-label" id="number-label"><input id="number" type="number" min="1" max="120" placeholder="Number">Your Number</input></label>
<label>
<select id="dropdown">
<option value="1">1</option>
<option value="2">2</option>
</select></label>
<label>
<input id="radio-one" checked name="radiobutton" value="y" type="radio">X</input>
</label>
<label><input name="radiobutton" value="y" id="radio-two" type="radio">Y</input></label>
<label>
<input name="checkbox-one" id="checkbox-one" value="1" type="checkbox">Value 1</input>
</label>
<label>
<input name="checkbox-two" id="checkbox-two" value="2" type="checkbox">Value 2</input>
</label>
</fieldset>
<h2>Feel free to write something nice below! </h2>
<label>
<textarea class=" textareatext" name="textarea" id="textarea" rows="5" cols="30" placeholder="Textarea"></textarea>
</label>
<label>
<button type="submit" name="submit" id="submit">Submit</button>
</label>
</form>
</main>
</body>
<!-- FOOTER -->
<footer>
<p>No copyright - All material taken from <a href="https://www.freeCodeCamp.org" target?"_blank">freeCodeCamp.org</a> :)</p>
</footer>
</html>
** end of undefined **
** start of undefined **
h1, p {
text-align: center;
font-family: sans-serif, Impact;
font-style: italic;
}
/* PARAGRAPH
p {
text-align: center;
font-family: sans-serif, Impact;
font-style: italic;
} */
/* img {
margin-left: auto;
martin-right: auto;
} */
h2 {
text-align: center;
font-size: 25px;
}
body { background-color: burlywood;
background: linear-gradient(brown, burlywood, white)
}
.name-label{
display: inline;
}
.email-label {
display: block;
}
number-label {
width: 300px;
height:200px;
}
hr {
padding: -2px;
border-color: black;
}
textarea {
background-color: #413939;
}
textarea::placeholder {
color:white; font-family: sans-serif, Impact;
padding: -2px;
border-color: black;
}
a {
color: black;
}
a:visited {
color: #413939;
}
a:hover {
color: #413939
}
a:active {
color: brown;
}
button {
display: block;
color: white;
background-color: #413939;
padding: -2px;
}
button {
margin: 5px 2px;
border: none;
}
legend {
border-color: black;
color: black;
font-size: 17px;
max-width: 300px;
}
select {
display: block;
}
** end of undefined **
