Technical Documentation Page - Build a Technical Documentation Page

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:

The issues I can find are:

:point_up_2:t4:

  • This should be a doctype declaration.

  • Also all the navbar links are missing required underscores.

  • I didn’t find any media declaration in the code you posted so you will need one.

1 Like

Here you have to use atleast one media queries
Means @media tag it helps your website to make responsive after adding this tag we can make our
Website more beautiful for any width device such as laptops mobile tablet. As you see laptops has different width and height and phone has different when compared therefore it is impossible to design with one specific width and height so too outcome this problem we use media queries

1 Like

thank you! ! :heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart:

2 Likes

thank you! that worked! :heart: the tests passed

1 Like