Struggling with these two parts

vgo_bison · July 9, 2022, 10:26pm

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). and
Your Technical Documentation project should use at least one media query.

  **Your code so far**

/* file: index.html */
<!doctype html>
<html lang="en">
<head>
<title>Technical Document</title>
<link rel="stylesheet" href="styles.css">
<style>
  #navbar {
    float: left;
  }
  @media screen and (min-width: 460px) {
    #navbar {
      position: relative;
    }
  }
</style>
</head>
<body>
<main id="main-doc">
  <section class="main-section" id="Technial_Documentation_page">
      <header id="header">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
      <nav id="navbar">
        <header>HotKeys</header>
          <a class="nav-link" href="HotKeys">Technial Documentation page</a>
          <a class="nav-link" href="HotKeys">Technial Documentation page</a>
          <a class="nav-link" href="HotKeys">Technial Documentation page</a>
          <a class="nav-link" href="HotKeys">Technial Documentation page</a>
          <a class="nav-link" href="HotKeys">Technial Documentation page</a>
      </nav>
  </section>
  <section class="main-section" id="Technial_Documentation_page">
      <header id="header">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page">
      <header id="header">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page">
      <header id="header">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page">
      <header id="header">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
</main>
</body>
</html>

/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

nhcarrigan · July 9, 2022, 10:37pm

You have multiple elements with the Technical_Documentation_page ID.

Remember that id attributes need to be unique - you should only have one element with a given id.

inspire.elevate.us · July 9, 2022, 10:37pm

Hello vgo_bison,

The first thing that sticks out is how visually neat your code blocks are. Secondly, I am looking at the href names for your page jumps for the links.
This will not work. They all must have unique names that will discover that unique section of the page titled areas.

In addition, your media query does not need the extra text between @media and the (“and your arguments here”). Or that is what I’m used to seeing unless your lesson has asked you to do otherwise.

I hope this will help assist you further.

inspire.elevate.us · July 9, 2022, 10:52pm

Okay,

Let’s try this again my fellow Code-Mate!

Within your code in the nav element you should do as ‘nhcarrigan’ and I suggested. Unique names are needed. The computer will do as you order it. It will go to that spot, but you have it named for every section. So once it finds that section at the top of your page, the computer will not look for it elsewhere.

When you find a unique name remember to give your href this exact name but place a ‘#’ in front of the text.

Secondly, your visible text should be the same as the href but Capitalized appropriate letters with no ‘#’ for your link titles that show on your page.

Lastly, your section id attribute should reflect the same name and naming format as your href but you do not need your ‘#’.

This should create a digital phone-line to your navigation links and the sections on your page.

I hope that this helps guide you better. But first, I would get up and take a 5 minute break before hand. Sometimes I need to step away then come back to it.

vgo_bison · July 9, 2022, 11:03pm

That is due to a check needing them to be the same.

vgo_bison · July 9, 2022, 11:03pm

Sorry where would i need to look
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).

vgo_bison · July 9, 2022, 11:04pm

Is the href supposed to be unique with the code tag, p tag elements??

inspire.elevate.us · July 10, 2022, 2:20am

I’m sorry it’s late. I was in my lessons.

Okay how about this:

<a class="nav-link" href="#this_is_bananas">This Is Bananas</a>

Here is where you see your href with the ‘#’ and the ‘_’ special characters required in your lesson.

Now once you travel down to your titled section element the href format should match the id attribute but without your ‘#’:

<section class="main-section" id="this_is_bananas"></section>

Bison,

You have similarities here. However, your next .nav-link should be named something different. I know you will pull through this. Sleep well. Oh, remember the Technical Page Exam wants you to use more than one word titles to force you to place ‘_’ within your hrefs. So be mindful.

vgo_bison · July 10, 2022, 6:46pm

Tell us what’s happening:
Describe your issue in detail here.

Failed:Your Technical Documentation project should use at least one media query.*

Failed: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)

Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s

The last one is due to having another id inside. I am not getting the media query to work. I also cannot figure out what the href and the id is supposed to be since I know they should be unique but there is a step to make them all the same so i cannot change the text in the id or after in the nav-link
Your code so far

/* file: index.html */
<!doctype html>
<html lang="en">
<head>
<title>Technical Document</title>
<link rel="stylesheet" href="styles.css">
<style>
  #navbar {
    float: left;
  }
  @media (min-width: 460px) {
    body {
      color: red;
    }
  }
</style>
</head>
<body>
<main id="main-doc">
  <section class="main-section" id="Technial_Documentation_page tech_tips">
      <header id="header1">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
      <nav id="navbar">
        <header>HotKeys</header>
          <a class="nav-link" href="#tech_tips">Technial Documentation page</a>
          <a class="nav-link" href="#tech_two_points">Technial Documentation pages</a>
          <a class="nav-link" href="#tech_three_characters">Technial Documentation pagess</a>
          <a class="nav-link" href="#tech_four_letters">Technial Documentation pagesss</a>
          <a class="nav-link" href="#tech_five_words">Technial Documentation pagses</a>
      </nav>
  </section>
  <section class="main-section" id="Technial_Documentation_page tech_two_points">
      <header id="header2">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page tech-three_characters">
      <header id="header3">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page tech_four_letters">
      <header id="header4">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
  <section class="main-section" id="Technial_Documentation_page tech_five_words">
      <header id="header5">Technial Documentation page</header>
      <p>Hello</p>
      <p>Hello</p>
      <li>Tech</li>
      <code>Document</code>
  </section>
</main>
</body>
</html>

/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

bbsmooth · July 10, 2022, 6:53pm

This is the first test you are not passing:

“Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s”

Let’s look at your first main-section:

<section class="main-section" id="Technial_Documentation_page tech_tips">
  <header id="header1">Technial Documentation page</header>

Does the id for that section match what the test is asking for? The text of the first child, which is the header, is “Technial Documentation page”. So based on this, what should the id of the section be in order to pass the test?

Just to let you know, you are actually pretty close on this one, you just added a little too much to the id. But you did the same thing for all the other sections as well. Each header in a section should have different text in it. They should not all say “Technial Documentation page”. Then your section ids will be unique.

vgo_bison · July 10, 2022, 7:32pm

Thank you I got all fixed but the media query do you know why?

bbsmooth · July 10, 2022, 7:48pm

I think the test requires that the media query be in the styles.css editor.

vgo_bison · July 10, 2022, 8:01pm

yes thank you so much

system · January 9, 2023, 8:01am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.