Error on Tribute page

Code Feedback
1

Hello,

I just finished my tribute page project. When I run it it says I have done 9/10 tests. Its highlighting issue with userstory1. Can anybody help me to understand this issue?

Below is the link to my tribute page:-

https://codepen.io/agrawalparul2/pen/YzGzrWY

I get following issue with User story 1:-

User Story #1. My tribute page should have an element with corresponding id=“main”, which contains all other elements.
expected null to not equal null
AssertionError: expected null to not equal null
at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889)
at Proxy.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1549)
at a. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:118298)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
at i.g.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963)
at N.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45145

2

First of all, when using codepen you don’t have to use html and head tags. Codepen provides that boilerplate for you behind the scenes. Anything you write in the HTML section is actually what you would put in between the body tags.

If you want to include something in head of the document you can do so in the codepen settings:

codepen-settings

Now back to your issue. This is the important part of your error message:

My tribute page should have an element with corresponding id=“main”, which contains all other elements.

Did you have an element with id=“main” in your code?

1 Like
3

<head> tag is pretty specific as to what should be in it, element with id #main was supposed to be main content of your page, you can use e.g. <div> or <main>

1 Like
4

Hey @agrawalparul2!

The other posters already provided you with the answer you were looking for but I do want to mention two things that should be fixed before submitting.

  1. Please do not use br tags. br tags are used when division of lines is significant like in a poem or address. Please use css for space between elements.

  2. The center tag is no longer used in HTML 5. Please use CSS instead.

Happy coding!

5

Thanks so much for feedback.

7

Thanks for help.

I could catch my mistake. I had put id main for head, which was incorrect way.
I changed and created div (which had all elements) and assigned id=“main”.

8

@agrawalparul2 good job on getting the user stories to pass but there are some serious issues with your page that you should revisit.

  • As was previously mentioned, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
    • You have elements out of order and incorrectly used. You can review this for an understanding of the HTML boilerplate tags.
  • Also, you should run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • And as mentioned, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • There are places in your code where you’re using it in a way that is against the published standards.
1 Like
10

That was great information. It gave me lot of clarity on what goes where. When I ran code on validator I had loads of issues, I fixed them all except DOCTYPE, language and missing head tags (as we do not enter these in codepen).

I have also removed all the <br> tags and used CSS instead.

Here is the link to my new tribute page.

https://codepen.io/agrawalparul2/pen/YzGzrWY?editors=1100

Let me know things I can improve to make code look better.

1 Like
11

I think it looks a lot better. Good job making those changes.

My thoughts:

  • I would personally use the strong tag over the b tag here. The strong tag is used for strong emphasis whereas the b tag doesn’t really hold any importance.
   <h1 id="title"> <b>MAHATMA GANDHI</b> </h1>
  • I think the img alt tag should have text in it. It is important for those with assistive devices.
1 Like
12

Sure. Many thanks FCC and the forum is really helpful to continue learning in organized way.

1 Like
13

Your page looks good @agrawalparul2. Nice job cleaning things up.

Yes, when running the W3C validator you’re correct in ignoring the first warning and first two errors.

There’s a little typo in your CSS (line 27).

  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
14

yes I missed “-” for background-color attribute. Analyze CSS and Analyze html another great feature to clean up the code.

1 Like
15

Hi there! Your page looks pretty good.

I think you could save some HTML lines by using a new class. That way you could avoid using tags that much.

Make sure #family is styled correctly in order to display the information as you expect. Here’s an example how the code may look:

<html>
  <ul>
        <li><span class="bold-text">October 2, 1869:</span> Birth of Mohandas Karamchand Gandhi<li>
  </ul>
</html>

<style>
.bold-text {
 font-weight: bolder;

}
</style>

I’d suggest you review the class and id usage. And how nesting them can make style and CSS sweeter!

Thanks for sharing!

1 Like