Technical Documentation Page - Build a Technical Documentation Page

Problem1: i want to link my href’s with id’s from section elements but i can’t seem to do it right.

Problem2: i have been trying to write header text from the section on my id=“”, i don’t know we i go wrong.

please help me out

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
<nav id="navbar">
<header><h1>JS Documentation</h1></header>
<a href="#Introduction" class="nav-link">Introduction</a>
<a href="#what_you_should_already_know" class="nav-link">What you should already know</a>
<a href="#Javascript_and_Java" class="nav-link">JavaScript and Java</a>
<a href="#Hello_world" class="nav-link">Hello world</a>
<a href="#Variables" class="nav-link">Variables</a>
</nav>

<main id="main-doc">
<section class="main-section" id="Introduction">
  <header>Introduction</header>
  <p></p>
  <p></p>
  <ul>
    <li></li>
  <ul>
  <code></code>
</section>

<section class="main-section" id="What_you_should already_know">
  <header>What you should already know</header>
  <p></p>
  <p></p>
  <ul>
    <li></li>
  <ul>
  <code></code>
</section>

<section class="main-section" id="Javascript_and_Java">
  <header>Javascript and Java</header>
  <p></p>
  <p></p>
  <ul>
    <li></li>
  <ul>
  <code></code>
</section>

<section class="main-section" id="Hello_world">
  <header>Hello world</header>
  <p></p>
  <p></p>
  <ul>
    <li></li>
  <ul>
  <code></code>
</section>

<section class="main-section" id="Variables">
  <header>Variables</header>
  <p></p>
  <p></p>
  <ul>
    <li></li>
  <ul>
  <code></code>
</section>

</main>
  
</body>
</html>
/* file: styles.css */
@media (min-width:769px){
body{
  width:90%;
}
}
  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

are you sure you have all the underscores you need?

thank you, i didn’t notice that space.

how do i solve problem 1?

never mind about problem 1, i just figured out :+1:t4:

