Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I’m failing Test 6. “None of your header elements should be empty.”

However my header seems pretty fine in my opinion
Ive already tried hard refreshing

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Command Line Tools Documentation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav id="navbar">
      <header><h1>Table of Contents</h1></header>
      <ol>
        <a class="nav-link" href="#Getting_Started"><li>Getting Started</li></a>
        <a class="nav-link" href="#Basic_Commands"><li>Basic Commands</li></a>
        <a class="nav-link" href="#File_and_Directory_Management"><li>File and Directory Management</li></a>
        <a class="nav-link" href="#Text_Manipulation"><li>Text Manipulation</li></a>
        <a class="nav-link" href="#System_Information"><li>System Information</li></a>
        <a class="nav-link" href="#Networking"><li>Networking</li></a>
        <a class="nav-link" href="#Package_Management"><li>Package Management</li></a>
        <a class="nav-link" href="#Tips_and_Tricks"><li>Tips and Tricks</li></a>
      </ol>
    </nav>
  </header>

  <main id="main-doc">
    <section class="main-section" id="Getting_Started">
      <header>
        <h2>Getting Started</h2>
      </header>
      <main>
        <h3>Opening the Terminal</h3>
        <p>In Arch Linux, you can open the terminal by searching for "Terminal" in your application menu or by pressing <kbd>Ctrl + Alt + T</kbd></p>
        <h3>Understanding the Prompt</h3>
        <p>When you open the terminal, you'll see a prompt that looks something like this:</p>
        <code>[username@hostname ~]$</code>
        <ul>
          <li><span class="output-explain">username </span>: Your current user.</li>
          <li><span class="output-explain">hostname </span>: The name of your computer.</li>
          <li><span class="output-explain">~ </span>: Your current directory (~ represents your home directory).</li>
          <li><span class="output-explain">$ </span>: Indicates you're a regular user (root users will see #).</li>
        </ul>
      </main>
    </section>

    <section class="main-section" id="Basic_Commands">
      <header>
        <h2>Basic Commands</h2>
      </header>
      <main>
        <p>Here are some essential commands to get you started:</p>

        <h3><span class="output-explain">pwd </span>(Print Working Directory)</h3>
        <p>Displays the full path of your current directory.</p>
        <code>$ pwd<br>/home/username</code>

        <h3><span class="output-explain">ls </span>(List Files)</h3>
        <p>Lists the contents of a directory.</p>
        <code>$ ls <br>Documents Downloads Music Pictures</code>
        <ul>
          <li>Use <span class="output-explain">ls -1</span> for a detailed list.</li>
          <li>Use <span class="output-explain">ls -a</span> to show hidden files.</li>
        </ul>

        <h3><span class="output-explain">cd </span>(Change Directory)</h3>
        <p>Moves you to a different directory.</p>
        <code>$ cd Documents<br>$ pw/Documents</code>
        <ul>
          <li>Use <span class="output-explain">cd ..</span>to move up one directory.</li>
          <li>Use <span class="output-explain">cd ~</span> to return to your home directory.</li>
        </ul>
          
      </main>
    </section>

    <section class="main-section" id="File_and_Directory_Management">
      <header>
        <h2>File and Directory Management</h2>
      </header>
      <main>
        <h3><span class="output-explain">mkdir </span>(Make Directory)</h3>
        <p>Creates a new directory</p>
        <code>$ mkdir Projects</code>
        <h3><span class="output-explain">touch </span>(Create File)</h3>
        <p>Creates an empty file</p>
        <code>$ touch example.txt</code>
        <h3><span class="output-explain">cp </span>(Copy)</h3>
        <p>Copies files or directories.</p>
        <code>$ cp example.txt backup.txt</code>
        <h3><span class="output-explain">mv </span>(Move/Rename)</h3>
        <p>Moves or renames files or directories.</p>
        <code>$ mv example.txt Documents/<br>$ mv oldname.txt newname.txt</code>
        <h3><span class="output-explain">rm </span>(Remove)</h3>
        <p>Deletes files or directories.</p>
        <code>$ rm example.txt<br>$ rm -r Projects  # Use -r to remove directories</code>
      </main>
    </section>

    <section class="main-section" id="Text_Manipulation">
      <header>
        <h2>Text Manipulation</h2>
      </header>
      <main>
        <h3><span class="output-explain">cat </span>(Concatenate)</h3>
        <p>Displays the contents of a file.</p>
        <code>$ cat example.txt</code>
        <h3><span class="output-explain">echo </span>(Print Text)</h3>
        <p>Prints text to the terminal or a file.</p>
        <code>$ echo "Hello, World!"<br>$ echo "Hello, World!" > example.txt</code>
        <h3><span class="output-explain">grep </span>(Search Text)</h3>
        <p>Searches for text within files.</p>
        <code>$ grep "search term" example.txt</code>
        
      </main>
    </section>

    <section class="main-section" id="System_Information">
      <header>
        <h2>System Information</h2>
      </header>
      <main>
        <h3><span class="output-explain">uname </span>(System Information)</h3>
        <p>Displays system information</p>
        <code>$ uname -a</code>
        <h3><span class="output-explain">df </span>(Disk Space)</h3>
        <p>Shows disk space usage.</p>
        <code>$ df -h</code>
        <h3><span class="output-explain">top </span>(Processes)</h3>
        <p>Displays running processes and system resource usage.</p>
        <code>$ top</code>
      </main>
    </section>

    <section class="main-section" id="Networking">
      <header>
        <h2>Networking</h2>
      </header>
      <main>
        <h3><span class="output-explain">ping </span>(Network Connectivity)</h3>
        <p>Tests connectivity to a server.</p>
        <code>$ ping google.com</code>
        <h3><span class="output-explain">curl </span>()</h3>
        <p>Transfers data from or to a server.</p>
        <code>$ curl https://example.com</code>
        <h3><span class="output-explain">ssh </span>()</h3>
        <p>Connects to a remote server.</p>
        <code>$ ssh username@hostname</code>
      </main>
    </section>

    <section class="main-section" id="Package_Management">
      <header>
        <h2>Package Management</h2>
      </header>
      <main>
        <h3><span class="output-explain">pacman </span>(Package Manager)</h3>
        <p>Arch Linux uses pacman for package management.</p>
        <ul>
          <li><p>Install a package:</p><code>$ sudo pacman -S package_name</code></li>
          <li><p>Update the system:</p><code>$ sudo pacman -Syu</code></li>
          <li><p>Remove a package:</p><code>$ sudo pacman -R package_name</code></li>
        </ul>
      </main>
    </section>

    <section class="main-section" id="Tips_and_Tricks">
      <header>
        <h2>Tips and Tricks</h2>
      </header>
      <main>
        <ul>
          <li><p><span class="tip">Tab Completion:</span>Press <kbd>Tab</kbd> to auto-complete commands or file paths.</p></li>
          <li><p><span class="tip">Command History:</span>Use the <kbd>↑</kbd> and <kbd>↓</kbd>  keys to navigate through previously used commands.</p></li>
          <li><p><span class="tip">Man Pages: </span>Access detailed documentation for commands using <span class="output-explain">man</span>.</p><code>$ man ls</code></li>
          <li><p><span class="tip">Aliases:</span>Create shortcuts for frequently used commands.</p><code>$ alias ll='ls -la'</code></li>
        </ul>
      </main>
    </section>
    <footer>
      <h2>Conclusion</h2>
      <p>The command line is a powerful tool that can greatly enhance your productivity. With practice, you'll become more comfortable using it for everyday tasks. Keep exploring and experimenting with new commands and tools!</p>
    </footer>
  </main>


