Tell us what’s happening:
I´m building a Technical Documentation but I cannot pass these two tests: -If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
-Your Technical Documentation project should use at least one media query.
Your code so far
<!-- file: index.html -->
<!HTML html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>HTML: HyperText Markup Language</header>
<ul>
<li><a class="nav-link" href="#Key resources">Key resources</a></li>
<li><a class="nav-link" href="#HTML basics">HTML basics</a></li>
<li><a class="nav-link" href="#Anatomy of an HTML element">Anatomy of an HTML element</a></li>
<li><a class="nav-link" href="#Nesting elements">Nesting elements</a></li>
<li><a class="nav-link" href="#Hello world">Hello world</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Key_resources">
<header>Key resources</header>
<ul>
<li>HTML Introduction</li>
<p>If you're new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.</p>
<li>HTML tutorials</li>
<p>For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area.</p>
<li>HTML Reference</li>
<p>
In our extensive HTML reference section, you'll find the details about every element and attribute in HTML.</p>
</ul>
</section>
<section class="main-section" id="HTML_basics">
<header>HTML basics</header>
<p>HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.</p>
<p>The enclosing tags can make a word or image hyperlink to somewhere else.For example, take the following line of content:</p>
<code><p>My cat is very grumpy</p></code>
</section>
<section class="main-section" id="Anatomy_of_an_HTML_element">
<header>Anatomy of an HTML element</header>
<p>The main parts of our element are as follows:</p>
<ol>
<li>The opening tag</li>
<li>The closing tag</li>
<li>The content</li>
<li>The elemen</li>
</ol>
<code></code>
<p></p>
</section>
<section class="main-section" id="Nesting_elements">
<header>Nesting elements</header>
<p>You can put elements inside other elements too — this is called nesting. </p>
<code><p>My cat is <strong>very</strong> grumpy.</p></code>
<p></p>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<p>A "Hello, World!" is a simple program that prints Hello, World! on the screen. </p>
<p>Function properties</p>
<p>These global functions—functions which are called globally, rather than on an object—directly return their results to the caller:
<code>eval()</code>
<code>isFinite()</code>
<code>isNaN()</code>
<code>parseFloat()</code>
<code>parseInt()</code>
<code>encodeURI()</code>
<code>encodeURIComponent()</code>
<code>decodeURI()</code>
<code>decodeURIComponent()</code>
</p>
</section>
</main>
</body>
</html>
/* file: styles.css */
body {
font-family: Arial;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
