Hello guyshow are you improving and grasping the css skills , just completed the tml partf so well but cant figure out the css part

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width",initial-scale="1.0">
    <title>survey form</title>
    <link rel="stylesheet" href="styles.css"></link>
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">This Survey form helps us get feedback from you on our services.</p>
    <form id="survey-form">
      <section>
        <label id="name-label" for="name">Name:<input id="name" type"text" required placeholder="John Doe"/></label>
        <label id="email-label" for="email">Email: <input id="email" type="email" required placeholder="johndoe@gmail.com"/></label>
        <label id="number-label" for="number-label">Phone number: <input id="number" type="number" min="0" max="9" placeholder="254742352488" value="254742352488"/></label>
      </section>
      <section>
        <label>Which option best describes your current role?<select id="dropdown">
          <option value="">Select current role</option>
          <option id="Full time job" value="Full time job">Ful-time job</option>
          <option id="part time job" value="part time job">Part-time job</option>
          </select></label>
      </section>
      <section><label>Would recommend us to a friend</label>
      <label><input id="yes" name="recommend"  type="radio" value="value"/>Yes</label>
      <label><input id="no" type="radio" name="recommend" value"value"/>No</label>
      </section>
      <section>
        <label>What would you love to see us improve?</label>
        <label><input id="videos" value="value" type="checkbox"/>Videos</label>
        <label><input id="wiki" value="value" type="checkbox"/>Wiki</label>
        <label><input id="Open source" type="checkbox" value="value"/>Open source</label>
        <label><input id="Community" value="Community" type="checkbox"/>Community</label>
        </section>
        <section><label>Any comments or suggestions?<textarea id="comments"></textarea></label></section>
        <section><input/ id="submit" type="submit"></section>
    </form>
  </body>

</html>
/* file: styles.css */
body{
  background-color:rgb(81, 81, 140);
  color:white;
}
h1{
  margin:0 auto;
  width:fit-content;
  font-family: Poppins,sans-serif;
}
p{
  font-size:1.25rem;
  margin:0 auto;
  width:fit-content;
  font-style:italic;
  font-weight:200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
section{
  display:block;
  width:20%;

}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like

Hi @Japheth

This is not a solution, but it is a starting point; a simple one. You are going to need checking all the lines I wrote in MDN Web Docs or web.dev, for example. Better understand what are you doing.

  1. You will need to check your HTML code because you have a few mistakes: you can do it here, in the w3 validator. You just need copy and paste your code there and hit check button. Correct your bugs from top to bottom.

  2. Get rid of section elements (all of them!).

  3. I recommend you use fieldset and legend to wrap you radio inputs (check their syntax as well :wink:):

<fieldset>
  <legend>Text label of this section of your form</legend>
   <!-- input type radio will go here. You might need label elements as well, not sure. -->
</fieldset>
  1. I recommend you use the label element differently for textarea and select elements:
    <label>Any comments or suggestions?</label>
        <textarea id="comments"></textarea>

4 ) About CSS, some ideas:

html {
   /* using border you will see the html element */
  border: 3px dashed lightblue;
}

body {
  /* by default browser asign some margin to body element */
  margin: 0;
  /* using border you will see the body element */
  border: 3px solid pink;

  /* Flex container */
  display: flex;
  /* creates a flex column */
  flex-direction: column;
  /* align elements through cross axis; in flex column is the horizontal axis. */
  align-items: center;
}

* {
  /* I recommend outline to visualize the rest of your elements. It won't affect your layout since is not part of the box model */
  outline: 1px solid red;
}

h1 {
  /* I gave a fix max width to h1, p and form. Comment it and see what happen if don't. */
  max-width: 500px;
}

p {
  max-width: 500px;
}

form {
  min-width: 200px;
  max-width: 500px;
}

label, input {
 /* labels and inputs will take the full width of their parent*/
  width: 100%;
}

/* You will need to style differently radio inputs */
/* You will need give some of your elements any margin or padding */

Please, test and check all I have wrote and see what you could do differently.

I recommend you read some MDN and web.dev forms examples code.

You will learn a lot playing with their code too.

There is validator tools for CSS as well. Check it out.

I hope it helps to keep going; don’t get discourage, just keep learning and practicing.
Start using pixels and learn more about relative units to improve your project later on if you feel like it.

NOTE: the borders and outlines are only to visualize your boxes. Remember EVERYTHING IS A BOX!! inline or block boxes, but boxes, even when they look with different shape, it is a box.

Happy coding!!

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