Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

  1. 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.
    I can pass because of this, and i’m sure of the codes.

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>Technical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Navbar -->
    <nav id="navbar">
      <header>Technical Documentation</header>
      <a href="#HTML_and_CSS" class="nav-link">HTML and CSS</a>
      <a href="#JavaScript" class="nav-link">JavaScript</a>
      <a href="#APIs" class="nav-link">APIs</a>
      <a href="#React" class="nav-link">React</a>
      <a href="#Node_js" class="nav-link">Node.js</a>
    </nav>

    <!-- Main Documentation -->
    <main id="main-doc">
      <section id="HTML_and_CSS" class="main-section">
        <header>HTML and CSS</header>
        <p>HTML provides the structure of a web page using tags like <code>&lt;div&gt;</code> and <code>&lt;h1&gt;</code>.</p>
        <p>CSS allows you to style a webpage with properties such as colors, fonts, and layouts.</p>
        <code>&lt;p&gt;Hello World&lt;/p&gt;</code>
        <ul>
          <li>HTML is the backbone of web pages.</li>
          <li>CSS adds visual appeal.</li>
        </ul>
      </section>

      <section id="JavaScript" class="main-section">
        <header>JavaScript</header>
        <p>JavaScript is a versatile language used to create interactive web pages.</p>
        <p>It allows developers to modify HTML elements dynamically to improve user experience.</p>
        <code>let message = "Hello";</code>
        <ul>
          <li>Great for interactivity.</li>
          <li>Used in modern frameworks.</li>
        </ul>
      </section>

      <section id="APIs" class="main-section">
        <header>APIs</header>
        <p>APIs allow communication between software components, enabling integration.</p>
        <p>REST APIs are commonly used with HTTP methods like GET and POST.</p>
        <code>fetch('url').then(response => response.json());</code>
        <ul>
          <li>Essential for modern development.</li>
          <li>APIs provide interoperability.</li>
        </ul>
      </section>

      <section id="React" class="main-section">
        <header>React</header>
        <p>React is a JavaScript library for building user interfaces.</p>
        <p>It uses a component-based architecture for better modularity.</p>
        <code>import React from 'react';</code>
        <ul>
          <li>Component-driven design.</li>
          <li>Improved performance via Virtual DOM.</li>
        </ul>
      </section>

      <section id="Node_js" class="main-section">
        <header>Node.js</header>
        <p>Node.js is a runtime environment for executing JavaScript on the server side.</p>
        <p>It uses a non-blocking, event-driven architecture for scalability.</p>
        <code>const http = require('http');</code>
        <ul>
          <li>Great for real-time applications.</li>
          <li>Built on Chrome's V8 engine.</li>
        </ul>
      </section>
    </main>
  </body>
</html>



/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #f4f4f4;
}

/* Navbar Styles */
#navbar {
  width: 250px;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
}

#navbar header {
  font-size: 1.5em;
  margin-bottom: 20px;
  text-align: center;
}

#navbar .nav-link {
  display: block;
  color: #ecf0f1;
  text-decoration: none;
  padding: 10px;
  margin: 5px 0;
}

#navbar .nav-link:hover {
  background-color: #34495e;
  cursor: pointer;
}

/* Main Content Styles */
#main-doc {
  margin-left: 270px;
  padding: 20px;
  width: calc(100% - 270px);
}

.main-section {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.main-section header {
  font-size: 2em;
  margin-bottom: 15px;
  color: #333;
}

.main-section p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #444;
  margin-bottom: 15px;
}

.main-section code {
  display: block;
  background-color: #f1f1f1;
  padding: 10px;
  margin: 10px 0;
  font-family: "Courier New", monospace;
  border-left: 4px solid #2c3e50;
}

.main-section ul {
  list-style-type: disc;
  margin-left: 20px;
}

.main-section li {
  margin: 10px 0;
  font-size: 1.1em;
  color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
  #navbar {
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 20px;
  }

  #main-doc {
    margin-left: 0;
    width: 100%;
  }

  #navbar .nav-link {
    text-align: center;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

You do not need to replace the . in Node.js with an underscore.

1 Like
3

Yup, it worked!
Thanks a lot :white_heart: