Issues with building a technical page

HTML-CSS
#1

I am having issues completing the technical page. i have done everything i am told to but yet i’m still getting errors. see below my link to codepen.

#2

Look at the error message for the first one:

" Each <section> element with the class of “main-section” should also have an id …"

That is saying the <section> element should have the id, not the <header>.

#3

Hi @Mbadady,

Did you watch the error messages you have after doing the tests?

Error with the 4th user story:

Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java" ).

In your code, you didn’t do this, you applied the id to each header, which is not what the user story says.

Example of issue in your code:

<section class="main-section">
  <header id="Data_types">Data types</header>
</section>

Error with the 10th user story:

Additionally, the navbar should contain link ( a ) elements with the class of nav-link . There should be one for every element with the class main-section .

Here the issue is that you have 14 sections, but only 13 links in your navbar. In fixing this, it looks to fix the other two errors that I didn’t watch.

It is important to check the logs and read well the tasks asked. Hope it helps!

#4

wow!!! i never saw this. thanks a lot
yay!!! it worked

#5

Hi LucLH,

this was very helpful. thank you very much.

i really appreciate this forum. you guys are the best

#6

i have one more question. On mobile device, i want my navbar to be at the top which i have done. My problem now is that my .main-section goes inside my #navbar(top) instead of moving with it up when i am scrolling my .main-section. Below is my updated codepen link

#7

You are welcome! You make part of the bests too :wink:

#8

I checked your code, did you arrive to fix it? Because it looks like yes. Just in case to explain you a little bit, you used the position property with the fixed value. It makes that your navbar goes out of the original HTML flow. So, for the next element, you should use some properties as margin or padding (they are examples, you have other ways). Like this your element will not be hidden by the navbar.

#9

there must be header id in each section and this header ID correspond to a main function code pro zone.

#10

i managed to move my navbar to the top but my section elements still hides inside the #navbar. i want the sections to move with the #navbar when the sections are scrolled

#11

When you say your section hides into the navbar, you talk about when you scroll right?

#12

yes when i scroll the section

#13

You used the position property with the value fixed. So your navbar will always be visible according to the CSS you did.

#14

i fixed it so that on a full screen it stays on the left and doesn’t move with the Section
then on the max-width of 768px screen size it moves to the top and moves with the section. see below what i wanted to do

#15

OK you wanted also the navbar to scroll in little screen. Cool you arrived your purpose :wink:

#16

not yet. my styling is not working like the last link i sent
please compare and see what i mean (when viewed on a small screen)