Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Good day

I’m getting the error: “20. 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).”

Can you please assist?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
  <main id="main-doc">
    <nav id="navbar">
    <header>Coding Basics</header>

      <a href="#introduction" class="nav-link">Introduction</a>
      <a href="#javascript" class="nav-link">JavaScript</a>
      <a href="#variables" class="nav-link">Variables</a>
      <a href="#constants" class="nav-link">Constants</a>
      <a href="#data_types" class="nav-link">Data Types</a>
    </nav>

    <!-- section 1 -->
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <p>Coding is the process of writing instructions that a computer can understand and execute. These instructions are written in programming languages like Python, JavaScript, Java, or C++, which act as a bridge between human ideas and machine operations.</p>
    <p>In essence, coding transforms human logic into a format that computers can process, enabling the creation of software, websites, apps, games, and countless other digital solutions.
      <br>Basic example in JavaScript
    </p>
    <code>console.log("Hello World");</code>
    <ul>
      <li>Designing algorithms – step-by-step solutions to problems.</li>
      <li>Implementing code – writing these solutions in a specific programming language.</li>
    </ul>
    </section>
    
    <!-- section 2 -->
    <section class="main-section" id="JavaScript">
      <header>JavaScript</header>
      <p>JavaScript is a dynamic, interpreted programming language that powers interactivity on the web. Alongside HTML (structure) and CSS (style), it forms the core technologies of web development.</p>
    <p>It can run client-side in browsers and server-side via environments like Node.js.</p>
    <code></code>
    </section>
    
    <!-- section 3 -->
    <section class="main-section" id="Variables">
      <header>Variables</header>
      <p>A variable in programming is a named storage location used to hold data or values that can change during the execution of a program. </p>
    <p>It acts as a container for storing information, which can later be accessed, modified, or used in computations. Variables are fundamental to programming as they enable dynamic and reusable code.</p>
    <code></code>
    </section>
    
    <!-- section 4 -->
    <section class="main-section" id="Constants">
      <header>Constants</header>
      <p>A constant in programming is a value that is defined in the source code and remains unchanged throughout the program's execution.</p>
    <p>Constants are used to store values that do not change during runtime, enhancing code readability and maintainability.</p>
    <code></code>
    </section>
    
    <!-- section 5 -->
    <section class="main-section" id="Data_Types">
      <header>Data Types</header>
      <p>Data types define the kind of value a variable can hold and determine the operations that can be performed on it.</p>
    <p>They ensure memory efficiency, type safety, and clarity in programming.</p>
    <code></code>
    <ul>
      <li>Integer (int) – Stores whole numbers without fractions. Used for counting, indexing, or discrete values. Example: age = 25</li>
      <li>Character (char) – Holds a single letter, digit, or symbol. Example: 'A'</li>
      <li>Boolean (bool) – Represents logical values True or False, often used in conditions. Example: is_active = True</li>
    </ul>
    </section>
    
    
    
  </main>
  </body>
</html>

/* file: styles.css */
header {
  font-weight: bold;
  font-family: Verdana, sans-serif;
  padding-bottom: 10px;
}
.nav-link {
  font-size: 20px;
}
#navbar {
  left: 0;
  padding: 20px;
}
#navbar header {
  font-size: 1.6em;
  margin-bottom: 7;
}
#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}
main-doc {
  margin-left: 200px;
}
@media (max-height: 600px) {
  .main-section {
    font-size: 60%
  }
}

Your browser information:

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

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page

2

Did you test your code in the preview window to see if it behaves as expected?

Re-read User Story #4.

3

I am not sure these two match, you know, capitalization

check all of them for similar issues

4

Thank you for the advice. You were right about the capitalisation.

5

Thank you for the advice. In the end the issue was with the capitalisation at the href‘s and id’s.