Techincal documentation page

HTML-CSS
#1

https://codepen.io/maria-hoek/pen/mddrVjJ?editors=1100
stuck onto task 4
I can’t acces the lessons so I can’t post a link
but it is into the last part of css just before js:

And this is the problem:
it says i need to add at least 5 li items
when i add our remove on this doesn’t change

 1 <li><a class = "nav-link" href = "#how_to_take_care_of_a_bunny">Is a bunny right for me?</a></li>
  2 <li><a class = "nav-link" href = "#do_i_like_bunny?">What materials do I need for my bunny?</a></li>
  3 <li><a class = "nav-link" href = "#what_do_bunny_eat?">What do bunny's eat?</a></li>
  4 <li><a class = "nav-link" href ="#bunny_proof">Is my house bunny proof?</a></li>
   5<li><a class = "nav-link" href = "#where_to_get">Where do I get a bunny</a></li>
   6 <li><a class = "nav-link" href = "#omg_i_killed_it">I kiled my bunny</a></li>

removing line 6 doesn’t fix it
and removing 6 and 5 also not
trying adding this:

<section id="bunnys" class="main-section nav-link">

our adding a main element is not working either

#2

I think you need to not use spaces there

and totally what @slbccfl says too, I missed that

1 Like
#3

Running the “Technical documentation page” tests shows failures on tests 4, 6, 7, 10 and 13.

  1. is " 7. The .main-section elements should contain at least 5 <li> items total (not each)."

Your <li> elements are not within elements that have class="main-section". I think it wants to see list elements within your <section> elements.

1 Like
#4

Yep just read that too. Thanks for the advice the spaces are removed.

#5

alright i changed it up
https://codepen.io/maria-hoek/pen/mddrVjJ?editors=1100
starting with

  <section class="main-section" id="getting_a_bunny">

then list items
and then

  </section>

so the list items are now within the section
it still doesn’t pass why?

#6

that is one test you are passing, but there are several others you are not

if you need help with specific tests maybe say which ones?

#7

The technical documentation one I can’t link you nor give you more information because
I can only acces the forums and my profiele at this moment
this is what happens when i try to open anything else here this happens:

07
072496×1316 162 KB

#8

you have the test suite on codepen, you can find the user stories you are not passing from there, can’t you?

#9

yes you are right with that but i only want help with number 4 which i did try to explain as briefly as i could and is the one i want a hints into

The others none succefull ones i want to figure out myself :3 as a wise magical girl ones said to me.

“Wouldn’t be much better if you managed to arrive to the solution on your own instead of copy pasting?”

#10

It looks like you removed to test suite script. I suggest you put this at the beginning of your HTML file to be able to run the test suite:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Then you will be able to run the test suite and see what is failing.

#11

Here is a posting about setting up and using the test suite:

#12

thanks i removed that link temporary because the test suite got in my way once i tried to small everything down to see how the img would react.

#13

I don’t know which one is number 4, you can copy & paste the whole text of the user story here so we know what you need help with (which you can see in the test suite after running tests)…
I don’t want to give you the solution, but I need to know what you need help with to give you any hint

#14

there you go then: ## 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”).

#15

I think your issue start with the fact that there is not an header element inside your section element

#16

But if i add a header inside the section then it doesn’t help it either
this is what i did

 <section class="main-section" id="getting_a_bunny"> <-- section begins
    <header id = "main"> <-- header now is inside<--
</header>
<ol>
  <li><a class="active" href="#is_a_bunny_right_for_me">Is a bunny right for me?</a></li>
  <li><a href="#what_do_bunny_eat?">What do bunny's eat</a></li>
  <li><a href="#materials">What materials do I need for my bunny?</a></li>
  <li><a href="#house">Is my house bunny proof?</a></li>
  <li><a href="#where">Where do I get a bunny</a></li>
</ol>
  </section> <--- section ends
#17

Edit: This post is based on the link in the first post. Please link to the current pen you are working on if that isn’t it.

  1. You are missing the do_i_like_bunny? section.

  2. The id value on each of the .main-section elements and the header text inside needs to be the same. Like what you have for the first section (how to take care of a bunny).

  3. You can’t have the last unfinished .main-section section (bunny_are_also) because the test will look at it and not find a header element.

To make this process simpler and easier to keep track of, I would suggest using the same text.

Example for the first link and section:

<li><a class="nav-link" href="#is_a_bunny_right_for_me?">Is a bunny right for me?</a></li>

<section class="main-section" id="is_a_bunny_right_for_me?">
  <header>Is a bunny right for me?</header>
  ...rest of content
</section>
1 Like
#18

Thanks lasjorg I will try it <3

#19

Alright I followed the tips
https://codepen.io/maria-hoek/pen/mddrVjJ?editors=1100
is the result now :3

#20

the tests say:

All headers must contain text


<!--list starts here-->
  <section class="main-section" id="getting_a_bunny">
    <header id = "main">
</header>

you will need to delete this header element, or use it