What I do wrong

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
       <nav id="navbar">
        <header>TypeScript Documentation</header>
        <ul>
            <li><a class="nav-link" href="#TSFNP">TypeScript for the New Programmer</a></li>
            <li><a class="nav-link" href="#TSFJP">TypeScript for JavaScript Programmers</a></li>
            <li><a class="nav-link" href="#TSFJCP">TypeScript for Java/C# Programmers</a></li>
            <li><a class="nav-link" href="#TSFFP">TypeScript for Functional Programmers</a></li>
            <li><a class="nav-link" href="#TSHB">The TypeScript Handbook</a></li>
            <li><a class="nav-link" href="#TSTB">The Basics</a></li>
            <li><a class="nav-link" href="#TSEDT">Everyday Types</a></li>
            <li><a class="nav-link" href="#TSN">Narrowing</a></li>
            <li><a class="nav-link" href="#TSMF">More on Functions</a></li>
            <li><a class="nav-link" href="#TSOBT">Object Types</a></li>
        </ul>
    </nav>
<main id="main-doc">
        <section class="main-section" id="TSFNP">
            <header>TypeScript for the New Programmer</header>
          <article>
            <p>Congratulations on choosing TypeScript as one of your first languages — you’re already making good decisions! You’ve probably already heard that TypeScript is a “flavor” or “variant” of JavaScript. The relationship between TypeScript (TS) and JavaScript (JS) is rather unique among modern programming languages, so learning more about this relationship will help you understand how TypeScript adds to JavaScript.</p>
            <h3>What is JavaScript? A Brief History</h3>
            <ul>
              <li>JavaScript (also known as ECMAScript) started its life as a simple scripting language for browsers. At the time it was invented, it was expected to be used for short snippets of code embedded in a web page — writing more than a few dozen lines of code would have been somewhat unusual. Due to this, early web browsers executed such code pretty slowly. Over time, though, JS became more and more popular, and web developers started using it to create interactive experiences.</li>
              <li>Web browser developers responded to this increased JS usage by optimizing their execution engines (dynamic compilation) and extending what could be done with it (adding APIs), which in turn made web developers use it even more. On modern websites, your browser is frequently running applications that span hundreds of thousands of lines of code. This is the long and gradual growth of “the web”, starting as a simple network of static pages, and evolving into a platform for rich applications of all kinds.</li>
              <li>More than this, JS has become popular enough to be used outside the context of browsers, such as implementing JS servers using node.js. The “run anywhere” nature of JS makes it an attractive choice for cross-platform development. There are many developers these days that use only JavaScript to program their entire stack!</li>
              <code>if ("" == 0) {
  // It is! But why??
}
if (1 < x < 3) {
  // True for *any* value of x!
}</code>
              <code>const obj = { width: 10, height: 15 };
