Formatting my survey challenge (colour and spacing)

Hey folks,

A few things I’m trying to do that I can’t make work:

  • Have the yellow background containing my form only be in the middle of the page (so you can see the green background either side
  • Have the footer (text “a coding project by” beneath the Submit button) have the same light green background as the header, not yellow
  • Have my submit button be red with white text

I’ve typed in what I thought was the correct CSS but I can’t get it to show.

Here’s my project: https://codepen.io/freddieornot/full/NWwRBav

Thanks in advance :slight_smile:

hey! So, first thing i would recommend is going back and checking the hierarchy of your tags. for example: your header tag is opened, then you open a div called “content” then you close your header inside of this div where the rest of your code is. I would either move whatever header content out of your “content” section or move the header tag inside of the content tag (make sense?).
Second- It’s not really recommended to use formatting tags like <center> anymore. it’s better to control using a class <div class="class1 class2"> you can always have more than one class in a div.

with regards to the bit about your name at the bottom being green, you spelled color colour which i know is right in some places, but not in CSS lol. i’m still trying to figure how to separate the footer out. so far, changing colour to color, and putting the header tag inside of the <div class="content> tag gets me to here:

I really think the nested green has to do with the hierarchy stuff, or maybe someone else will see and comment what the problem is.

last but not least- the submit button!! go look at your html for that button… there are a few typos i think you’ll see pretty quick.

anyways, let me know if you have any more questions.

Thanks so much! I figured it had to be some minor mistakes but I’ve been staring at it so long that a second pair of eyes was definitely needed to catch the things I keep missing.

(Spelling colour without a u has been the hardest adjustment. :laughing: )

1 Like

no worries! I’m actually messing around with it a bit myself, cleaning it up so i can figure this out. ALSO another thing i’ve been wanting to mention:

in the settings bit for the editor, this is where it’s recommended to add the “head” stuff.
Once you move it to there, you can also delete your body tags since you dont “need” them. the codepen area is what is in the “body” section.

anyways, back to playing with your code. I’ll be around.

ok another thing!!! <form> is not self closing! you have to close the form tag!

So, doing a once over on your html code, cleaning it up, make sure you’re opening and closing tags properly and where you want them closed, should get you to a bit better place :slight_smile:

Thank you for the tip about the pen settings!

One question about closing my form tag, do I just need one closing tag at the end of everything? I don’t need to close every time I’ve put < form group >, right?

1 Like

Second- It’s not really recommended to use formatting tags like <center> anymore. it’s better to control using a class <div class="class1 class2"> you can always have more than one class in a div.

Apologies for all the questions, but I realise I forgot to ask, what do you mean by this? How do I use div class = class 1 class 2 etc. to put things in central alignment? Tried to Google it but can’t really get my head around it. I know < span > puts things on the same line, is that anything to do with it?

The form tag is different than the class form-group.
To help you can search for something like html form elements
On a side note, while it’s okay to look at the sample projects don’t use code from the sample projects.

Something else you can do is run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.
It was mentioned not to use the center element. This is because it’s been deprecated in HTML5.

Also, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

The last thing I want to mention is the test script, with all tests passing, should be included when you submit your projects.
Your page passes 8/17 user stories. 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.