Technical Documentation Project Errors

HTML-CSS
1

Hi there, I have finished my project. However, I couldn’t pass the criteria test because I misses something.
Criteria 4. Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Java”). Some “main-section” elements are missing the following ids (don’t forget to replace spaces with underscores!)

Criteria 12… Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).
Check that these headers have corresponding .nav-link elements and be mindful of case! :

I have checked the reasons, but I believe that I fulfilled the requests of the test.

Can someone help me to find the mistakes I have made, please?
Thank you so much for your help.
Here is the link of my code on Codepen! [my project code] https://codepen.io/christiesunnie/pen/XWKPVvp

2

Hey @christiesunnie!

Welcome to the forum.

edit: Oh ok I see it now. Disregard this message
When I open your link, your project isn’t there. Did you fork the pen and save it to your account?

3

Hey, I fixed it. Please refresh the post and let me know if the new link works. Thanks!

1 Like
4

I figuered it out.
You had two typos.

1st one:
You have to make sure that the text in the header matches the nav link. It has to be this

<header><h2>if...else_statement</h2></header>

2nd one:
You had a syntax error for the ending tag. It has to be this.

<header><h2>Introduction</h2></header>

Also, don’t forget to keep the test suite in your html page.
Hope that helps!

2 Likes
5

Thank you so much for your help. They are too simple mistakes but I couldn’t realize it.
Do you have any tools to help you figure out the syntax errors of our code? Let’s say I have a big project with a chunk of code. How can I help myself out of my mess?

I really appreciate your fork :slight_smile:

1 Like
6

@christiesunnie, you can run your HTML code through the W3C validator.

If you’re coding in codepen you can change the Syntax Highlighting, it can help catch errors. Go to your Codepen profile settings (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 should be marked in red now.

Also, 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.

  • while the one for CSS is good the one for HTML does miss some things which is why I recommend W3C. Though it will pick up things like non-closed elements.
1 Like