Technical Documentation Page - Build a Technical Documentation Page

johnsondan380 · September 11, 2022, 1:12pm

Tell us what’s happening:
Describe your issue in detail here.
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).

I have all the anchors set to their maun target, what am I doing wrong?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en"
<head>
<meta vharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="JavaScript_and_Java">
    <header>JavaScript and Java</header><p></p><code></code>
    <p></p><li></li></section>
    <section class="main-section" id="a">
    <header>a</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="b">
    <header>b</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="c">
    <header>c</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="hello_world">
    <header>hello world</header><p></p>
    <p></p><code></code><li></li></section>
    <nav id="navbar"><header>e</header><a class="nav-link" href="Javascript_and_Java">Javascript and Java</a>
    <a class="nav-link" href="a">a</a>
    <a class="nav-link" href="b">b</a>
    <a class="nav-link" href="c">c</a>
    <a class="nav-link" href="hello_world">hello world</a>
    </nav>
  </main>
  </body>
  </html>

/* file: styles.css */
@media (max-width: 600){}

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14909.132.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

hbar1st · September 11, 2022, 1:20pm

The browser expects a link to look like http://something if you are going to link online somewhere.

But if you are linking inside the same page then add a # symbol to the start of the link.

johnsondan380 · September 11, 2022, 1:22pm

nope, that didn’t work

hbar1st · September 11, 2022, 1:28pm

You may find that things work better on here when you share updated code…

johnsondan380 · September 11, 2022, 1:29pm

Javascript and Java
a
b
c
hello world

hbar1st · September 11, 2022, 1:31pm

Please share the all the lines again (not just a block).

Use the </> code block tool in the editor to make the code formatted for the forum.

johnsondan380 · September 11, 2022, 1:33pm

<

<!DOCTYPE html>
<html lang="en"
<head>
  <meta vharset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header><p></p><code></code>
      <p></p><li></li></section>
      <section class="main-section" id="a">
      <header>a</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="b">
      <header>b</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="c">
      <header>c</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="hello_world">
      <header>hello world</header><p></p>
      <p></p><code></code><li></li></section>
      <nav id="navbar"><header>e</header><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
      <a class="nav-link" href="#a">a</a>
      <a class="nav-link" href="#b">b</a>
      <a class="nav-link" href="#c">c</a>
      <a class="nav-link" href="#hello_world">hello world</a>
      </nav>
    </main>
    </body>
    </html>

hbar1st · September 11, 2022, 1:35pm

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

johnsondan380 · September 11, 2022, 1:38pm

thanks, but im still stuck on the problem

hbar1st · September 11, 2022, 1:40pm

Try fixing these two lines.

The first one is missing the angled bracket >

And the bottom one is misspelling the word charset

johnsondan380 · September 11, 2022, 1:42pm

<!DOCTYPE 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>
    <main id="main-doc">
      <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header><p></p><code></code>
      <p></p><li></li></section>
      <section class="main-section" id="a">
      <header>a</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="b">
      <header>b</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="c">
      <header>c</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="hello_world">
      <header>hello world</header><p></p>
      <p></p><code></code><li></li></section>
      <nav id="navbar"><header>e</header><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
      <a class="nav-link" href="#a">a</a>
      <a class="nav-link" href="#b">b</a>
      <a class="nav-link" href="#c">c</a>
      <a class="nav-link" href="#hello_world">hello world</a>
      </nav>
    </main>
    </body>
    </html>

fixed

johnsondan380 · September 11, 2022, 1:47pm

still stuck though, what else can I do?

hbar1st · September 11, 2022, 1:49pm

Edit the last post you made so that the code shows up properly (I provided some instructions earlier). Otherwise no one except the moderators can see it.

johnsondan380 · September 11, 2022, 1:51pm

I don’t know how to. Ive tried and it doesnt work. so I guess its on to the odin project

johnsondan380 · September 11, 2022, 1:55pm

Tell us what’s happening:
Describe your issue in detail here.
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).

  **Your code so far**

/* file: index.html */
<!DOCTYPE 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>
  <main id="main-doc">
    <section class="main-section" id="JavaScript_and_Java">
    <header>JavaScript and Java</header><p></p><code></code>
    <p></p><li></li></section>
    <section class="main-section" id="a">
    <header>a</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="b">
    <header>b</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="c">
    <header>c</header><p></p>
    <p></p><code></code><li></li></section>
    <section class="main-section" id="hello_world">
    <header>hello world</header><p></p>
    <p></p><code></code><li></li></section>
    <nav id="navbar"><header>e</header><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
    <a class="nav-link" href="#a">a</a>
    <a class="nav-link" href="#b">b</a>
    <a class="nav-link" href="#c">c</a>
    <a class="nav-link" href="#hello_world">hello world</a>
    </nav>
  </main>
  </body>
  </html>

/* file: styles.css */
@media (max-width: 600){}

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14909.132.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

johnsondan380 · September 11, 2022, 1:58pm

you wanted to see my code

hbar1st · September 11, 2022, 2:03pm

Yes, I appreciate that. Please post the code inside a code block as explained in the previous topic. Duplicate topics are either deleted or merged into the original topic.

johnsondan380 · September 11, 2022, 2:09pm

<!DOCTYPE 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>
    <main id="main-doc">
      <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header><p></p><code></code>
      <p></p><li></li></section>
      <section class="main-section" id="a">
      <header>a</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="b">
      <header>b</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="c">
      <header>c</header><p></p>
      <p></p><code></code><li></li></section>
      <section class="main-section" id="hello_world">
      <header>hello world</header><p></p>
      <p></p><code></code><li></li></section>
      <nav id="navbar"><header>e</header><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
      <a class="nav-link" href="#a">a</a>
      <a class="nav-link" href="#b">b</a>
      <a class="nav-link" href="#c">c</a>
      <a class="nav-link" href="#hello_world">hello world</a>
      </nav>
    </main>
    </body>
    </html>

johnsondan380 · September 11, 2022, 2:14pm

what do i do now? im still stuck

hbar1st · September 11, 2022, 2:15pm

Can you try putting all your <li></li> elements inside either an ordered or unordered list element block?
Not sure if that will ultimately help with this problem but it is the only error I still see.