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.
@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.
Everything the browser renders belongs in the body element.
You have confused the head element with the header element. They are very different elements.
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.
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.
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.
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.
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.
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.