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

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