After about a week and a half I finally managed to pass the Survey Form certification 'exam'

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 :slight_smile:

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 **

First thanks for sharing your progress and journey so far, takes courage to put out what you’ve been learning!

I just wanted to point out that the term “exam” means “pass” or “fail” and the punishment for getting something “wrong” is bad, as you need to get it “right”.

All these terms and concepts do not apply well for learning how to code.

Namely that “failing the exam is bad because you got something wrong”.

Coding is hard, there’s infinite way to screw things up, and there are infinite ways to improve what you did. You’d rather not avoid “failing”, rather you want to learn from it. There’s always room for growth, and part of that growth will come with screwing something up, and finding your way to fix it.

FCC gives you unlimited “attempts” at submitting your projects. Your projects are the only parts that are required to claim your cert. Finally, project submissions are currently submitted based on an honor system and are not automatically checked.

So going back to the “exam” analogy, instead of a paper test that you get 1 chance on where you are graded if you get things right. Instead think of it as a paper exam “review” that you can use to test yourself on what you went over during the course. You can follow it to the letter, go above and beyond, or do parts and review it later. Ultimately an exam tests if you get things wrong, but real-life coding is a test if you can handle getting things right after getting things wrong.

The primary benefit of freeCodeCamp is that you learn while you do. So if you learned something about this project you ultimately got the benefit from it. It’s also possible you learned you aren’t sure about something, this is also a benefit. It isn’t a “mark of failure” or “not passing parts of the exam”, rather it’s just an indicator of a potential area of growth.

Good Luck, keep learning, keep growing :+1:

3 Likes