I’m having this same problem, but I have checked all of my id’s and they seem ok. To be on the safe side, I even copied and pasted the texts and appended the underscores.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="styles.css">
      <title>JavaScript - Objects</title>
    </head>

    <body>
      <article>
      <nav id="navbar">
        <header>JavaScripts Objects!</header>
        <a class="nav-link" href="#real_life_objects">real life objects</a>
        <a class="nav-link" href="#javascript_objects">javascript objects</a>
        <a class="nav-link" href="#object_definition">object definition</a>
        <a class="nav-link" href="#object_properties">object properties</a>
        <a class="nav-link" href="#accessing_object_properties">accessing object properties</a>
        <a class="nav-link" href="#objects_methods">objects methods</a>
        <a class="nav-link" href="#what_is_this">what is this</a>
        <a class="nav-link" href="#the_this_keyword">the this keyword</a>
        <a class="nav-link" href="#accessing_object_methods">accessing object methods</a>
        <a class="nav-link" href="#do_not_declare strings_numbers_and_booleans_as_objects">do not declare strings numbers and booleans as objects</a>
        
      </nav>

      <main id="main-doc">

        <section class="main-section" id="real_life_objects">
          <header>real life objects</header>
          <p>In real life, a car is an <span>object</span>.</p>
          <p>A car has <span>properties</span> like weight and color, and <span>methods</span> like start and stop:</p>
          <table>
            <tr>
              <th>Object</th>
              <th>Properties</th>
              <th>Methods</th>
            </tr>
            <tr>
              <td>
                <img class="img-table" src="https://www.w3schools.com/js/objectExplained.gif">
              </td>
              <td class="td-car">
                <br>
                car.name = Fiat
                <br>
                <br>
                car.model = 500
                <br>
                <br>
                car.weight = 850kg
                <br>
                <br>
                car.color = white
              </td>
              <td class="td-car">
                <br>
                car.start()
                <br>
                <br>
                car.drive()
                <br>
                <br>
                car.break()
                <br>
                <br>
                car.stop()
              </td>
            </tr>
          </table>
          <p>All cars have the same <span>properties</span>, but the property <span>values</span> differ from car to car.</p>
          <p>All cars have the same <span>methods</span>, but the methods are performed <span>at different times</span>.</p>
        </section>

        <section class="main-section" id="javascript_objects">
          <header>javascript objects</header>
          <p>You have already learned that JavaScript variables are containers for data values.</p>
          <p>This code assigns a <span>simple value</span> (Fiat) to a <span>variable</span> named car:</p>
          <code>
            let car = "Fiat";
          </code>
          <p>Objects are variables too. But objects can contain many values.</p>
          <p>This code assigns <span>many values</span> (Fiat, 500, white) to a <span>variable</span> named car:</p>
          <code>
            const car = {type:"Fiat", model:"500", color:"white"};
          </code>
          <p>The values are written as name:value pairs (name and value separated by a colon).</p>
        </section>

        <section class="main-section" id="object_definition">
          <header>object definition</header>
          <p>
            You define (and create) a JavaScript object with an object literal:
          </p>
          <code>
            const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
          </code>
          <p>Spaces and line breaks are not important. An object definition can span multiple lines:</p>
          <code>
            const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
          </code>
        </section>

        <section class="main-section" id="object_properties">
          <header>object properties</header>
          <p>The <span>name:values</span> pairs in JavaScript objects are called <span>properties</span>:</p>
          <table>
            <tr>
              <th>Property</th>
              <th>Property Value</th>
            </tr>
            <tr>
              <td>firstName</td>
              <td>John</td>
            </tr>
            <tr>
              <td>lastName</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>age</td>
              <td>50</td>
            </tr>
            <tr>
              <td>eyeColor</td>
              <td>blue</td>
            </tr>
          </table>
        </section>

        <section class="main-section" id="accessing_object_properties">
          <header>accessing object properties</header>
          <p>You can access object properties in two ways:</p>
          <code>
            objectName.propertyName
          </code>
          <i> or</i>
          <code>
            objectName["propertyName"]
          </code>
        </section>

        <section class="main-section" id="objects_methods">
          <header>objects methods</header>
          <p>Objects can also have <span>methods</span>.</p>
          <p>Methods are <span>actions</span> that can be performed on objects.</p>
          <p>Methods are stored in properties as <span>function definitions</span>.</p>
          <table>
            <tr>
              <th>Property</th>
              <th>Property Value</th>
            </tr>
            <tr>
              <td>firstName</td>
              <td>John</td>
            </tr>
            <tr>
              <td>lastName</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>fullName</td>
              <td>	function() {return this.firstName + " " + this.lastName;}</td>
            </tr>
          </table>
            <p>In the example above, <code>this</code> refers to the <span>person object</span>.</p>

            <p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>this</span>.</p>

            <p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>person</span>.</p>
        </section>

        <section class="main-section" id="what_is_this">
          <header>what is this</header>
          <p>In JavaScript, the <code>this</code> keyword refers to an <span>object</span>.</p>

          <p><span>Which</span> object depends on how <code>this</code> is being invoked (used or called).</p>

          <p>The <code>this</code> keyword refers to different objects depending on how it is used:</p>
          <table>
            <tr>
              <td class="td-left"><li>In an object method, <code>this</code> refers to the <span>object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>Alone, <code>this</code> refers to the <span>global object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In a function, <code>this</code> refers to the <span>global object</span>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In a function, in strict mode, <code>this</code> is <code>undefined</code>.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>In an event, <code>this</code> refers to the element that received the event.</li></td>
            </tr>
            <tr>
              <td class="td-left"><li>Methods like <code>call()</code>, <code>apply()</code>, and <code>bind()</code> can refer <code>this</code> to <span>any object</span>.</li></td>
            </tr>
          </table>
        </section>

        <section class="main-section" id="the_this_keyword">
          <header>the this keyword</header>
          <p>In a function definition, <code>this</code> refers to the "owner" of the function.</p>

          <p>In the example above, <code>this</code> is the <span>person object</span> that "owns" the <code>fullName</code> function.</p>

          <p>In other words, <code>this.firstName</code> means the <code>firstName</code> property of <span>this object</span>.</p>
        </section>

        <section class="main-section" id="accessing_object_methods">
          <header>accessing object methods</header>
          <p>You access an object method with the following syntax:</p>
          <code>objectName.methodName()</code>
          <p>If you access a method without the () parentheses, it will return the function definition</p>
        </section>

        <section class="main-section" id="do_not_declare strings_numbers_and_booleans_as_objects">
          <header>do not declare strings numbers and booleans as objects</header>
          <p>When a JavaScript variable is declared with the keyword "new", the variable is created as an object:</p>
          <code>x = new String();  // Declares x as a String object</code>
          <code>y = new Number();  // Declares y as a Number object</code>
          <code>z = new Boolean();  // Declares z as a Boolean object</code>
          <p>Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.</p>
        </section>

      </main>

      </article>
    </body>
  </html>

missing underscore   

But whne you ask for help, please create your own topic. it’s much easier for you to get help if you create your own topic