Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

here are the problems that my test found:

  1. Your #navbar should have exactly one header element within it.

  2. 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”).

  3. 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).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
  <section class="main-section" id="introduction"><header id="introduction">Introduction</header>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <nav id="navbar"><header>Introduction</header><a class="nav-link" href="#introduction">Introduction</a></nav>
  </section>
  <section class="main-section" id="paragraph_2"><header id="paragraph_2">Paragraph 2</header>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <nav id="navbar"><header>Paragraph2</header><a class="nav-link"  href="#pargraph_2">Paragraph2</a></nav>
  </section>
  <section class="main-section" id="Paragraph_3"><header id="Paragraph_3">Paragraph 3</header>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <nav id="navbar"><header>Paragraph 3</header><a class="nav-link" href="#paragraph_3">Paragraph 3</a></nav>
  </section>
  <section class="main-section" id="paragraph_4"><header id="paragraph_4">Paragraph 4</header>
  <p></p>
  <p></p>
  <li></li>
<code></code>
<nav id="navbar"><header>Paragraph 4</header><a class="nav-link" href="#paragraph_4">Paragraph 4</a></nav>
  </section>
  <section class="main-section" id="paragraph_5"><header id="paragraph_5">Paragraph 5</header>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <nav id="navbar"><header>Paragraph 5</header><a class="nav-link" href="#paragraph_5">Paragraph 5</a></nav>
  </section>
  <section class="main-section" id="paragraph_6"><header id="paragraph_6">Paragraph 6</header>
  <p></p>
  <p></p>
  <code></code>
  <li></li>
  <nav id="navbar"><header>Paragraph 6</header><a class="nav-link" href="#paragraph_6">Paragraph 6</a></nav>
  </section>

  </main

/* file: styles.css */
navbar{position: fixed;
  left: 0;
  top: 0;
  width: 150px; /* adjust this value to your desired width */
  height: 100vh; /* make the nav bar take up the full height of the viewport */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;}

  /* Define the media query for screen sizes up to 480px */
@media screen and (max-width: 480px) {
  /* Styles for screen sizes up to 480px go here */
  body {
    background-color: #f2f2f2; /* Change the background color for small screens */
  }
}

/* Define the media query for screen sizes above 480px */
@media screen and (min-width: 481px) {
  /* Styles for screen sizes above 480px go here */
  body {
    background-color: #333; /* Change the background color for large screens */
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:126.0) Gecko/20100101 Firefox/126.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

You should only have one navbar element in the whole page but you have many.

1 Like
6

can you tell me how I am able to share the new code with you?

I have two problems left.

All of your .nav-link elements should be in the #navbar.

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).

7
  1. Delete all Nav element (only keep one)
  2. You have to input the Id; you are trying to link within the <a href> and add a text of that specific header you linked. (e,g “Hello world”)
  3. To make the Nav interactable you have must have an Anchor and a List eg. <li><a href="link-value"></li> element don’t forget to add a class.

I hope this helped
Happy coding.

1 Like
8

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

1 Like
9

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