Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1
  1. Failed:Your #navbar should have exactly one header element within it.
  • Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

2 * Failed:Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

  1. Failed:Your Technical Documentation project should use at least one media query.

I have worked on this for three days, still can’t solve the problem, anyone please can help?Highly appreciated, thanks.

Your code so far

<!-- file: index.html -->
<DOCTYPE! HTML>
  <html>
    <head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="style.css"></head>   
<main id="main-doc">
<nav id="navbar">
<section class="main-section" id="Power_Generation_Energy">
<header>Power Generation Energy</header>
<p>300mAh</p>
<p>600mAh</p>
<ul>
  <li><a class="nav-link">Power Generation Energy</a></li>
   <li><a class="nav-link">Power Generation </a></li>
   </ul></nav></section>
   <nav id="navbar">
   <section class="main-section" id="Power_Generation_Energy2">
<header>Power Generation Energy2</header>
<p>300mAh</p>
<p>600mAh</p>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
<ol>
  <li><a class="nav-link" href="Power_Generation_Energy2">Power Generation Energy2</a></li>
   <li><a class="nav-link" href="Power_Generation_Energy2">Power Generation </a></li>
   <li><a class="nav-link" href="Power_Generation_Energy2">Power</a></li></ol></nav></section>
 <nav id="navbar">
   <section class="main-section" id="Power_Generation_Energy3">
<header>Power Generation Energy3</header>
<p>300mAh</p>
<p>600mAh</p></nav></section>
 <nav id="navbar">
   <section class="main-section" id="Power_Generation_Energy4">
<header>Power Generation Energy4</header>
<p>300mAh</p>
<p>600mAh</p></nav></section>
 <nav id="navbar">
   <section class="main-section" id="Power_Generation_Energy5">
<header>Power Generation Energy5</header>
<p>300mAh</p>
<p>600mAh</p>
</nav>
</main></html>

/* file: styles.css */
@media screen and(max-width: 600px) {
  body {  background-color: red;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

You have 2 navbar ids ?
Which one is the actual navbar?
(You cannot duplicate ids as that defeats the purpose of using them and breaks the test)

3

thanks,bro,I will try to delet one Navbar, duplicate id?I make it different with number 1,2,3…

4

Look at the first line of the block of code I quoted. Then look at the last line in the same quoted block. You are creating two nav elements with the same id.

5

Thank you, but after I deleted it, it still not work. here are the three :

  1. Failed:Your #navbar should have exactly one header element within it.
  • Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

2 * Failed:Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

  1. Failed:Your Technical Documentation project should use at least one media query.
6

please post the new code in a code block here

8

body is too similar to what you recently post, I can’t send, can you please copy directly and let me know how it goes, it’s not gonna work, really appreciated if you can help, thanks.

9

Try to delete all the duplicate ids.

I just noticed a third nav with the exact same id.

Then try to look through your code to make sure it is organized neatly into sections. (Indented properly too)

This process may help you find other errors.

Please post all the code if you are still stuck.

10

thanks, yes, I have deleted and kept only one nav the first time you told, but it still doesn’t work., it’s headache…whatever, I have been with it for 3days, I will leave it like this, after I will go back, thanks.

11

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