Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I am getting these 2 errors:

  • " None of your header elements should be empty."
  • " 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”)."

But I checked my code and I couldn’t find any header elements that were empty and all the nav-link elements have the same texts as the main-section headers do.

Your code so far
index.html:

<!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>Documentation</title>
  </head>
  <body>
    <div class="sheesh">
      <nav id="navbar">
        <header>JS Documentation</header>
        <hr />
        <div class="nav-links">
          <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="#Hello_world" class="nav-link">Hello world</a>
          <a href="#Variables" class="nav-link">Variables</a>
          <a href="#Constants" class="nav-link">Constants</a>
          <a href="#if...else_statement" class="nav-link"
            >if...else statement</a
          >
        </div>
      </nav>
      <main id="main-doc">
        <section id="Introduction" class="main-section">
          <header>Introduction</header>
          <p>
            JavaScript is a cross-platform, object-oriented scripting language.
            It is a small and lightweight language. Inside a host environment
            (for example, a web browser), JavaScript can be connected to the
            objects of its environment to provide programmatic control over
            them.
          </p>
          <br />
          <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>
          <br />
          <ul>
            <li>
              <p>
                Client-side JavaScript extends the core language by supplying
                objects to control a browser and its Document Object Model
                (DOM). For example, client-side extensions allow an application
                to place elements on an HTML form and respond to user events
                such as mouse clicks, form input, and page navigation.
              </p>
              <br />
            </li>
            <li>
              <p>
                Server-side JavaScript extends the core language by supplying
                objects relevant to running JavaScript on a server. For example,
                server-side extensions allow an application to communicate with
                a database, provide continuity of information from one
                invocation to another of the application, or perform file
                manipulations on a server.
              </p>
            </li>
          </ul>
        </section>
        <section id="What_you_should_already_know" class="main-section">
          <header>What you should already know</header>
          <p>This guide assumes you have the following basic background:</p>
          <br />
          <ul>
            <li>
              <p>
                A general understanding of the Internet and the World Wide Web
                (WWW).
              </p>
            </li>
            <li>
              <p>Good working knowledge of HyperText Markup Language (HTML).</p>
            </li>
            <li>
              <p>
                Some programming experience. If you are new to programming, try
                one of the tutorials linked on the main page about JavaScript.
              </p>
            </li>
          </ul>
        </section>
        <section id="Hello_world" class="main-section">
          <header>Hello world</header>
          <p>
            To get started with writing JavaScript, open the Scratchpad and
            write your first "Hello world" JavaScript code:
          </p>
          <p>
            <code
              >function greetMe(yourName) { alert("Hello " + yourName); }
              greetMe("World");</code
            >
          </p>
          <br />
          <p>
            Select the code in the pad and hit Ctrl+R to watch it unfold in your
            browser!
          </p>
        </section>
        <section id="Variables" class="main-section">
          <header>Variables</header>
          <p>
            You use variables as symbolic names for values in your application.
            The names of variables, called identifiers, conform to certain
            rules.
          </p>
          <br />
          <p>
            A JavaScript identifier must start with a letter, underscore (_), or
            dollar sign ($); subsequent characters can also be digits (0-9).
            Because JavaScript is case sensitive, letters include the characters
            "A" through "Z" (uppercase) and the characters "a" through "z"
            (lowercase).
          </p>
          <br />
          <p>
            You can use ISO 8859-1 or Unicode letters such as å and ü in
            identifiers. You can also use the Unicode escape sequences as
            characters in identifiers. Some examples of legal names are
            Number_hits, temp99, and _name.
          </p>
        </section>
        <section id="Constants" class="main-section">
          <header>Constants</header>
          <p>
            You can create a read-only, named constant with the const keyword.
            The syntax of a constant identifier is the same as for a variable
            identifier: it must start with a letter, underscore or dollar sign
            and can contain alphabetic, numeric, or underscore characters.
          </p>
          <br />
          <p><code>const PI = 3.14;</code></p>
          <br />
          <p>
            A constant cannot change value through assignment or be re-declared
            while the script is running. It has to be initialized to a value.
          </p>
          <p>
            The scope rules for constants are the same as those for let block
            scope variables. If the const keyword is omitted, the identifier is
            assumed to represent a variable.
          </p>
          <br />
          <p>
            You cannot declare a constant with the same name as a function or
            variable in the same scope. For example:
          </p>
          <br />
          <p>
            <code
              >// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
              WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
              //statements }</code
            >
          </p>
          <br />
          <p>
            However, object attributes are not protected, so the following
            statement is executed without problems.
          </p>
          <br />
          <p>
            <code
              >const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
              "otherValue";</code
            >
          </p>
          <br />
        </section>
        <section id="if...else_statement" class="main-section">
          <header>if...else statement</header>
          <p>
            Use the if statement to execute a statement if a logical condition
            is true. Use the optional else clause to execute a statement if the
            condition is false. An if statement looks as follows:
          </p>
          <br />
          <p>
            <code>if (condition) { statement_1; } else { statement_2; }</code>
          </p>
          <br />
          <p>
            condition can be any expression that evaluates to true or false. See
            Boolean for an explanation of what evaluates to true and false. If
            condition evaluates to true, statement_1 is executed; otherwise,
            statement_2 is executed. statement_1 and statement_2 can be any
            statement, including further nested if statements.
          </p>
          <br />
          <p>
            You may also compound the statements using else if to have multiple
            conditions tested in sequence, as follows:
          </p>
          <br />
          <p>
            <code
              >if (condition_1) { statement_1; } else if (condition_2) {
              statement_2; } else if (condition_n) { statement_n; } else {
              statement_last; }</code
            >
          </p>
          <br />
          <p>
            In the case of multiple conditions only the first logical condition
            which evaluates to true will be executed. To execute multiple
            statements, group them within a block statement ({ ... }) . In
            general, it's good practice to always use block statements,
            especially when nesting if statements:
          </p>
          <br />
          <p>
            <code
              >if (condition) { statement_1_runs_if_condition_is_true;
              statement_2_runs_if_condition_is_true; } else {
              statement_3_runs_if_condition_is_false;
              statement_4_runs_if_condition_is_false; }</code
            >
          </p>
          <br />
          <p>
            It is advisable to not use simple assignments in a conditional
            expression, because the assignment can be confused with equality
            when glancing over the code. For example, do not use the following
            code:
          </p>
          <br />
          <p><code>if (x = y) { /* statements here */ }</code></p>
          <br />
          <p>
            If you need to use an assignment in a conditional expression, a
            common practice is to put additional parentheses around the
            assignment. For example:
          </p>
          <br />
          <p><code>if ((x = y)) { /* statements here */ }</code></p>
          <br />
        </section>
      </main>
    </div>
  </body>
