Technical Documentation Project 2 / 2 Issues

Hi everyone. I am still having 3 issues with my project. Some help will be really appreciated. I checked my code on those issues and I can not see the where the problem is. Here it the link of the project: https://codepen.io/Junier/pen/RwVEWoY

I failed task 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”).

And Task 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”).

The third issues is about the responsive and the layout format. I cannot get the to be on the right side of the . Now they both are on top of each other. Also to be responsive once that is fixed. The main content should fall below the and that is not happening.

Thank you in advance!!
Cheers!

Task 4 and 12 seem pretty easy to fix, just do what they are asking. Is there something in particular you do not understand about what they are asking?

As for the issue with your layout, you have the width of the menu set to 300px when it is on the left side, so you need to push the main content over to the right to compensate. It’s almost like you need some sort of margin on the left side of the main content :slight_smile:

1 Like

@Junier, 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.

The entire first failing message says

Each <section> element with the class of "main-section" should also have an id comprised of the <header> innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective <header> innerText. (e.g. The <section> 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!) : THE_PYTHON_PROGRAMMING_CODE,SYNTAX : expected 2 to equal 0
AssertionError: Some "main-section" elements are missing the following ids (don't forget to replace spaces with underscores!) : THE_PYTHON_PROGRAMMING_CODE,SYNTAX : expected 2 to equal 0

Reading the entire message tells you what the test is looking for and what you need to do to correct the failure.

The entire second failing message says

Each element with the class of "nav-link" should contain text that corresponds to the <header> text within each <section> (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! : THE PYTHON PROGRAMMING CODE,SYNTAX : expected 2 to equal 0
AssertionError: Check that these headers have corresponding .nav-link elements and be mindful of case! : THE PYTHON PROGRAMMING CODE,SYNTAX : expected 2 to equal 0

Thank you Bruce! This did the trick:
.main-section {
margin-left: 350px;
}

I did had it like that before but I didn’t want to use that code because it didn’t allow me to push the main content under the = Responsive > mobiles
and I did put a @query in there.

Thank you Bruce and Roma for your replies on issues 4 and 12. I did read the instruction many times and checked the errors instructions too.

Task 4 is asking me to to have an id (inside that corresponds with the text of each and is exactly what is on the code, here the code for the title Syntax:

( = < to full the system

(section class=“main-section” id=“Data_Types”) (header class=“header-main”) Data Types (/header)

there is the id: id=“Data_Types”
and there is the text Data Types in the header

by the way the very same code is also an example of issue 12:
according to the task we should create nav-links with text that correspond to the header text in and as you can see the example above the the header is called Data Types and what I wrote in the the class"nav-link " like this:
( = <

(li) (a class=“nav-link” href="#Data_Types") Data Types (/a)(/li)

using underscores on the id on href: href="#Data_Types"

and forgot I had this issue too so now there are 3 instead of 2. I used the same code I use in my the Landing page project for the nav links but in this project is not working.

I might not seeing something .

  1. 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.

Look at the first line underneath this error message:

“Some “main-section” elements are missing the following ids (don’t forget to replace spaces with underscores!) : THE_PYTHON_PROGRAMMING_CODE : expected 1 to equal 0”

This is telling you where the error is. Hint: You don’t want to have two <header>s in the <section>.

1 Like

thanks Bruce . Only the first section had 2 (header)s

So I splited in to visually it worked, but still I get the error

(section class=“main-section” id=“MainTitle”> The Python Programming Code</section)

(section class=“main-section” id=“Syntax”>Introduction</header)

by the way I used on the unordered list in the main section , the same code I used for the nav-links on navegation menu on left (that is not working to pass task 13.) now I managed to pass that task, but the task is not working yet :slight_smile: because when I click on the nav links nothing happens :tired_face:

What is the purpose of setting position: relative on main? Here’s an exercise for you. Using the browser’s dev tools inspectore, put a background color on main (for example, green). Look at what happens to the menu. Now remove the relative positioning from main. Relative positioning messes with z-index and so it is causing the main to overlap the menu which is why you can’t click on the menu items.

Side note: You wouldn’t have had this problem if you had moved the main content to the right by putting a left margin on main instead of the individual sections inside of main, which is what I suggest you do.

WOW! Thank you Bruce! now I undertand the concept of overlapping. I did what you sugested now the main is in place and left the green bg. Now the links on the nav are working properly.
The only issues still are # 4 and #12 but I explained it before that everything seems correct but obviously I have missed something too.

For #4, the first section you have the id set to “MainTitle” but the title in the header is “The Python Programming Code”

For #12, the first link in the nav is “Title” but the text of the header for that section is “The Python Programming Code”.

WOW! Bruce really? Is the system so strict that titles names have to match even in the text. Ok I understand now thank you!

Ok I passed the all the tests but there is only one issue:

My Technical Doc Page is not responsive. I added the following @media query but still the main part is not going under the nav once reduce the browser to 250 px:

@media only screen and (max-width: 250px) {
#main-doc {
margin-left:0px;
margin-top:10px;
padding: 15px;
}

I you help me with this I might use it in my next and final project. Thank you so far for you help Bruce!

I am trying to get this CSS, responsive thing really in my pocket but now days with HTML5 and CSS3 things have changed a lot. For me the responsive requirement is key due to the fact that now days we go mobile first dev set. And sometimes I get into this road of : float, position, paddings, margins, Flexbox and Grid that makes my head go crazy. But I am not giving up! I know soon everything will fall in place.

Those are the requirements of this particular challenge so if you want to pass all the tests then yes they are that strict :slight_smile:

First, I think you need to move the menu on top of the content much sooner than 250px. Second, I don’t see anything in your break point CSS that is actually moving the menu above the content. You are just changing the the margins/padding on the content, but that doesn’t do anything to the menu.

1 Like

First, I think you need to move the menu on top of the content much sooner than 250px. Second," >>Do you mean I need to increase it? I changed to 350px but still didnt work.

"I tried to add some statements to the @media query but it didnt do the trick:
/float: left;/
/margin-top: 400px;/ here I was pushing the main content down

“I don’t see anything in your break point CSS that is actually moving the menu above the content” >> I didn’t understand you tip. Do you mean add an statement to the @ media that is directed to the menu?

the menu is already touching the top part of the browser and it will stay like that because I wrote this: position: fixed; (that was the task)

If the code inside the query says this: (pseudocode)

If the browser’s width is lower than 350px (mobile) put the main content underneath the menu

I am sorry I dont know how to do that, this responsive thing is a puzzel for me. I’m trying !

I’m thinking more like 600-700px but it’s ultimately up to you. Yes, making this one change will not fix your problem because the problem is not related to where the break point occurs but rather what you are not doing in the break point.

Putting the main content underneath the menu should be rather easy. The menu comes before the main content in the HTML, so it will naturally sit above the content, and it wants to take up all the horizontal space it can by default. So basically, you just need to remove all the properties you added to get the menu to the left of the main content.

1 Like

aahhhh!!

the order of the @media query!

I am starting to get it

Is fixed! Thanks a lot Bruce! now I see what the guys from Foundations, Bootstrap, Tailwind and others did.

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