I’ve seen a lot of people have issues with this. But I’ve really tried to check all of my bases. Hope you can help me, I’ve been stuck for a while.
I’m trying to run my code for the project
Build a Technical Documentation Page.
The only test I’m not passing is:
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”).
I’ve tried to make this a little less overbearing by removing a portion of the sections, but sorry it’s still kinda long.
<html>
<head>
<meta>
<title></title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav id="navbar" class="side-nav">
<header>
<h1>Angular Docs</h1>
</header>
<hr>
<a class="nav-link" href="#Introduction"><span class="link-code"><</span>
Introduction<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#What_you_should_already_know"><span class="link-code"><</span>
What you should already know<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Angular_Overview"><span class="link-code"><</span>
Angular Overview<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Hello_World"><span class="link-code"><</span>
Hello World<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Components"><span class="link-code"><</span>
Components<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Component_Metadata"><span class="link-code"><</span>
Component Metadata<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Template_Syntax"><span class="link-code"><</span>
Template Syntax<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Data_Binding"><span class="link-code"><</span>
Data Binding<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Directives"><span class="link-code"><</span>
Directives<span class="link-code">/></span></a>
<hr>
<a class="nav-link" href="#Conclusion"><span class="link-code"><</span>
Conclusion<span class="link-code">/></span></a>
</nav>
<main id="main-doc">
<h1 id="Angular_Documentation">Angular Documentation</h1>
<hr>
<section id="Introduction" class="section main-section intro-section">
<header>
<h1>Introduction</h1>
</header>
<p>Angular is an open-source, TypeScript-based framework developed and maintained by Google. It's designed
to streamline the process of building dynamic and responsive web applications. Angular embraces the
concept of declarative programming, which means you describe what you want to achieve, and Angular takes
care of the "how."</p>
<h2>Angular Highlights:</h2>
</section>
<hr>
<section id="What_you_should_already_know" class="section main-section -section">
<header>
<h1>What you should already know</h1>
</header>
<p>In this section, we'll provide an understanding of the foundational knowledge we expect our readers to
have before diving into our Angular-based website. We believe that having a certain level of familiarity
with key concepts will enhance your experience and enable you to make the most of our content.</p>
</section>
<hr>
<section id="Angular_Overview" class="section main-section">
<header>
<h1>Angular Overview</h1>
</header>
<p>Welcome to the "Angular Overview" section, where we'll provide you with a high-level understanding of the
Angular framework and its core concepts. As you delve into our website, you'll discover how Angular
empowers developers to create dynamic, responsive, and feature-rich web applications.</p>
<h2>Key Concepts</h2>
</section>
<hr>
<section id="Hello_World" class="section main-section ">
<header>
<h1>Hello World</h1>
</header>
<p>This classic introductory example will help you become familiar with the basics of setting up an Angular
project, creating a component, and displaying content in the browser.</p>
<h3>Creating Your First Angular Project</h3>
</section>
<hr>
<section id="Components" class="section main-section -section">
<header>
<h1>Components</h1>
</header>
<p>Components are the fundamental building blocks of Angular applications, allowing you to create modular,
reusable, and encapsulated pieces of user interface and functionality.</p>
<h3>Creating Components</h3>
</section>
<hr>
<section id="Component_Metadata" class="section main-section -section">
<header>
<h1>Component Metadata</h1>
</header>
<p>Welcome to the "Component Metadata" section, where we'll delve into the metadata decorators that play a
crucial role in configuring Angular components. Metadata decorators provide information about a
component and guide Angular on how to process and render it.</p>
<h3>The <b><i>@Component</i></b> Decorator</h3>
</section>
<hr>
<section id="Template_Syntax" class="section main-section -section">
<header>
<h1>Template Syntax</h1>
</header>
<p>Welcome to the "Template Syntax" section, where we'll delve into Angular's powerful template syntax.
Templates are an integral part of Angular components, allowing you to define how your components' views
should be rendered. Angular's template syntax empowers you to create dynamic and interactive user
interfaces.</p>
</section>
<hr>
<section id="Data_Binding" class="section main-section -section">
<header>
<h1>Data Binding</h1>
</header>
<p>Welcome to the "Data Binding" section, where we'll explore the various ways to establish a connection
between your component's data and your template. Data binding in Angular enables you to keep your user
interface in sync with your application's data, creating dynamic and responsive user experiences.</p>
<h3>One-Way Data Binding</h3>
</section>
<hr>
<section id="Directives" class="section main-section -section">
<header>
<h1>Directives</h1>
</header>
<p>Directives are a fundamental part of Angular's template syntax, enabling you to extend HTML elements with
new behavior or manipulate their appearance.</p>
<h3>Built-in Directives</h3>
</section>
<hr>
<section id="Conclusion" class="section main-section ">
<header>
<h1>Conclusion</h1>
</header>
<p>Congrats! You've journeyed through the key concepts of Angular, a powerful framework that empowers
developers to build dynamic and robust web applications. From understanding the basics of components and
data binding to exploring directives and template syntax, you've gained insights into the foundational
elements that make Angular a preferred choice for modern web development.</p>
<h3>Next Steps</h3>
</section>
</main>
<script src="control.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
X Failing Test:
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”).
I want to make a list of criteria to check off for this test to ensure I fix this. Please help/ tell me if I’m missing something.
- Must have same exact
idas theh1elements inner content. - Must have same number of
.nav-linkelements as<section>s. - …
Any help is appreciated!
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: