Test two: Survey issues

HTML-CSS
1

Hello there, hoping someone can help me or shed some light on what I’m doing wrong here. Any and all help is greatly appreciated.

So for the past few days now I have been struggling with this test, in particular, numbers 13 to 16. As well as struggling with centring some parts of the input options as well as changing their colours. Below I have attached both my CSS code and HTML code, CSS first as its shorter.

CSS

body {
  text-align: center;
  text-family: Serif;
  text-size: 30px;
  background-image: url(https://resources.mynewsdesk.com/image/upload/ar_16:9,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_864/rw5h3umf9jnimaf4zzo2.jpg);
  margin: 200px; 
  }
#name-label {
  font-size: 25px;
  font-family: cursive;
}
#email-label {
  font-size: 25px;
  font-family: cursive;
}
#age-label {
  font-size: 25px;
  font-family: cursive;
}
#number-label {
  font-size: 25px;
  font-family: cursive;
}
#team-label {
  font-size: 25px;
  font-family: cursive;
}

HTML
<head>
  <h1 id="title">Who is the best striker in the world?</h1>
</head>
<body>
 <title id="title">
    <h1>Who is the ebst striker in the world?</h1></title><br>
    <p id="description">Who is the best striker in the world?</p>

    <main>
<form id="survey-form">
      <label id="name-label" for="name">Name:
      </label>
      <input id="name" type="text" name="name" placeholder="enter your name" required><br>
      <br><label id="email-label" for="email">Email:
    </label>
      <input id="email"  type="email" name="email" placeholder="Enter your email" required><br>
      <br><label id="age-label" for="age"> Age:
    </label>
      <input id="Age" type="Age" name="Age" placeholder="Enter your age" required><br>
      <br><label id="number-label" for="number">Number:
    </label>
     <input id="number" type="number" min="1" max="20" placeholder="Enter number" required><br>
   <br><label id="team-label" for="team">Team:
    </label>
  <input id="team" type="team" name="team" placeholder="Enter your football team"><br></form>
  <form id="survey-form">
<select id="dropdown">
<option value="Aresnal">Arsenal</option>
<option value="Aston Villa">Aston Villa</option>
<option value="Brentford FC">Brentford FC</option>
<option value="Brighton & Hove Albion">Brighton & Hove Albion</option>
<option value="Burnley FC">Burnley FC</option>
  <option value="	Chelsea FC">Chelsea FC</option>
  <optiong value="Crystal Palace">Crystal Palace</option>
  <option value="Everton FC">Everton FC</option>
  <option value="Leeds United">Leeds United</option>
  <option value="Leicester City">Leicester City</option>
  <option value="	Liverpool FC">Liverpool FC</option>
  <option value="Manchester City">Manchester City</option>
  <option value="	Manchester United">	Manchester United</option>
  <option value="Newcastle United">Newcastle United</option>
  <option value="Norwich City">Norwich City</option>
  <option value="Southampton FC">Southampton FC</option>
  <option value="Tottenham Hotspur">Tottenham Hotspur</option>
  <option value="Watford FC">Watford FC</option>
  <option value="West Ham United">West Ham United</option>
  <option value="Wolverhampton Wanderers">Wolverhampton Wanderers</option>
</select>
</form><br>
  <fieldset>
    <legend>How many years have you supported your team?</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Five years</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Ten years</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Whole life</label><br>
   </fieldset><br>
   <p>Additional Comments</p>
  <textarea></form>
      </body></main>

Codepen link

Edit: ok, for some reason the HTML isn’t showing as code lol

2

@Odin, one thing you should revisit is the form element and the elements that belong in it.
As a hint, trying searching for something like html form elements

There are quite a few errors in your code.

  1. Everything the browser renders belongs in the body element.
  2. You have confused the head element with the header element. They are very different elements.
  3. Review this for an understanding of the HTML boilerplate tags

It may help to run your HTML code through the W3C validator.

On a side note, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
Although this piece of advice doesn’t help too much unless you correct the aforementioned issues.

1 Like
3

It’s not necessary to post your code when you provide a link to codepen.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

Appreciate you taking your time, mate.

Now I have all of the tests passing but I’m still stuck on the presentation aspect. Each of the input boxes aren’t all aligned equally, same with the radio buttons and check boxes, as well as the text.

I know this has to do with the CSS aspect of the coding, but still at a loss as to what it is that I’m doing or not doing correctly.

5

That’s looking a lot better. Nice job.

Run your HTML code through the W3C validator again. Remember I said everything the browser renders belongs in the body element.
The header, the h1 and first p all get displayed by the browser so they should be in the body element.
So you know, Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The validator will show you have duplicate id’s. Remember, an id must be unique within the document.

Maybe try searching for something like css fieldset styling
There’s no harm in searching. Professional developers do it daily.

On a side note, it’s very hard to read the text with the background you’ve chosen. You’ll want to look at giving some kind of background to your form_container

Last thing, you have some typo’s.
As a suggestion, you can switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

6

Once again, thank you so much for taking the time to help me out, mate. Its greatly appreciated.

I’ve now got it done, code cleaned up and the CSS done too.

Thanks again :+1:… now onto the next challenge lol.

7

Glad to have helped and it’s looking a lot better but there are still some errors you need to address.

I’ve said that codepen provides the boilerplate and you only need to include the code that goes between the body tags.
Your code has this

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

Get rid of these two lines.
When you do run your HTML code through the W3C validator. You can ignore the first warning and first two error messages but the remaining errors need to be addressed.

And I know you didn’t ask for feedback but because it stands out so much…Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

Use codepen’s validator for checking your CSS. There’s a typo you’ll want to correct.

8

:tired_face: :man_facepalming: :man_facepalming: Lol.

Right, have it fixed now… Except the br’s in the CSS… that’ll take me some time now haha.

Thanks, again, @Roma

9

Don’t get discouraged. You’re doing fine. If it was easy, everyone would do it.

Good job cleaning up the HTML.
Take a look at line 100 in your CSS. rex is not valid

Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.

10

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