Navbar -Build a Technical Documentation Page

I am failing these tests and I don’t understand why:

  1. None of your header elements should be empty.
  2. 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.
  3. 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”).
<!DOCTYPE html>
<html>

  <!-- head element-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Abridged Rust Programming Language Documentation" />
    <title>Quick Reference - Rust Documentation</title>
    <link rel="stylesheet" href="./styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    
  </head>


  <body>
  <!-- main element-->
  <main id="main-doc">

      <!-- nav elements-->
      <div>
      <nav class="contents" id="navbar">
        <div class="logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rust_programming_language_black_logo.svg/2048px-Rust_programming_language_black_logo.svg.png"/>
          <header>Rust Documentation</header>
        </div>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#Getting_Started">Getting Started</a></li>
          <li><a class="nav-link" href="#Basic_Concepts">Basic Concepts</a></li>
          <li><a class="nav-link" href="#Control_Flow">Control Flow</a></li>
          <li><a class="nav-link" href="#Ownership">Ownership</a></li>
          <li><a class="nav-link" href="#Structs">Structs</a></li>
          <li><a class="nav-link" href="#Enums_and_Pattern_Matching">Enums and Pattern Matching</a></li>
          <li><a class="nav-link" href="#Error_Handling">Error Handling</a></li>
          <li><a class="nav-link" href="#Conclusion">Conclusion</a></li>
        </ul>
      </nav>
      </div>

      <!-- section elements-->
      <div class="sec">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p>Rust is a systems programming language that emphasizes safety, performance, and concurrency. Created by Graydon Hoare at Mozilla Research, Rust aims to overcome common pitfalls in system-level programming by enforcing strict memory safety rules. It is syntactically similar to C++, yet it introduces modern features that facilitate the development of reliable and efficient software.</p>
      </section>


      <section class="main-section" id="Getting_Started">
        <header>Getting Started</header>
        <p>To begin using Rust, you need to install the Rust toolchain, which includes the Rust compiler (rustc), Cargo (Rust's package manager and build system), and other associated tools. The recommended way to install Rust is through rustup, a command-line utility for managing Rust versions.</p>
        <h3>Installation</h3>
        <p>To install Rust using rustup, execute the following command in your terminal:</p>
<pre><code>  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
        <p>After the installation, verify it by checking the Rust version:</p>
<pre><code>  rustc --version</code></pre>
      </section>


      <section class="main-section" id="Basic_Concepts">
        <header>Basic Concepts</header>
        <p>Rust introduces several core concepts that are crucial to understanding its design philosophy. These include ownership, borrowing, and lifetimes, which are central to Rust's memory safety guarantees.</p>
        <h3>Variables and Mutability</h3>
        <p>Variables in Rust are immutable by default. To declare a mutable variable, use the mut keyword.</p>
<pre><code>  let mut x = 5;</code></pre>
        <h3>Data Types</h3>
<p>Rust is statically typed, ensuring that the type of each variable is known at compile time. Common data types include:</p>
        <ul>
          <li>Integers (i32, u32, etc.)</li>
          <li>Floating-point numbers (f32, f64)</li>
          <li>Booleans (bool)</li>
          <li>Characters (char)</li>
        </ul>
      </section>


      <section class="main-section" id="Control_Flow">
        <header>Control Flow</header>
        <p>Control flow in Rust is managed through conditionals, loops, and pattern matching. These constructs enable the creation of complex and dynamic program behavior.</p>
        <h3>Conditionals</h3>
        <p>If statements are used for conditional execution. Else if and else provide additional branches.</p>
<pre><code>  if number % 4 == 0 {
      println!("number is divisible by 4");
  } else if number % 3 == 0 {
      println!("number is divisible by 3");
  } else {
      println!("number is not divisible by 4 or 3");
  } </code>
</pre>
        <h3>Loops</h3>
        <p>Rust supports several types of loops:</p>
        <ul>
          <li>Infinite loops using loop</li>
          <li>Conditional loops using while</li>
          <li>Iterative loops using for</li>
        </ul>
<pre><code>  for element in a.iter() {
    println!("the value is: {}", element);
  }</code>
</pre>
      </section>


      <section class="main-section" id="Ownership">
        <header>Ownership</header>
        <p>Ownership is a unique feature of Rust, ensuring memory safety without a garbage collector. The rules of ownership are:</p>
        <ul>
          <li>Each value has a single owner.</li>
          <li>Ownership can be transferred.</li>
          <li>When the owner goes out of scope, the value is dropped.</li>
        </ul>
        <h3>Borrowing</h3>
        <p>Borrowing allows multiple parts of a program to access a value without transferring ownership. Borrowing is achieved using references.</p>
<pre><code>  let s1 = String::from("hello");
  let len = calculate_length(&s1);
</code></pre>
      </section>


      <section class="main-section" id="Structs">
        <header>Structs</header>
        <p>Structs are custom data types that group related values. They are used to create more complex data structures. A struct can be defined with named fields and instantiated by specifying values for each field.</p>
<pre><code>  struct User {
      username: String,
      email: String,
      sign_in_count: u64,
      active: bool,
  }

  let user1 = User {
      email: String::from("someone@example.com"),
      username: String::from("someusername123"),
      active: true,
      sign_in_count: 1,
  };</code>
</pre>
      </section>


      <section class="main-section" id="Enums_and_Pattern_Matching">
        <header>Enums and Pattern Matching</header>
        <p>Enums allow the creation of types that can be one of several variants. Pattern matching is used to handle these variants effectively. An enum can be defined with multiple variants. Match statements are used to handle each variant.
        </p>
<pre><code>  enum Message {
      Quit,
      Move { x: i32, y: i32 },
      Write(String),
      ChangeColor(i32, i32, i32),
  }

  match msg {
      Message::Quit => println!("Quit"),
      Message::Move { x, y } => println!("Move to ({}, {})", x, y),
      Message::Write(text) => println!("Text: {}", text),
      Message::ChangeColor(r, g, b) => println!("Color: ({}, {}, {})", r, g, b),
  }
</code></pre>
      </section>


      <section class="main-section" id="Error_Handling">
        <header>Error Handling</header>
        <p>Rust handles errors using the Result and Option enums, providing robust mechanisms for dealing with recoverable and unrecoverable errors.</p>
        <h3>Recoverable Errors with Result</h3>
        <p>Result<T, E> is used for operations that can fail. It has two variants: Ok for success and Err for error.</p>
<pre><code>  let f = File::open("hello.txt");

  match f {
      Ok(file) => file,
      Err(error) => panic!("Problem opening the file: {:?}", error),
  }
</code></pre>
        <h3>Unrecoverable Errors with Result</h3>
        <p>The macro panic! is used for unrecoverable errors.
Causes the program to terminate and display an error message.</p>
<pre><code>  panic!("crash and burn");
</code></pre>
      </section>


      <section class="main-section" id="Conclusion">
        <header>Conclusion</header>
        <p>Rust offers a unique combination of performance, safety, and concurrency. Understanding its core concepts like ownership, borrowing, and lifetimes is essential for writing efficient and reliable Rust code. With its growing ecosystem and active community, Rust is becoming an increasingly popular choice for systems programming and beyond.</p>
      </section>

    <footer>
          <a href="https://social.rust-lang.org/@rust">
            <i class="fab fa-mastodon"></i>
          </a>
          <a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA">
            <i class="fab fa-youtube"></i>
          </a>
          <a href="https://discord.com/invite/rust-lang">
            <i class="fab fa-discord"></i>
          </a>
          <a href="https://github.com/rust-lang">
            <i class="fab fa-github"></i>
          </a>
      <a href="https://www.rust-lang.org/learn"><i class="fas fa-globe"></i></a>
    </footer>
    </div>
  </main>

  </body>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

use html entitites like &lt; and &gt; instead of using the angular brackets directly, it interact badly with the html


Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

Hi! I’ve tried to reset it multiple times, and even did a forced reload, but unfortunately it doesn’t seem to work:( I’m currently on Safari and I tried to use chrome and incognito but it doesn’t work there either… I don’t have any extensions either. I’m not sure on what to do… Please help me pass this from my FCC account. Thank you!

Edit: I tried to run the tests with only my html code and all the tests except the media query one seem to pass. They’re failing when I add in my CSS. Is there something in my styles.css file that’s causing these tests to fail?

Posting my code here so I don’t lose it…

<!DOCTYPE html>
<html>

  <!-- head element-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Abridged Rust Programming Language Documentation" />
    <title>Quick Reference - Rust Documentation</title>
    <link rel="stylesheet" href="./styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    
  </head>


  <body>
  <!-- main element-->
  <main id="main-doc">

      <!-- nav elements-->
      <div>
      <nav class="contents" id="navbar">
        <div class="logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rust_programming_language_black_logo.svg/2048px-Rust_programming_language_black_logo.svg.png"/>
          <header>Rust Documentation</header>
        </div>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#Getting_Started">Getting Started</a></li>
          <li><a class="nav-link" href="#Basic_Concepts">Basic Concepts</a></li>
          <li><a class="nav-link" href="#Control_Flow">Control Flow</a></li>
          <li><a class="nav-link" href="#Ownership">Ownership</a></li>
          <li><a class="nav-link" href="#Structs">Structs</a></li>
          <li><a class="nav-link" href="#Enums_and_Pattern_Matching">Enums and Pattern Matching</a></li>
          <li><a class="nav-link" href="#Error_Handling">Error Handling</a></li>
          <li><a class="nav-link" href="#Conclusion">Conclusion</a></li>
        </ul>
      </nav>
      </div>

      <!-- section elements-->
      <div class="sec">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p>Rust is a systems programming language that emphasizes safety, performance, and concurrency. Created by Graydon Hoare at Mozilla Research, Rust aims to overcome common pitfalls in system-level programming by enforcing strict memory safety rules. It is syntactically similar to C++, yet it introduces modern features that facilitate the development of reliable and efficient software.</p>
      </section>


      <section class="main-section" id="Getting_Started">
        <header>Getting Started</header>
        <p>To begin using Rust, you need to install the Rust toolchain, which includes the Rust compiler (rustc), Cargo (Rust's package manager and build system), and other associated tools. The recommended way to install Rust is through rustup, a command-line utility for managing Rust versions.</p>
        <h3>Installation</h3>
        <p>To install Rust using rustup, execute the following command in your terminal:</p>
<pre><code>  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
        <p>After the installation, verify it by checking the Rust version:</p>
<pre><code>  rustc --version</code></pre>
      </section>


      <section class="main-section" id="Basic_Concepts">
        <header>Basic Concepts</header>
        <p>Rust introduces several core concepts that are crucial to understanding its design philosophy. These include ownership, borrowing, and lifetimes, which are central to Rust's memory safety guarantees.</p>
        <h3>Variables and Mutability</h3>
        <p>Variables in Rust are immutable by default. To declare a mutable variable, use the mut keyword.</p>
<pre><code>  let mut x = 5;</code></pre>
        <h3>Data Types</h3>
<p>Rust is statically typed, ensuring that the type of each variable is known at compile time. Common data types include:</p>
        <ul>
          <li>Integers (i32, u32, etc.)</li>
          <li>Floating-point numbers (f32, f64)</li>
          <li>Booleans (bool)</li>
          <li>Characters (char)</li>
        </ul>
      </section>


      <section class="main-section" id="Control_Flow">
        <header>Control Flow</header>
        <p>Control flow in Rust is managed through conditionals, loops, and pattern matching. These constructs enable the creation of complex and dynamic program behavior.</p>
        <h3>Conditionals</h3>
        <p>If statements are used for conditional execution. Else if and else provide additional branches.</p>
<pre><code>  if number % 4 == 0 {
      println!("number is divisible by 4");
  } else if number % 3 == 0 {
      println!("number is divisible by 3");
  } else {
      println!("number is not divisible by 4 or 3");
  } </code>
</pre>
        <h3>Loops</h3>
        <p>Rust supports several types of loops:</p>
        <ul>
          <li>Infinite loops using loop</li>
          <li>Conditional loops using while</li>
          <li>Iterative loops using for</li>
        </ul>
<pre><code>  for element in a.iter() {
    println!("the value is: {}", element);
  }</code>
</pre>
      </section>


      <section class="main-section" id="Ownership">
        <header>Ownership</header>
        <p>Ownership is a unique feature of Rust, ensuring memory safety without a garbage collector. The rules of ownership are:</p>
        <ul>
          <li>Each value has a single owner.</li>
          <li>Ownership can be transferred.</li>
          <li>When the owner goes out of scope, the value is dropped.</li>
        </ul>
        <li><h3>Borrowing</h3></li>
        <li><p>Borrowing allows multiple parts of a program to access a value without transferring ownership. Borrowing is achieved using references.</p></li>
<pre><code>  let s1 = String::from("hello");
  let len = calculate_length(&s1);
</code></pre>
      </section>


      <section class="main-section" id="Structs">
        <header>Structs</header>
        <p>Structs are custom data types that group related values. They are used to create more complex data structures. A struct can be defined with named fields and instantiated by specifying values for each field.</p>
<pre><code>  struct User {
      username: String,
      email: String,
      sign_in_count: u64,
      active: bool,
  }

  let user1 = User {
      email: String::from("someone@example.com"),
      username: String::from("someusername123"),
      active: true,
      sign_in_count: 1,
  };</code>
</pre>
      </section>


      <section class="main-section" id="Enums_and_Pattern_Matching">
        <header>Enums and Pattern Matching</header>
        <p>Enums allow the creation of types that can be one of several variants. Pattern matching is used to handle these variants effectively. An enum can be defined with multiple variants. Match statements are used to handle each variant.
        </p>
<pre><code>  enum Message {
      Quit,
      Move { x: i32, y: i32 },
      Write(String),
      ChangeColor(i32, i32, i32),
  }

  match msg {
      Message::Quit => println!("Quit"),
      Message::Move { x, y } => println!("Move to ({}, {})", x, y),
      Message::Write(text) => println!("Text: {}", text),
      Message::ChangeColor(r, g, b) => println!("Color: ({}, {}, {})", r, g, b),
  }
</code></pre>
      </section>


      <section class="main-section" id="Error_Handling">
        <header>Error Handling</header>
        <p>Rust handles errors using the Result and Option enums, providing robust mechanisms for dealing with recoverable and unrecoverable errors.</p>
        <h3>Recoverable Errors with Result</h3>
        <p>Result&lt;T, E&gt; is used for operations that can fail. It has two variants: Ok for success and Err for error.</p>
<pre><code>  let f = File::open("hello.txt");

  match f {
      Ok(file) => file,
      Err(error) => panic!("Problem opening the file: {:?}", error),
  }
</code></pre>
        <h3>Unrecoverable Errors with Result</h3>
        <p>The macro panic! is used for unrecoverable errors.
Causes the program to terminate and display an error message.</p>
<pre><code>  panic!("crash and burn");
</code></pre>
      </section>


      <section class="main-section" id="Conclusion">
        <header>Conclusion</header>
        <p>Rust offers a unique combination of performance, safety, and concurrency. Understanding its core concepts like ownership, borrowing, and lifetimes is essential for writing efficient and reliable Rust code. With its growing ecosystem and active community, Rust is becoming an increasingly popular choice for systems programming and beyond.</p>
      </section>

    <footer>
          <a href="https://social.rust-lang.org/@rust">
            <i class="fab fa-mastodon"></i>
          </a>
          <a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA">
            <i class="fab fa-youtube"></i>
          </a>
          <a href="https://discord.com/invite/rust-lang">
            <i class="fab fa-discord"></i>
          </a>
          <a href="https://github.com/rust-lang">
            <i class="fab fa-github"></i>
          </a>
      <a href="https://www.rust-lang.org/learn"><i class="fas fa-globe"></i></a>
    </footer>
    </div>
  </main>
  </body>
  
</html>
/* Initial Setup */

* {
 background-color: #ECECE9;
 margin: 0px;
 padding: 0px;
 font-family: 'Open Sans', Arial, sans-serif;
 color: #404040;
 box-sizing: border-box;
}

/* Logo and Heading */

 img {
   height: 75px;
   width: 75px;
   background-color: #d8d8d8;
 }

 nav header {
   font-family: "Alfa Slab One", sans-serif;
   font-size: 22px;
   width: 40%;
   padding-left: 5%;
   text-align: left;
   background-color: #d8d8d8;
   color: black;
 }

 .logo {
   display: flex;
   align-items: center;
   background-color: #d8d8d8;
 }


/* Navigation Bar */

nav {
  position: fixed;
  width: 300px;
  padding-top: 1%;
  padding-left: 1%;
  height: 100%;
  background-color: #d8d8d8;
  border-right: 7px solid #d8d8d8;
}

nav a, nav li {
  color: black;
  background-color: #d8d8d8;
  font-size: 18px;
  padding-left: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
}

nav li {
  border-top: 1px solid black;
}

nav li:nth-of-type(9) {
  border-bottom: 1px solid black;
}

nav li:nth-of-type(1) {
  margin-top: 10px;
}

a:active, a:visited, a:hover {
  color: #404040;
}


/* Text and Code Styling */

.sec {
  margin-left: 320px;
  margin-right: 2%;
  overflow-x: auto; 
  overflow-wrap: break-word;
}

pre {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #444444; 
  background-color: #444444;
  border-radius: 4px;
  overflow: auto; 
  max-height: 150px;
}

code {
  font-size: 16px;
  font-family: monospace;
  background-color: #444444;
  color: #d8d8d8;
}

p {
  font-size: 18px;
}

h3 {
  padding: 15px 0;
  color: #333333;
  font-style: italic;
}

section header {
  color: black;
  font-size: 30px;
  font-weight: bold;
  padding: 20px 0;
}

ul {
  margin: 10px;
  font-size: 18px;
  font-style: italic;
}

li {
  list-style-type: none;
}


/* Footer Styling */

footer {
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

footer i {
  padding: 10px;
}


/* Media - temporary */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

@media only screen and (max-width: 700px) {
  code {
    font-size: 12px;
  }

  section header {
    font-size: 25px;
  }

  p {
    font-size: 14px;
  }
}

The latest code which you posted passes for me. Are you still having trouble?

Yes. Please check the edit I made to the previous post. Thanks!

I’m not sure what’s going wrong, as all tests pass for me when I paste in your code. If you have no browser extensions enabled and your HTML code is passing on its own, I have no idea why your CSS code would be causing trouble.

Passed now! I didn’t change anything, except for the fact that I ran it on Chrome again. It’s weird because something similar happened to me earlier. When I worked on the first project, I was failing two tests and couldn’t figure out why. I had shut my laptop and returned to it after a couple of hours and ran the same code, which worked. I was hoping that would happen again but I had been working on this for three days now so I decided to make this post. Maybe it’s a Safari issue. I’ll work on Chrome from now! Thanks!

1 Like

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