Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
I just don’t know whats wrong with my code. i keep changing thing but no matter what I do it just tells me that these three things are wrong

  • You should have at least 10 p elements (total) within your .main-section elements.

  • You should have at least five code elements that are descendants of .main-section elements.

  • You should have at least five li elements that are descendants of .main-section elements.
    Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Technical Documentation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <header>Technical Documentation</header>
    <a class="nav-link" href="#Introduction">Introduction</a>
    <a class="nav-link" href="#HTML_Basics">HTML Basics</a>
    <a class="nav-link" href="#CSS_Basics">CSS Basics</a>
    <a class="nav-link" href="#JavaScript_Basics">JavaScript Basics</a>
    <a class="nav-link" href="#Responsive_Design">Responsive Design</a>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <p>Welcome to the Technical Documentation for Web Development!</p>
      <!-- ... rest of the content ... -->
    </section>
    <section class="main-section" id="HTML_Basics">
      <header>HTML Basics</header>
      <p>HTML (Hypertext Markup Language) is the standard markup language for creating web pages.</p>
      <!-- ... rest of the content ... -->
    </section>
    <section class="main-section" id="CSS_Basics">
      <header>CSS Basics</header>
      <p>CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages.</p>
      <!-- ... rest of the content ... -->
    </section>
    <section class="main-section" id="JavaScript_Basics">
      <header>JavaScript Basics</header>
      <p>JavaScript is a programming language that adds interactivity and dynamic behavior to web pages.</p>
      <!-- ... rest of the content ... -->
    </section>
    <section class="main-section" id="Responsive_Design">
      <header>Responsive Design</header>
      <p>Responsive web design ensures that your web pages look good on all devices, from small mobile screens to large desktop monitors.</p>
      <p>Media queries are used to apply different styles based on the device's characteristics.</p>
      <p>Example of a media query:</p>
      <code>@media (max-width: 768px) { /* Styles for screens up to 768px wide */ }</code>
    </section>
  </main>
</body>
</html>

/* file: styles.css */
/* Global Styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Navbar Styles */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: white;
  padding: 20px;
}

#navbar header {
  font-size: 24px;
  margin-bottom: 20px;
}

.nav-link {
  display: block;
  color: white;
  text-decoration: none;
  margin-bottom: 10px;
}

/* Main Content Styles */
#main-doc {
  margin-left: 220px; /* Adjust the margin to create space for the navbar */
  padding: 40px;
}

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

.main-section header {
  font-size: 20px;
  margin-bottom: 10px;
}

/* Media Query for Smaller Devices */
@media (max-width: 768px) {
  #navbar {
    width: 100%;
    height: auto;
    position: static;
  }

  #main-doc {
    margin-left: 0;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You refused to obey the instructions that’s why your code is not passing.
Firs off, let’s take a look on this :point_down:

But you have only 7 p elements only in total.

Now, coming to this :point_down:

But you have just only 1 out of the 5 that is required.

And finally, :point_down:

But you have 0 out of the 5 that is required.

So, to solve these issues, you need to complete the requirement.
There is a sample project provided for you, look at it and build something similar if not exact of that. That sample project met all the stated requirement.
The link to the sample project is attached to this current project you are working on. You can find it below the objective of the project.

2 Likes

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