// Why is this NaN? Spelling is hard!
const area = obj.width * obj.heigth;</code>
            </ul>
          </article>
        </section>
        <section class="main-section" id="TSFJP">
            <header>TypeScript for JavaScript Programmers</header>
          <p>TypeScript stands in an unusual relationship to JavaScript. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system. For example, JavaScript provides language primitives like string and number, but it doesn’t check that you’ve consistently assigned these. TypeScript does. This means that your existing working JavaScript code is also TypeScript code. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs. This tutorial provides a brief overview of TypeScript, focusing on its type system.</p>
          <code>let helloWorld = "Hello World";</code>
        </section>
        <section class="main-section" id="TSFJCP">
            <header>TypeScript for Java/C# Programmers</header>
          <p>TypeScript is a popular choice for programmers accustomed to other languages with static typing, such as C# and Java. TypeScript’s type system offers many of the same benefits, such as better code completion, earlier detection of errors, and clearer communication between parts of your program. While TypeScript provides many familiar features for these developers, it’s worth stepping back to see how JavaScript (and therefore TypeScript) differ from traditional OOP languages. Understanding these differences will help you write better JavaScript code, and avoid common pitfalls that programmers who go straight from C#/Java to TypeScript may fall in to.</p>
          <ul>
            <li>
              If you’re familiar with JavaScript already but are primarily a Java or C# programmer, this introductory page can help explain some of the common misconceptions and pitfalls you might be susceptible to. Some of the ways that TypeScript models types are quite different from Java or C#, and it’s important to keep these in mind when learning TypeScript.
            </li>
            <li>If you’re a Java or C# programmer that is new to JavaScript in general, we recommend learning a little bit of JavaScript without types first to understand JavaScript’s runtime behaviors. Because TypeScript doesn’t change how your code runs, you’ll still have to learn how JavaScript works in order to write code that actually does something!</li>
            <li>It’s important to remember that TypeScript uses the same runtime as JavaScript, so any resources about how to accomplish specific runtime behavior (converting a string to a number, displaying an alert, writing a file to disk, etc.) will always apply equally well to TypeScript programs. Don’t limit yourself to TypeScript-specific resources!</li>
          </ul>
        </section>
        <section class="main-section" id="TSFFP">
            <header>TypeScript for Functional Programmers</header>
          <p>TypeScript began its life as an attempt to bring traditional object-oriented types to JavaScript so that the programmers at Microsoft could bring traditional object-oriented programs to the web. As it has developed, TypeScript’s type system has evolved to model code written by native JavaScripters. The resulting system is powerful, interesting and messy. This introduction is designed for working Haskell or ML programmers who want to learn TypeScript. It describes how the type system of TypeScript differs from Haskell’s type system. It also describes unique features of TypeScript’s type system that arise from its modelling of JavaScript code. This introduction does not cover object-oriented programming. In practice, object-oriented programs in TypeScript are similar to those in other popular languages with OO features.</p>
        </section>
        <section class="main-section" id="TSHB">
            <header>Installing TypeScript</header>
          <p>There are two main ways to add TypeScript to your project:</p>
          <ul>
            <li>
              Via npm (the Node.js package manager)
            </li>
            <li>
              By installing TypeScript’s Visual Studio plugins
            </li>
            <ul>
              <code>npm install -g typescript</code>
              <p>In your editor, type the following JavaScript code in greeter.ts:</p>
              <code>function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);</code>
        </section>
        <section class="main-section" id="TSTB">
            <header>About this Handbook</header>
          <p>Over 20 years after its introduction to the programming community, JavaScript is now one of the most widespread cross-platform languages ever created. Starting as a small scripting language for adding trivial interactivity to webpages, JavaScript has grown to be a language of choice for both frontend and backend applications of every size. While the size, scope, and complexity of programs written in JavaScript has grown exponentially, the ability of the JavaScript language to express the relationships between different units of code has not. Combined with JavaScript’s rather peculiar runtime semantics, this mismatch between language and program complexity has made JavaScript development a difficult task to manage at scale. The most common kinds of errors that programmers write can be described as type errors: a certain kind of value was used where a different kind of value was expected. This could be due to simple typos, a failure to understand the API surface of a library, incorrect assumptions about runtime behavior, or other errors. The goal of TypeScript is to be a static typechecker for JavaScript programs - in other words, a tool that runs before your code runs (static) and ensures that the types of the program are correct (typechecked). If you are coming to TypeScript without a JavaScript background, with the intention of TypeScript being your first language, we recommend you first start reading the documentation on either the Microsoft Learn JavaScript tutorial or read JavaScript at the Mozilla Web Docs. If you have experience in other languages, you should be able to pick up JavaScript syntax quite quickly by reading the handbook.</p>
        </section>
        <section class="main-section" id="TSEDT">
            <header>The Basics</header>
          <p>Each and every value in JavaScript has a set of behaviors you can observe from running different operations. That sounds abstract, but as a quick example, consider some operations we might run on a variable named message.</p>
          <code>// Accessing the property 'toLowerCase'
// on 'message' and then calling it
message.toLowerCase();
// Calling 'message'
message();</code>
          <p>If we break this down, the first runnable line of code accesses a property called toLowerCase and then calls it. The second one tries to call message directly. But assuming we don’t know the value of message - and that’s pretty common - we can’t reliably say what results we’ll get from trying to run any of this code. The behavior of each operation depends entirely on what value we had in the first place.<p>
          <ul>
            <li>
              Is message callable?
            </li>
            <li>Does it have a property called toLowerCase on it?</li>
            <li>If it does, is toLowerCase even callable?</li>
            <li>If both of these values are callable, what do they return?</li>
          </ul>
        </section>
        <section class="main-section" id="TSN">
            <header>Everyday Types</header>
          <p>In this chapter, we’ll cover some of the most common types of values you’ll find in JavaScript code, and explain the corresponding ways to describe those types in TypeScript. This isn’t an exhaustive list, and future chapters will describe more ways to name and use other types. Types can also appear in many more places than just type annotations. As we learn about the types themselves, we’ll also learn about the places where we can refer to these types to form new constructs. We’ll start by reviewing the most basic and common types you might encounter when writing JavaScript or TypeScript code. These will later form the core building blocks of more complex types.</p>
        </section>
        <section class="main-section" id="TSMF">
            <header>More on Functions</header>
          <p>Functions are the basic building block of any application, whether they’re local functions, imported from another module, or methods on a class. They’re also values, and just like other values, TypeScript has many ways to describe how functions can be called. Let’s learn about how to write types that describe functions.</p>
        </section>
        <section class="main-section" id="TSOBT">
            <header>Object Types</header>
          <p>In JavaScript, the fundamental way that we group and pass around data is through objects. In TypeScript, we represent those through object types.</p>
          <code>function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}</code>
        </section>
      </main>
    </body>