</html>

styles.css

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #1b1b1b;
}
main header {
  font-size: 35px;
  font-weight: bold;
  margin: 20px 0;
  color: #ffffff;
  margin-left: 20px;
}
main {
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
nav header {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  padding: 20px 0;
}
nav a {
  text-decoration: none;
  color: #f8f4f8;
  font-size: 18px;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.15s ease;
}
span {
  color: #f0db4f;
}
nav a:hover {
  background-color: #3b3b3b;
}
nav {
  height: 100vh;
  background-color: #2b2b2b;
  width: fit-content;
  padding: 10px;
}
.sheesh {
  display: inline-grid;
  grid-template-columns: 1fr 5fr;
}
.nav-links {
  display: flex;
  flex-direction: column;
}
p {
  color: #f8f4f8;
  margin-left: 25px;
}
ul p {
  margin-left: 0;
}
ul {
  margin-left: 25px;
  color: #f8f4f8;
}
code {
  background-color: #343434;
  padding: 15px;
  word-break: normal;
  word-wrap: normal;
  display: block;
  margin-top: 10px;
  width: fit-content;
  border-radius: 5px;
  margin-left: 10px;
  white-space: pre-line;
  line-height: 1.5;
  font-family: cascadia mono;
  font-size: 14px;
}
hr {
  margin-bottom: 20px;
  opacity: 0.5;
}

@media only screen and (max-width: 800px) {
  nav {
    opacity: 0;
    transform: scale(0);
    width: 0;
    height: 0;
    visibility: hidden;
    transition: all 0.1s ease;
  }
  .sheesh {
    display: block;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I wish I could help. but your ahead of me.

however I’d interpret it as it wants either, something in the tag (that I dont know about rn), or specific text.

if its asking for specific text,
I tend to find sometimes it will pass the code if I add a space after the last word

hello, if I test your index.html without the css file , it passes that specific check.
So something about the index.html is the reason for the failure
Look for the word ‘hidden’ in your file. And comment out all those styles to see if changes anything.