Technical Documentation Page - Build a Technical Documentation Page

help not sure what am not doing right:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav id="navbar">
      <header>
        <h1>Technical Documentation</h1>
      </header>
      <a class="nav-link" href="#introduction">Introduction</a>
      <a class="nav-link" href="#basics">Basics</a>
      <a class="nav-link" href="#advanced">Advanced</a>
      <a class="nav-link" href="#examples">Examples</a>
      <a class="nav-link" href="#references">References</a>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="introduction">
        <header>Introduction</header>
        <p>This is the introduction to the technical documentation.</p>
        <p>It contains information about the purpose and scope of the documentation.</p>
        <p>It also provides an overview of the topics covered in the documentation.</p>
        <code>Some sample code here</code>
        <ul>
          <li>First item in the list</li>
          <li>Second item in the list</li>
          <li>Third item in the list</li>
        </ul>
      </section>
      <section class="main-section" id="basics">
        <header>Basics</header>
        <p>This section covers the basics of the topic.</p>
        <p>It includes information on the terminology, concepts, and techniques involved.</p>
        <p>It also provides examples and exercises to help you practice and reinforce your understanding.</p>
        <code>Some sample code here</code>
        <ul>
          <li>First item in the list</li>
          <li>Second item in the list</li>
          <li>Third item in the list</li>
        </ul>
      </section>
      <section class="main-section" id="advanced">
        <header>Advanced</header>
        <p>This section covers advanced topics and techniques.</p>
        <p>It assumes a solid understanding of the basics, and builds on that foundation.</p>
        <p>It includes in-depth explanations, case studies, and real-world examples.</p>
        <code>Some sample code here</code>
        <ul>
          <li>First item in the list</li>
          <li>Second item in the list</li>
          <li>Third item in the list</li>
        </ul>
      </section>
      <section class="main-section" id="examples">
        <header>Examples</header>
        <p>This section provides practical examples of the concepts and techniques covered.</p>
        <p>It includes step-by-step instructions, screenshots, and downloadable resources.</p>
        <p>It also includes tips and tricks to help you customize and extend the examples.</p>
        <code>Some sample code here</code>
        <ul>
          <li>First item in the list</li>
          <li>Second item in the list</li>
          <li>Third item in the list</li>
        </ul>
      </section>
      <section class="main-section" id="references">
        <header>References</header>
        <p>This section provides a list of resources for further study and exploration.</p>
        <p>

/* file: styles.css */
/* set default font to sans-serif */
body {
  font-family: sans-serif;
}

/* set max width for main content area */
#main-doc {
  max-width: 800px;
  margin: 0 auto;
}

/* style section headers */
.main-section > header {
  background-color: #f2f2f2;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

/* style code blocks */
.main-section code {
  background-color: #f2f2f2;
  padding: 5px;
  font-family: monospace;
}

/* style navigation bar */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background-color: #f2f2f2;
  padding: 10px;
  overflow-y: auto;
}

#navbar header {
  font-weight: bold;
}

.nav-link {
  display: block;
  padding: 5px;
  margin-bottom: 5px;
}

/* media query to adjust layout for smaller screens */
@media (max-width: 600px) {
  #main-doc {
    max-width: 100%;
    margin: 0;
  }
  #navbar {
    position: static;
    width: 100%;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You must have at least five ‘code’ elements. In the code you have less than five of them.

The href for the stylesheet is styles.css.

Check that your href matches, otherwise the css will not apply.

    <link rel="stylesheet" type="text/css" href="style.css">

Also, unless you didn’t copy all the code, you are missing a closing body and html closing tag.

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