Hello Hello i stuck here with days and what im doing wrong with the link i dont know pls help

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here:
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).

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="line">

  </div>
<main id="main-doc">
  <section class="main-section" id="introduction">
         <header><h1>Introduction<h1></header>
        <p>JavaScript is a cross-platform, object-oriented scripting language. </p>
        <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements</p>
        <p>JavaScript can be connected to the objects of its environment to provide programmatic control over them</p>
        <code>if (true) { var x = 5; } console.log(x); // 5</code>
       <nav id="navbar"><header><a class="nav-link" href="introduction.html" target="_blank"
       >Introduction</a></header></nav>
  </section>
  <section class="main-section" id="what_more"><header>
    <h1>What more<h1></header>
      <p>This guide assumes you have the following basic background:</p>
        <ul>
          <li>A general understanding of the Internet and the World Wide Web (WWW)</li>
          <li>Good working knowledge of HyperText Markup Language (HTML)</li>
          <li>Some programming experience. If you are new to programming, try one of the tutorials linked on   the main page about JavaScript</li>
         </ul>
       <code>if (true) { let y = 5; } console.log(y); // ReferenceError: y isnot defined</code>
          <nav id="navbar"><a class="nav-link" href="what_more.html" target="_blank">What more</a></nav>
  </section>
  <section class="main-section" id="java_script"><header>
      <h1>Java Script<h1></header>
      <code></code>
        <p>JavaScript and Java are similar in some ways but fundamentally different in some others. </p>
        <p>JavaScript is a very free-form language compared to Java</p>
          <nav id="navbar"><a class="nav-link" href="java_script.html" target="_blank">Java Script</a></nav>
  </section>
  <section class="main-section" id="variables"><header>
        <h1>Variables<h1></header>
         <code>const PI = 3.14;</code>
          <p>You use variables as symbolic names for values in your application</p>
          <p>You can also use the Unicode escape sequences as characters in identifiers</p>
           <nav id="navbar"><a class="nav-link" href="variables.html" target="_blank">Variables</a></nav>
  </section>
  <section class="main-section" id="data_types"><header><h1>Data types</h1></header>
         <p>The latest ECMAScript standard defines seven data types</p>
         <p>two data types that are primitives:</p>
          <ul>
           <li>Boolean. true and false</li>
           <li>String. "Howdy"</li>
         </ul>
       <code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue";</code>
              <nav id="navbar"><a class="nav-link" href="data_types.html" target="_blank">Data types
              </a></nav>
  </section>
</main>
</body>
</html>

/* file: styles.css */
.main-section{
margin-left: 250;
}

.line{
border: 1px solid black;
height: 1250px;
width: 230px;
position: absolute;
left: 0;
top: 0;
border-bottom: 0;
border-top: 0;
border-left: 0;

}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

So you have multiple <nav>s all with the id navbar. First, ids are supposed to be unique in HTML so they can’t all have the same id. Second, you are only supposed to have one <nav> element.

3

well i used to have 5 section and 5 <nav-s as well and inside od each <nav-s i need to have 5 links that need to connect with href so when i click at the link it has to send me to the section that i clicked

4

i did all of the 21 qustions that i have for the project and only this i dont understand why is wrong i did everything as it says.

1 Like
5

Did you do what I suggested above and only have one <nav> on the page?

If so, then I think we will need to see your updated HTML in order to help you further.

6

The main issue that grabbed my notice is the way you declare your href routes.

Depending on where you are directing, you generally start your path with something like / if directing to a different page or # for a corresponding section.
as an example href = "/some/external/page.com or href = #page-section
Otherwise, like @bbsmooth mentioned, an id means a unique identifier and are generally treated as such, especially when it comes to interactions with a database or api.
Hope you find this helpful

1 Like
7

thank you sir
that was the problem i made it yeeeee you saved my life.

8

also i forget the “#” thank you

9

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