</html>
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

#navbar {
  background-color: #333;
  color: white;
  padding: 1.5rem;
  text-align: center;
}

#navbar header {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#navbar li {
  margin-right: 1rem;
}

#navbar a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#main-doc {
  padding: 2rem;
}

.main-section {
  margin-bottom: 3rem;
}

.main-section header {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.main-section p {
  line-height: 1.6;
}

code {
  background-color: #f4f4f4;
  padding: 0.5rem;
  border: 1px solid #ddd;
  display: block;
  margin: 1rem 0;
}

ul {
  padding-left: 2rem;
}

Everything looks like its work in preview but i get this erros

  • Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
  • 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”).

Hi @thereisnobandage :slight_smile:
What challenge are you trying to solve?
If you can provide a libble bit more context I can try to help you out

2 Likes

Responsive Web Design: Technical Documentation Page

Welcome to the community!

It appears the id in the section does not match the Text of the headers in each section.

The Text has been altered to letters in the id.

The header text and the id in the section need to be the same.

Though the nav-link do match the sections, due to the above conflict you are receiving these error messages.

If you change everything to match, maybe changing the headers to the letters, with a note for what they mean either above in a comment, or at the bottom for reference, this may help pass the project.

I hope this helps you,

Keep up the great progress!

2 Likes

Hey thanks for reply I just change the code a little bit

<li>
          <a class="nav-link" href="What_is_TypeScript"
            >What is TypeScript</a
          >
        </li>
 <section class="main-section" id="What_is_TypeScript">
        <header>What is TypeScript</header>

If I understand you correctly, isn’t it supposed to work this way?

Hello!
Yes, that is the correct way.

Sorry! I just noticed there is not any title in the head. It could just be Technical Documentation Paper, or whatever you like.

Once that is fixed, it should go through for you.

If you have further problems with the code not passing after the above change, please post the updated code for us to see and find the existing problems?

Keep up the good progress!

Still same problem

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>TS Doc</title>
  </head>
  <body>
    <nav id="navbar">
      <header>TS Documentation</header>
      <ul>
        <li><a class="nav-link" href="Introduction">Introduction</a></li>
        <li>
          <a class="nav-link" href="What_is_TypeScript"
            >What is TypeScript</a
          >
        </li>
        <li>
          <a class="nav-link" href="Adopt_TypeScript_Gradually"
            >Adopt TypeScript Gradually</a
          >
        </li>
        <li><a class="nav-link" href="Hello_World">Hello World</a></li>
        <li><a class="nav-link" href="Variables">Variables</a></li>
        <li>
          <a class="nav-link" href="Declaring_Variables"
            >Declaring Variables</a
          >
        </li>
        <li><a class="nav-link" href="Variable_Scope">Variable Scope</a></li>
        <li>
          <a class="nav-link" href="Global_Variables">Global Variables</a>
        </li>
        <li><a class="nav-link" href="Constants">Constants</a></li>
        <li><a class="nav-link" href="Data_Types">Data Types</a></li>
        <li>
          <a class="nav-link" href="If...Else_Statement"
            >If...Else Statement</a
          >
        </li>
        <li><a class="nav-link" href="While_Statement">While Statement</a></li>
        <li>
          <a class="nav-link" href="Function_Declarations"
            >Function Declarations</a
          >
        </li>
        <li><a class="nav-link" href="Reference">Reference</a></li>
      </ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <article>
          <p>
            TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
          </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. Core JavaScript can
            be extended for a variety of purposes by supplementing it with
            additional objects; for example:
          </p>
          <ul>
            <li>
              TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
            </li>
            <li>
              TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
            </li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="What_is_TypeScript">
        <header>What is TypeScript</header>
        <article>
          <p>TypeScript is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. However, TypeScript adds static typing to the language, allowing developers to define and enforce types for variables, function parameters, and return values.</p>
          <ul>
            <li>
              Static Typing: TypeScript introduces static typing, which means that you can declare the types of variables, function parameters, and return types. This helps catch type-related errors during development rather than at runtime.
            </li>
            <li>Type Annotations: TypeScript uses type annotations to specify the data type of a variable or function. For example, you can declare a variable as a string, number, boolean, etc.</li>
            <li>
              Interfaces: TypeScript supports interfaces, allowing developers to define the structure of objects. This helps in ensuring that objects conform to a specific shape.
            </li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="Adopt_TypeScript_Gradually">
        <header>Adopt_TypeScript_Gradually</header>
        <article>
          <p>
            Apply types to your JavaScript project incrementally,<strong>each step improves editor support </strong> and improves your codebase
          </p>

          <p>
            Let's take this incorrect JavaScript code, and see how <strong>TypeScript can catch mistakes in your editor</strong>
          </p>
          <code>function compact(arr) {
            if (orr.length > 10)
                return arr.trim(0, 10)
            return arr}</code>
          <code>function compact(arr: string[]) {
            if (arr.length > 10)
              return arr.slice(0, 10)
            return arr}</code>
        </article>
      </section>
      <section class="main-section" id="Hello_world">
        <header>Hello world</header>
        <article>
          Before you begin, make sure you have TypeScript installed. You can install TypeScript globally using npm (Node Package Manager)
          <code>let greeting: string = "Hello, World!";
console.log(greeting); </code>
        </article>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <p>
          In TypeScript, you can declare variables using the let keyword, similar to JavaScript. However, TypeScript allows you to add type annotations to your variables for better code quality and maintenance. Here's an example:
        </p>
        <code>
          // Variable without type annotation (implicitly inferred)
let message = "Hello, TypeScript!";

// Variable with type annotation
let age: number = 25;
let isStudent: boolean = true;
let name: string = "John";

// Arrays and their types
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

// Objects and their types
let person: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

// Function and its type (return type and parameter types)
let greet: (name: string) => string = function (name: string): string {
  return "Hello, " + name + "!";
};
        </code>
      </section>
      <section class="main-section" id="Declaring_Variables">
        <header>Declaring Variables</header>
        <article>
          You can declare a variable in three ways:
          <p>
            In TypeScript, you can declare variables using the let, const, or var keywords. Here's a brief explanation of each:
          </p>
          <p>
            let:

Used to declare variables that can be reassigned.
Has block scope, meaning it is only accessible within the block (statements enclosed in curly braces {}) where it's defined. <code>let x: number = 10;
x = 20; // Valid
</code>
          </p>
          <p>
            const: Used to declare variables that cannot be reassigned.
Also has block scope. <code>const pi: number = 3.14;
// pi = 3.14159; // Error: Cannot assign to 'pi' because it is a constant.
</code>
          </p>
          <p>var: Historically used in JavaScript for variable declaration. However, in modern TypeScript, it's generally recommended to use let and const for better scoping.
Unlike let and const, var has function scope, and it is not block-scoped. <code>var y: number = 5; </code> </p>
        </article>
      </section>
      <section class="main-section" id="Variable_Scope">
        <header>Variable Scope</header>
        <article>
          <p>
            In TypeScript, as well as in JavaScript, variable scope refers to the region of the program where a particular variable can be accessed or modified. The scope of a variable is determined by where it is declared, and TypeScript has different types of variable scope:
          </p>

          <p>
            Global Scope: Variables declared outside of any function or block have global scope.
They can be accessed from any part of the code, including functions and blocks. <code>let globalVar = "I am global";

function example() {
  console.log(globalVar); // Accessible here
}
</code>
          </p>
          Function Scope: Variables declared within a function have function scope.
They are only accessible within that function. <code>function example() {
  let localVar = "I am local";
  console.log(localVar); // Accessible here

  // console.log(globalVar); // Error: globalVar is not defined here
}
</code>
          <p>
            Block Scope (let and const): Variables declared with let and const within a block (enclosed in curly braces {}) have block scope. They are only accessible within that block. <code>if (true) {
  let blockVar = "I am block-scoped";
  const anotherBlockVar = "I am also block-scoped";
  console.log(blockVar, anotherBlockVar); // Accessible here
}

// console.log(blockVar); // Error: blockVar is not defined here
// console.log(anotherBlockVar); // Error: anotherBlockVar is not defined here
</code>
          </p>
          <p>No Block Scope (var): Variables declared with var have function scope (or global scope if declared outside any function). Unlike let and const, var does not have block scope. It's important to note that var declarations are hoisted to the top of their containing function or script, which can lead to unexpected behavior.<code>function example() {
  if (true) {
    var varWithNoBlockScope = "I am not block-scoped";
  }
  console.log(varWithNoBlockScope); // Accessible here due to hoisting
}
</code></p>
        </article>
      </section>
      <section class="main-section" id="Global_Variables">
        <header>Global Variables</header>
        <article>
          <p>
            Global variables in TypeScript are variables declared outside of any function or block, making them accessible throughout the entire program. While global variables can be convenient, it's essential to use them judiciously, as they can lead to potential issues such as naming conflicts and code maintainability concerns.
          </p>
        </article>
      </section>
      <section class="main-section" id="Constants">
        <header>Constants</header>
        <article>
          <p>
            In TypeScript, you can use the const keyword to declare constants. Constants are variables whose values cannot be re-assigned once they are initialized. They are useful for representing values that are meant to stay the same throughout the execution of a program. Here's an example: <code>const PI: number = 3.14;
