Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Need help with my code.
I looked up the problems that are still wrong. I also passed my code through a validator and I. can’t seem to find the problems.
thanksss

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS</title>
  <!--- Head HTML goes here -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">


  <!--- Link to styles in CSS tab -->
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>

  <main id="main-doc">
    <section class="main-section" id="CSS_Help_Script">
     <header>CSS Help Script</header>
      <nav id="navbar">
        <header>CSS Help Script</header>
      <a class="nav-link" href="#CSS_Help_Script">CSS Help Script</a></nav>
        <p>This script will help you understand CSS selectors</p>
        <p>They are used to select different HTML elements</p>
        <code>You will find them below</code>
      </section>

      <section class="main-section" id="CSS_Selectors">
        <header>CSS Selectors</header>
        <a class="nav-link" href="#CSS_Selectors">CSS Selectors</a>
          <p>CSS selectors are used to find/ select html elements</p>
          <p>Here you'll find four selector types</p>
          <code>look here</code>
          </section>
          <section class="main-section" id="Definition_and_Usage">
           <header>Definition and Usage</header>
            <a class="nav-link" href="#Definition_and_Usage">Definition and Usage.
            </a>
             <code>look here</code>
                  <ul>
                    <li class="selector">*</li>
                  </ul>
      </section>
      <section class="main-section" id="CSS_Simple_Selectors" >
        <header>CSS Simple Selectors</header>
        <a class="nav-link" href="#CSS_Simple_Selectors">CSS Simple Selectors</a>
     
          <p>The simple selectors select elements based on element-name, id, and class.</p>
          <p>Try it out</p>
          <code>look here</code>
                  <ul>
                    <li  class="selector">.class</li>
                    <li  class="selector">element</li>
                    <li  class="selector">#id</li>
                  </ul>
      </section>
      <section class="main-section" id="CSS_Attribute_Selectors">
        <header>CSS Attribute Selectors</header>
        <a class="nav-link" href="#CSS_Attribute_Selectors">CSS Attribute Selectors</a>
          <p>The attribute selector selects HTML elements with a given attribute set.</p>
          <p>Try it out</p>
           <code>look here</code>
                  <ul>
                    <li  class="selector">attribute=value</li>
                    <li  class="selector">attribute$=value</li>
                    <li  class="selector">attribute~=value</li>
                  </ul>
               
      </section>
      <section class="main-section" id="CSS_Nesting_Selector">
          <header>CSS Nesting Selectors</header>
        <a class="nav-link" href="#CSS_Nesting_Selectors">CSS Nesting Selectors</a>
          <p>There is only one nesting selector</p>
          <p>Try it out</p>
           <code>look here</code>
          <ul>
            <li class="selector">&</li>
           </ul>
      </section>
    </nav>
  </main>
 </body>
</html>

/* file: styles.css */
@media screen and (max-width:750px){
  width:50%
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

this is wrong CSS, you need to put a selector inside the media query, the rules go inside selectors, always

for test 19, double check DEFINITION AND USAGE

3

more important, the a elements should go in the navbar, all the code should not be in the navbar

4

Tell us what’s happening:

Hello , now i have a problem with nav-link, this is the problem i have can’t pass the test.
I already put the same name , i dont know why still have the problem.
thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS</title>
  <!--- Head HTML goes here -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">


  <!--- Link to styles in CSS tab -->
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>

  <main id="main-doc">
    <section class="main-section" id="CSS_Help_Script">
     <header>CSS Help Script</header>
      <nav id="navbar">
        <header>CSS Help Script</header>
      <a class="nav-link" href="#CSS_Help_Script">CSS Help Script</a>
      <a class="nav-link" href="#CSS_Selectors">CSS Selectors</a>
      <a class="nav-link" href="#Definition_and_Usage">Definition and Usage.</a>
      <a class="nav-link" href="#CSS_Simple_Selectors">CSS Simple Selectors</a>
      <a class="nav-link" href="#CSS_Attribute_Selectors">CSS Attribute Selectors</a>
        <a class="nav-link" href="#CSS_Nesting_Selectors">CSS Nesting Selectors</a>
      </nav>
        <p>This script will help you understand CSS selectors</p>
        <p>They are used to select different HTML elements</p>
        <code>You will find them below</code>
      </section>
      <section class="main-section" id="CSS_Selectors">
        <header>CSS Selectors</header>
      
          <p>CSS selectors are used to find/ select html elements</p>
          <p>Here you'll find four selector types</p>
          <code>look here</code>
          </section>
          <section class="main-section" id="Definition_and_Usage">
           <header>Definition and Usage</header>
          
             <code>look here</code>
                  <ul>
                    <li class="selector">*</li>
                  </ul>
      </section>
      <section class="main-section" id="CSS_Simple_Selectors" >
        <header>CSS Simple Selectors</header>
        <p>The simple selectors select elements based on element-name, id, and class.</p>
          <p>Try it out</p>
          <code>look here</code>
                  <ul>
                    <li  class="selector">.class</li>
                    <li  class="selector">element</li>
                    <li  class="selector">#id</li>
                  </ul>
      </section>
      <section class="main-section" id="CSS_Attribute_Selectors">
        <header>CSS Attribute Selectors</header>
        
          <p>The attribute selector selects HTML elements with a given attribute set.</p>
          <p>Try it out</p>
           <code>look here</code>
                  <ul>
                    <li  class="selector">attribute=value</li>
                    <li  class="selector">attribute$=value</li>
                    <li  class="selector">attribute~=value</li>
                  </ul>
               
      </section>
      <section class="main-section" id="CSS_Nesting_Selectors">
          <header>CSS Nesting Selectors</header>
          <p>There is only one nesting selector</p>
          <p>Try it out</p>
           <code>look here</code>
          <ul>
            <li class="selector">&</li>
           </ul>
      </section>
    </nav>
  </main>
 </body>
</html>

/* file: styles.css */
@media screen and (max-width:750px)
body{
  width:50%;
}
main{
  width: 50%;
  height: 100px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

5

now i have a problem with nav-link, this is the problem i have can’t pass the test.
I already put the same name , i dont know why still have the problem.
thank you

  1. Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
6

the dot there