</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F5F5F5;
  color: #2D3748;
  display: flex;
}

#navbar {
  font-size: 1.2em;
  width: 250px;
  height: 100vh;
  border-right: 2px solid #CBD5E0;
  background-color: #2D3748;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.nav-link {
  text-decoration: none;
  color: #FFFFFF;
}

#navbar header {
  padding: 20px;
  border-bottom: 2px solid #CBD5E0;
  color: #FFFFFF;
}

#navbar ol {
  padding: 0;
}

#navbar li {
  list-style-type: none;
  padding: 20px;
  border-bottom: 2px solid #CBD5E0;
}

#navbar li:hover {
  background-color: #4A5568;
  cursor: pointer;
}

#navbar ol:first-of-type {
  border-top: 2px solid #CBD5E0;
}

#main-doc {
  flex: 1;
  padding: 20px;
}

.main-section {
  margin-bottom: 40px;
}

.main-section header {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #2D3748;
}

ul li {
  list-style-type: none;
}

code {
  color: #FFFFFF;
  font-size: 1em;
  background-color: #2D3748;
  display: block;
  max-width: 100%;
  padding: 15px;
  margin: 10px 0;
}

.output-explain {
  color: #3182CE;
  font-weight: bold;
}

@media only screen and (max-width: 750px) {
  #navbar {
    display: none;
  }

  #main-doc {
    width: 100%;
    padding: 20px;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Found out the issue was setting my display to none in my media query, fixed it by using:

position: absolute;
 top: -9999px;

It may not be the best but seems like a good option

Hi and welcome to the forum!
your #navbar in the media query is causing the error. Try removing the display property.
Good luck!

Just found out how to fix it actually, and posted a better solution to my situation, thanks for this confirmation!

1 Like

That’s a nice solution. You can also try width:0; to hide the navbar.
Happy coding!

1 Like