I have check marks on all of this code except for: " 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)."
Am I missing something? I’ll accept a hint and not a blatant answer I understand this is beneficial to learning.
My Code:
<html lang="en"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
<nav id="navbar">
<header>navbar</header>
<a class="nav-link" href="i">i</a>
<a class="nav-link" href="am">am</a>
<a class="nav-link" href="getting">getting</a>
<a class="nav-link" href="better">better</a>
<a class="nav-link" href="at">at</a>
<a class="nav-link" href="coding">coding</a>
</nav>
<section id="i" class="main-section">
<header>i</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
<main id="main-doc">
<section id="am" class="main-section">
<header>am</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
<main id="main-doc">
<section id="getting" class="main-section">
<header>getting</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
<main id="main-doc">
<section id="better" class="main-section">
<header>better</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
<main id="main-doc">
<section id="at" class="main-section">
<header>at</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
<main id="main-doc">
<section id="coding" class="main-section">
<header>coding</header>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<code>1</code>
<code>2</code>
<code>3</code>
<code>4</code>
<code>5</code>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</section>
</main>```
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36</code>
**Challenge:** Technical Documentation Page - Build a Technical Documentation Page
**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page