Technical Documentation Page - Build a Technical Documentation Page

I keep getting this error " 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”)."
I just need to find out where I went wrong because when I look back at the code to me everything seems fine.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta width="device-width, initial-scale=1.0">
    <title>Flexbox Technical Documentation</title>
    </head>
    <body>
      <header>
        <h1>Flexbox Technical Documentation</h1>
        <nav id="navbar">
          <header>Flexbox</header>
          <ul>
            <li><a class="nav-link" href="#Introduction">Introduction</a></li>
            <li><a class="nav-link" href="#Flex_Container_vs._Flex_Item:_What's_the_Difference?">Flex Container vs Flex Item: What's the Difference</a></li>
            <li><a class="nav-link" href="#What_Is_a_flex_Value_in_CSS?">What Is a flex Value in CSS?</a></li>
            <li><a class="nav-link" href="#What_Is_Flexbox's_flex-flow_Property?">What Is Flexbox's flex-flow Property?</a></li>
            <li><a class="nav-link" href="#Overview">Overview</a></li>
            </ul>
          </nav>
      </header>
      <main id="main-doc">
        <section class="main-section" id="Introduction">
          <header>
            <h2>Introduction</h2>
          </header>
         <p>
         What Is Flexbox?<br>
Flexbox makes browsers display selected HTML elements as flexible box models.

Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.
         </p>
         <p>
           <ul>
<li>"One-dimensionally" means Flexbox allows laying out box models in a row or column at a time. In other words, Flexbox cannot lay out box models in a row and column at the same time.</li><br>
<li>Flexbox is sometimes called a flexible box layout module.</li><br>
<li>Use the grid layout module if you need to resize and reposition elements two-dimensionally.</li>
           </ul>
         </p>
        </section>
        <section id="Flex_Container_vs._Flex_Item:_What's_the_Difference?" class="main-section">
          <header>
            <h2>Flex Container vs. Flex Item: What's the Difference?</h2>
          </header>
         <p>
          A flex container is an HTML element whose display property's value is flex or inline-flex.

         </p>
         <p>
          Flex items are the direct children of a flex container.
         </p>
         <figure>
           <img src="https://www.freecodecamp.org/news/content/images/size/w1600/2022/10/css-flex-container-flex-item-illustration-codesweetly.png">
           <figcaption>A flex container (the large yellow area in the image) is an HTML element whose display property's value is flex or inline-flex. Flex items (the smaller boxes within the yellow container) are the direct children of a flex container.</figcaption>
           <figure>
        </section>
        <section id="What_Is_a_flex_Value_in_CSS?" class="main-section">
          <header>
            <h2>What Is a flex Value in CSS?</h2>
          </header>
         <p>
          flex tells browsers to display the selected HTML element as a block-level flexible box model.
         </p>
         <p>
          In other words, setting an element's display property's value to flex turns the box model into a block-level flexbox.
         </p>
         <ul>
           <li>Converting an HTML node to a flexible box model makes the element's direct children become flexible items.</li><br>
           <li>The display: flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.</li>
           </ul>
        </section>
        <section id="What_Is_Flexbox's_flex-flow_Property?" class="main-section">
          <header>
            <h2>What Is Flexbox's flex-flow Property?</h2>
          </header>
         <p>
          flex-flow is a shorthand for the flex-direction and flex-wrap properties
         </p>
         <p>
          You can alternatively use the flex-flow property to shorten your code like so:
         </p>
        </section>
        <section id="Overview" class="main-section">
          <header>
            <h2>Overview</h2>
          </header>
         <p>
         In this article, we discussed all the Flexbox tools you need to create basic and advanced website layouts in flexible and responsive ways.
         </p>
         <p>
          Thanks for reading!
If you like the images I used in this tutorial, you can get them all in this booklet.
         </p>
        </section>
      </main>
    </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

One of the links does not exactly match its corresponding header. Welcome to the glorious world of debugging, where you get to spend hours finding a simple typo or two :slight_smile:

1 Like

Thank you sm I luv you

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