// PI = 3.14159; // Error: Cannot assign to 'PI' because it is a constant.

const GREETING: string = "Hello, World!";
// GREETING = "Hi, there!"; // Error: Cannot assign to 'GREETING' because it is a constant.
</code>
          </p>
        </article>
      </section>
      <section class="main-section" id="Data_Types">
        <header>Data Types</header>
        <article>
          <p>In TypeScript, like in many programming languages, data types are used to define the kind of values a variable can hold and the operations that can be performed on those values. TypeScript provides several built-in data types, and you can also create your own custom types.</p>
          <ul>
            <li>Boolean: Represents a binary value: true or false.</li>
                <li>Number: Represents both integer and floating-point numbers.</li>
                <li>
                  String: Represents a sequence of characters.
                </li>
                <li>
                  Array: Represents a collection of values of the same type.
                </li>
                <li>Tuple: Represents an ordered list of elements where the type of each element is known.</li>
                <li>Enum: A way to give more friendly names to sets of numeric values.</li>
                <li>
                  Any: Represents a value of any type. It's often used when the type of a variable cannot be determined in advance or when working with dynamic content.
                </li>
                <li>
                  Void: Represents the absence of a value. Used as the return type of functions that do not return a value.
                </li>
                <li>Null and Undefined: Have their own types named null and undefined respectively.</li>
                <li>
                  Object: Represents any non-primitive type, i.e., anything that is not number, string, boolean, symbol, null, or undefined.
                </li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="If...Else_Statement">
        <header>If...Else Statement</header>
        <article>
          In TypeScript, as in many programming languages, the if...else statement is used for conditional execution of code. Here's the basic syntax:

          <code>let condition: boolean = true;

if (condition) {
  // Code to be executed if the condition is true
  console.log("Condition is true");
} else {
  // Code to be executed if the condition is false
  console.log("Condition is false");
}
</code>
In this example, the if statement checks whether the condition is true. If it is, the code block following the if statement is executed. If the condition is false, the code block following the else statement is executed.

You can also have multiple conditions using else if:
          <code>let grade: number = 85;

if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else {
  console.log("D");
}
</code>
        </article>
      </section>
      <section class="main-section" id="While_Statement">
        <header>While Statement</header>
        <article>
          The while statement in TypeScript, as in many programming languages, is used to create a loop that continues executing a block of code as long as a specified condition evaluates to true. The basic syntax of a while loop is as follows:
          <code>let condition: boolean = true;

while (condition) {
  // Code to be executed while the condition is true
  console.log("Inside the while loop");

  // Update the condition to eventually exit the loop
  condition = false; // or any other logic to change the condition
}
</code> In this example, the code inside the while loop will continue to execute as long as the condition remains true.
        </article>
      </section>
      <section class="main-section" id="Function_Declarations">
        <header>Function Declarations</header>
        <article>
          In TypeScript, you can declare functions using the function keyword. Here's the basic syntax for function declarations: <code>function add(x: number, y: number): number {
  return x + y;
}

let result: number = add(3, 5);
console.log(result); // Outputs: 8
          </code>
          <ul>
            <p>In this example:</p>
            <li>
              add is the name of the function.
            </li>
            <li>
              x and y are the parameters of the function, each with a specified type (number in this case).
            </li>
            <li>
              number after the parentheses indicates that the function returns a value of type number.
            </li>
            <li>The function body is enclosed in curly braces {}.</li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="Reference">
        <header>Reference</header>
        <article>
          <ul>
            <li>
              All the documentation in this page is taken from
              <a
                href="https://www.typescriptlang.org/docs/"
                target="_blank"
                >TS DOC</a
              >
            </li>
          </ul>
        </article>
      </section>
    </main>
  </body>
</html>

  • 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”).

  • 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).

everything works just fine i don’t understand why :confused:

You have three issues:

  1. All of your href attribute values should be prefixed with a #.
  2. Your section header text for ‘Adopt Typescript Gradually’ should not have underscores.
  3. The case (capitalisation) for your id and section header for ‘Hello World’ does not match with the href attribute and text in your .nav-link.

If you fix these three issues, those tests will pass.

1 Like

Thank you all for help

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