Build a Technical Documentation Page

HTML-CSS
1

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

  • Failed: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).

My code so far:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="styles.css">
  <title>Technical Documentation Page</title>
</head>

<body>
<nav id="navbar">
  <header>Introduction to Artificial Intelligence</header>
    <ul>
      <li>
        <a class="nav-link" href="#Technical_Document:_Introduction_to_Artificial_Intelligence">Introduction to AI</a>
      </li>
      <li>
        <a class="nav-link" href="#Types_of_AI">Types of AI</a>
      </li>
      <li>
        <a class="nav-link" href="#AI_Subfields">AI Subfields</a>
      </li>
      <li>
        <a class="nav-link" href="#Ethical_Considerations_in_AI">Ethical Considerations in AI</a>
      </li>
      <li>
        <a class="nav-link" href="#Challenges_and_Future">Challenges and Future</a>
      </li>
      <li>
        <a class="nav-link" href="#Conclusion">Conclusion</a>
        </li>
        <li>
        <a class="nav-link" href="#References">References</a>
        </li>
    </ul>
  </nav>

  <main id="main-doc">
   
      <header>Technical Document: Introduction to Artificial Intelligence</header>
      <article>
        <p>Welcome to the official documentation for HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
          This documentation is designed to be your go to resource for learning and mastering fundamental technologies
          that power the web.</p>
      </article>
      <p>In this section, provide a general overview of AI, its definition, and a brief historical context. Explain the
        differences between narrow AI, general AI, and superintelligent AI.</p>
    </section>

    <section class="main-section" id="Types_of_AI">
      <header>Types of AI</header>
      <article>
        <p>Describe the various types of AI and their characteristics.</p>
        <header>Machine Learning</header>
        <p>Dive deeper into machine learning, explaining its core concepts, types of learning (supervised, unsupervised,
          reinforcement), and practical applications.</p>
        <p>To get started with writing Python, open the Scratchpad and write your first "Hello world" Python code:
          <code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
      </article>
    </section>

    <section class="main-section" id="AI_Subfields">
      <header>AI Subfields</header>
      <p>Provide an overview of the major subfields within AI, including machine learning, natural language processing,
        computer vision, robotics, expert systems, and neural networks.</p>

      <section class="main-section" id="Natural_Language_Processing_(NLP)">
        <header>Natural Language Processing (NLP)</header>
        <p>Discuss the basics of NLP, text preprocessing, and its applications in tasks like sentiment analysis and chatbots.</p>
<code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
        
          <header>Computer Vision</header>
          <p>Explain the fundamentals of computer vision, image processing, and applications such as object detection
            and face recognition.</p>
          <code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
<br>
<br>                     <header>Robotics</header>
            <p>Explore the intersection of AI and robotics, discussing types of robots and their applications in
              different industries.</p>
            <code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
          </section>
          <br>
<header>Expert Systems</header>
            <p>Detail what expert systems are, how they represent knowledge, and provide real-world examples.</p>
            
              <header>Neural Networks</header>
              <p>Explain the basics of neural networks, types (e.g., CNNs, RNNs), training methods, and their role in
                image and speech recognition.</p>
             
                <header>Ethical Considerations in AI</header>
                <p>Discuss the ethical challenges related to AI, including bias, privacy, transparency, and
                  accountability.</p>
                <section class="main-section" id="AI_in_Industry">
                  <header>AI in Industry</header>
                  <p>Highlight AI's impact on various industries, such as healthcare, finance, retail, and autonomous
                    vehicles.</p>
                  <code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
                </section>
<br>
                <section class="main-section" id="Challenges_and_Future_Trends">
                  <header>Challenges and Future Trends</header>
                  <p>Examine the challenges AI faces and explore emerging trends in AI development and applications.</p>
                  <code># This is a simple "Hello, World!" program in Python
print("Hello, World!")
</code>
                </section>
<br>
                <section class="main-section" id="Conclusion">
                  <header>Conclusion</header>
                  <p>Summarize the key takeaways from the document and discuss AI's role in shaping the future.</p>

                   <section class="main-section" id="References">
                  <header>References</header>
                  <p>Summarize the key takeaways from the document and discuss AI's role in shaping the future.</p>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  </section>
                  </main>
                  </body>
3

image
I

I have done this part and it still won’t let me pass.

image
As well as this, and it didn’t work.