Survey Form - Build a Survey Form

Code Feedback
1

Tell us what’s happening:
Hello, first of all, you guys are amazing! thankyou
I just finished my Survey and it’s completed. I started coding 1 week ago, and i noticed that i didn’t use things like sections, and div’s ( to be honest I still dont quite understand divs)
point of this post: just looking for feedback as I continue, I don’t want to make unhealthy habbits now…
if you don’t mind pointing out : 1. easier, or cleanier ways to do things. or 2. things i am doing that could become problematic down the road. 3. any feedback.
thanks! Preformatted text

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>
<meta name="viewport" content="width=device width, initial-scale=1.0"> 


<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
<h1 id="title"="What Do You Want To Learn About Coding"</h1></head>
<p id="description">Learn More About Coding Survey</p></header><hr></hr>
<fieldset>
  <form id="survey-form">
  <ul><label id="name-label"><strong>Name</strong>
  <input id="name" type="text" placeholder="first and last" required ></label></ul></label id="name-label">
<label id="email-label"><strong>Email</strong><input id="email" type="email" required placeholder="email"></label>
<label id="number-label">Age<input id="number" type="number" min="13" max="120"  placeholder="age"></label>
  
  <hr> <fieldset> <label> Select skill level</label>
    <select id="dropdown" name="experience level">
  <option value="" >Select skill level</option>
      <option value="1"> Beginner</option>
      <option value="2"> Intermediate</option>
      <option value="3">Advanced</option> <select></fieldset></hr>
      

<fieldset>
<h2><label id="coding"> What kind of coding languages are you interested in learning?
<ul><label for="Javascript"><strong>Javascript</strong></label>
<input id="Javascipt" type="checkbox" name="Javascript" value="Javascript">
<label for="Python"><strong>Python</strong></label>
<input id="Python" type="checkbox" name="Python" value="Python">
<label for="Ruby"><strong>Ruby</strong></label>
  <input id="Ruby" type="checkbox" name="Ruby" value="Ruby"> 
 <label for="SQL"><strong>SQL</strong></label>
<input id="SQL"type="checkbox" name="SQL" value="SQL">
</ul><label for="Perl"><strong>Perl</strong></label>
<input id="perl" type="checkbox" name="perl" value="perl"
  < ul>  <label for="c++"><strong>C++</strong></label>
  <input id="c++" type="checkbox" name="C++" VALUE="C++">
  <label for="Swift"><strong>Swift</strong></label>
  <input id="swift" type="checkbox" name="swift" value="swift">
  <label for="rust"><strong>Rust</strong></label>
  <input id"rust" type="checkbox" name="rust" value="rust">
  <ul><label for="HTML"><strong>HTML</strong></label>
  <input id"HTML" type="checkbox" name="HTML" value="html">
  <label for="php"><strong>PHP</strong></label>
  <input id="PHP" type="checkbox" name="PHP" value="PHP">
  <label for="scala"><strong>Scala</strong></label>
  <input id="Scala" type="checkbox" name="scala" value="scala">
  <label for="TypeScript"><strong>TypeScript</strong></label>
  <input id="typescript" type="checkbox" name="typescript" value="typescript"></ul></h2></hr><hr></hr>
</fieldset>
<fieldset>
<label for="camp">Have you used freecodecamp.org before?</label>
  <p><input id="yes" type="radio" name="yes-no" value="yes" checked> yes</input>
  <input for="no" type="radio" name="yes-no" value="no"> no</input> <p></fieldset>
  <label for="describe"> If yes, describe what your experience was like below:</<label><p><textarea placeholder="text here"></textarea></p></p>
  <hr></hr>
    <button type="submit" id="submit"><strong>Submit</strong></button>
    </form></body>
    <h3> We appreciate your feedback </h3>




 
  </body>


/* file: styles.css */




 header {
   text-align: center;
font-family: cursive;
font-size: 20px;
padding: 20px;
;
}

html{background-image:url(https://images.unsplash.com/photo-1692639969478-a0dad77774c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIzM3xibzhqUUtUYUUwWXx8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60);
background-size:contain;
background-position:center;
color:#e6e6ff
}
input, select,textarea { background: #000033; border: none;
color: #e6e6ff;
font-size: 16px; }

body {text-align:center;}
button {box-shadow: 0 0 40px #e6e6ff;
background: transparent;
color:#e6e6ff;
font-size: 25px
}
option {color:#e6e6ff;}
fieldset{border-color: #000033;
border:none;}
hr { margin: center;
padding: 2px;
width: 550px;
height:4px;
background-color:#e6e6ff;
}
select{font-size:16px}
h2 {font-size: 20px;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

HI @m_kgood !

divs are generic containers that don’t have semantic mean and are mainly used for styling purposes.
For example, the colored markers project used tons of divs as containers for the marker sleeves and caps.

Later project will continue to use divs so you will get more experience and better understanding of that.
But also, if you want to review that project that would help to of how divs can be used in css

I’ll provide my feedback down below.
But as a general rule, you will make tons of mistakes and unhealthy habits and that is totally fine because you are still in the early days of learning
We have all been there but that is the best way to learn is by building and improving :+1:

I would suggest to keep doing what you are doing and building projects and asking for feedback for improvement.
And then if you are interested in working professionally as a developer, you will quickly realize that a whole new level of learning occurs because there are so many things that you will learn during that first year on the job that more experienced developers will need to help you with.
But you will grow so much during that time :slight_smile:

Anyway, here is my feedback

The first thing that I notice is the lack of formatting in both your css and html.
Having properly formatting code will make your code easier to debug for you and easier to read for other developers.
That is something you will want to practice now.

Here is how to format your code in the fcc editor

Screenshot 2023-09-24 at 1.28.41 PM
Screenshot 2023-09-24 at 1.28.41 PM1496×944 110 KB

Comments for HTML file

It looks like you are not using the correct HTML file boilerplate here

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

</html>
<meta name="viewport" content="width=device width, initial-scale=1.0">


<head>
  <link rel="stylesheet" href="styles.css">
</head>

All of your code should be inside html tags and the meta tag should be inside the head tags

Here is an article on html boilerplate code

It looks like you have some incorrect html syntax

For example, hr elements are self closing and do not have end tags.
This is incorrect

Same goes for the input element
This is incorrect

There are a couple of times where you will have incorrect syntax for attributes.
For example here

You will want to make sure to have the equals sign between the attribute name and value

 id="HTML"

Then, you have a couple of ul elements but they are not being used correctly because you don’t have any li elements inside them.
So I would suggest removing them

Also, It looks like you have duplicate body end tags here

I would remove the first one

There might be other things, but that is just what I noticed on the first pass through.
Whenever you finish a project, I would suggest running your code through an HTML validator

https://validator.w3.org/#validate_by_input

that will help you catch these errors and resolve them

CSS feedback

I would suggest formatting your css too so it is easier to read

This formatting will make it easier to read

/* file: styles.css */

header {
  text-align: center;
  font-family: cursive;
  font-size: 20px;
  padding: 20px;
}

html {
  background-image: url(https://images.unsplash.com/photo-1692639969478-a0dad77774c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIzM3xibzhqUUtUYUUwWXx8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60);
  background-size: contain;
  background-position: center;
  color: #e6e6ff;
}
input,
select,
textarea {
  background: #000033;
  border: none;
  color: #e6e6ff;
  font-size: 16px;
}

body {
  text-align: center;
}
button {
  box-shadow: 0 0 40px #e6e6ff;
  background: transparent;
  color: #e6e6ff;
  font-size: 25px;
}
option {
  color: #e6e6ff;
}
fieldset {
  border-color: #000033;
  border: none;
}
hr {
  margin: center;
  padding: 2px;
  width: 550px;
  height: 4px;
  background-color: #e6e6ff;
}

select {
  font-size: 16px;
}

h2 {
  font-size: 20px;
}

Otherwise, I think it looks pretty good.

I did notice a repetition of the light grey color you are using here

  color: #e6e6ff;

A later project will teach you how to work with css variables but here is a sneak peak through an article to help cleanup your code

Another thing that I noticed is that you set a width of 550px here

hr {
  margin: center;
  padding: 2px;
  width: 550px;
  height: 4px;
  background-color: #e6e6ff;
}

That works for larger devices but it creates a horizontal bar for smaller devices

Screenshot 2023-09-24 at 1.51.34 PM
Screenshot 2023-09-24 at 1.51.34 PM948×1124 126 KB

To help with responsiveness, I would suggest changing that value to be a percentage instead.
Maybe 80%

hr {
  margin: center;
  padding: 2px;
  width: 80%;
  height: 4px;
  background-color: #e6e6ff;
}

Lastly, you are using px for font sizes but it better to use relative units like rems or ems.
I don’t think that has been covered yet and will be covered in later projects.

But here is a sneak peak into how to work with relative units

I know that is a lot of feedback but hopefully that was all helpful. :+1:
I think you are off to a good start.

My only piece of advice is continually build small projects along the way and get feedback so you can strengthen your skills and retain the concepts better. :+1:

3 Likes
3

omg thank you so much!
as soon as i did the next project i was like , " oh wow, i am learning so much now that would have helped me better understand how to do what i was trying to do on this project!" for example, the div really came in to play with the project immediately following this one lol. this is amazing feedback! thank you so much. so grateful for you guys!

1 Like
4

still can’t get over this feedback!!! so helpful and encouraging!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.