Technical Document Page-Empty Header Error

HTML-CSS
1

Hi! My code passes all of the tests except for Step 6- the empty header test. I have read similiar posts and haven’t found a solution. Reallly appreciate the help. Thanks!

<!doctype html>
<html lang="en"></html>
<head>
  
  <meta charset= "utf-8">
  <meta name="viewport" content="width=device-width intial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>HTML & CSS Beginners Guide</title>
</head>

<body>

  <div class="app">

    <div class="menu-toggle">
     <div class="hamburger">
      <span></span>
      </div>
    </div>
      
   <aside class="sidebar">
  <nav class="menu" id="navbar">
    <header>menu</header>
     
          <a href="#Intro_to_HTML_&_CSS?" class="nav-link">Intro to HTML & CSS?</a></li>
          <a href="#HTML_Elements" class="nav-link">HTML Elements</a></li>
          <a href="#HTML_Attributes" class="nav-link">HTML Attributes</a></li>
          <a href="#What_is_CSS?" class="nav-link">What is CSS?</a></li>
          <a href="#CSS_Basics" class="nav-link">CSS Basics</a></li>
          <a href="#CSS_Syntax_&_Selectors" class="nav-link">CSS Syntax & Selectors</a></li>
        </nav>

        </aside>
        
        </div>
    <script>
      const menu_toggle = document.queryselector('.menu-toggle');
      const sidebar = document.querySelector('.sidebar');
      
      menu-toggle.addEventListener('click', () => {
        menu_toggle.classlist.toggle('is-active');
        sidebar.classlist.toggle('is-active');
      })
      </script>
  <main class="content" id="main-doc">
    <section class="main-section" id="Intro_to_HTML_&_CSS?">
  <header>Intro to HTML & CSS?</header>
 <h2>What is HTML5?</h2>
 <p>HTML5 is officially not a programming language. HTML5 stands for Hypertextmarkup Language. HTML describes the structure of the webpage. It consists of elements that tell the browser how to display content. Elements help keep content structured and organized.</p>  
 <h2>HTML Basic</h2>
 <p>In HTML there are some basics that every page needs to have. One example is the !Doctype declaration. This declaration helps browsers display web pages correctly.</p>
 <p>Two more examples are the html and body elements. All html documents need the html element, why? I'm not sure. The body element is where all content that will be visible goes.</p>
 <p>Another HTML basic that is very important are headings. Headings are defined by importance by the h1-h6 tags.
 </p>
 <code></code>
    </section>
    <section class="main-section" id="HTML_Elements">
      <header>HTML Elements</header>
      <p> What is an HTML Element? An HTML element is everything from the opening tag to the closing tag. This includes the content inbetween. Some example elements are the already mentioned h1 element, p element, and a element for links. </p>
      <code></code>
      </section>
   <section class="main-section" id="HTML_Attributes">
     <header>HTML Attributes</header>
   <p>All elements can have attributes. Attributes provide additional information and they are always specified in the opening tag. They are usually in the format of "name=value". For example "id=attributes".</p>
   <ul><h4>Example Attributes</h4>
     <li>background </li>
     <li>border</li>
     <li>class</li>
     <li>color</li>
     <li>id</li>
     <li>label</li>
     <li>loop</li>
     <li>low</li>
     <li>max</li>
     <li>media</li>
     <li>method</li>
     </ul>
  <code></code> 
   </section>
    <section class="main-section" id="What_is_CSS?">
      <header>What is CSS?</header>
    <p>CSS stands for Cascade Style Sheets. It is the language we use to style HTML pages. CSS describes how HTML elements should be displayed. CSS saves us a lot of work by allowing us to control the layout of multiple webpages all at once.</p>
    <p>The history of CSS really helps us understand why we use it today. IT helped us solce a big problem. When HTML was created, it wasn't intended for tags like font. This created a problem that CSS was able to fix.</p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Basics">
      <header>CSS Basics</header>
    <p>css basics </p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Syntax_&_Selectors">
      <header>CSS Syntax & Selectors</header>
    <p>css syntax & Selectors</p>
    <code></code>
  </section>
</main>
    </body>
2

Please post a link to the challenge.

3

your code has various issues, please also use an html validator Ready to check - Nu Html Checker

1 Like
5

Step #6
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page.

6

The test can fail to find the code if the code has too many syntax errors. Use the validator link and fix the errors you see one by one. (The warnings can be ignored)

7

Your code doesn’t fail that test for me.

I assume you have some CSS that might be causing it. Might be the nav as it looks like you have implemented a mobile nav, and you have a header element inside it. Post your CSS.

8

Hi! Thank you! I fixed the errors but still am having problems with an empty header. Any help would be greatly appreciated.

<html lang="en">
<head>
  <meta charset= "utf-8">
  <meta name="viewport" content="width=device-width intial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>HTML & CSS Beginners Guide</title>
</head>

<body>

  <div class="app">

    <div class="menu-toggle">
     <div class="hamburger">
      <span></span>
      </div>
    </div>
      
   <aside class="sidebar">
  <nav class="menu" id="navbar">
    <header>menu</header>
     
          <a href="#Intro_to_HTML_&_CSS?" class="nav-link">Intro to HTML & CSS?</a>
          <a href="#HTML_Elements" class="nav-link">HTML Elements</a>
          <a href="#HTML_Attributes" class="nav-link">HTML Attributes</a>
          <a href="#What_is_CSS?" class="nav-link">What is CSS?</a>
          <a href="#CSS_Basics" class="nav-link">CSS Basics</a>
          <a href="#CSS_Syntax_&_Selectors" class="nav-link">CSS Syntax & Selectors</a>
        </nav>

        </aside>
        
        </div>
    <script>
      const menu_toggle = document.queryselector('.menu-toggle');
      const sidebar = document.querySelector('.sidebar');
      
      menu-toggle.addEventListener('click', () => {
        menu_toggle.classlist.toggle('is-active');
        sidebar.classlist.toggle('is-active');
      })
      </script>
  <main class="content" id="main-doc">
    <section class="main-section" id="Intro_to_HTML_&_CSS?">
  <header>Intro to HTML & CSS?</header>
 <h2>What is HTML5?</h2>
 <p>HTML5 is officially not a programming language. HTML5 stands for Hypertextmarkup Language. HTML describes the structure of the webpage. It consists of elements that tell the browser how to display content. Elements help keep content structured and organized.</p>  
 <h2>HTML Basic</h2>
 <p>In HTML there are some basics that every page needs to have. One example is the !Doctype declaration. This declaration helps browsers display web pages correctly.</p>
 <p>Two more examples are the html and body elements. All html documents need the html element, why? I'm not sure. The body element is where all content that will be visible goes.</p>
 <p>Another HTML basic that is very important are headings. Headings are defined by importance by the h1-h6 tags.
 </p>
 <code></code>
    </section>
    <section class="main-section" id="HTML_Elements">
      <header>HTML Elements</header>
      <p> What is an HTML Element? An HTML element is everything from the opening tag to the closing tag. This includes the content inbetween. Some example elements are the already mentioned h1 element, p element, and a element for links. </p>
      <code></code>
      </section>
   <section class="main-section" id="HTML_Attributes">
     <header>HTML Attributes</header>
   <p>All elements can have attributes. Attributes provide additional information and they are always specified in the opening tag. They are usually in the format of "name=value". For example "id=attributes".</p>
   <h4>Example Attributes</h4><ul>
     <li>background </li>
     <li>border</li>
     <li>class</li>
     <li>color</li>
     <li>id</li>
     <li>label</li>
     <li>loop</li>
     <li>low</li>
     <li>max</li>
     <li>media</li>
     <li>method</li>
     </ul>
  <code></code> 
   </section>
    <section class="main-section" id="What_is_CSS?">
      <header>What is CSS?</header>
    <p>CSS stands for Cascade Style Sheets. It is the language we use to style HTML pages. CSS describes how HTML elements should be displayed. CSS saves us a lot of work by allowing us to control the layout of multiple webpages all at once.</p>
    <p>The history of CSS really helps us understand why we use it today. IT helped us solce a big problem. When HTML was created, it wasn't intended for tags like font. This created a problem that CSS was able to fix.</p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Basics">
      <header>CSS Basics</header>
    <p>css basics </p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Syntax_&_Selectors">
      <header>CSS Syntax & Selectors</header>
    <p>css syntax & Selectors</p>
    <code></code>
  </section>
</main>
    </body>
  </html>
9

can you explain more? what issue are you having?

10

Thank you! I ran it through the validator and no errors.

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fire Sans', sans-serif;
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 2rem 1rem;
  background-color: #2e3047;
  position: relative; /* Ensure it's positioned correctly */
}

.sidebar h2 {
  color: #707793;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem; /* Ensure correct spacing */
}

.sidebar .menu {
  margin: 0 -1rem; /* Ensure no extra margin */
}

.sidebar .menu .nav-link {
  display: block;
  padding: 1rem;
  color: #FFF;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .nav-link:hover,
.sidebar .menu .menu-item.is-active {
  color: #3bba9c;
  border-right: 5px solid #33ba9c;
}

.content {
  flex: 1;
  padding: 2rem; /* Correct padding */
}

.content h1 {
  color: #3C3F58;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.content p {
  color: #707793;
}

.hamburger {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, 50%);
  width: 32px;
}

.hamburger > span,
.hamburger > span::before,
.hamburger > span::after { 
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.hamburger > span::before {
  content: '';
  top: -8px;
}

.hamburger > span::after {
  content: '';
  top: 8px;
}

.menu-toggle.is-active .hamburger > span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger > span::before {
  transform: rotate(0deg);
}

.menu-toggle.is-active .hamburger > span::after {
  transform: rotate(90deg);
}

@media (max-width: 1024px) {
  .sidebar {
    max-width: 200px; 
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .content {
    padding-top: 8rem;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0; 
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
    overflow: auto; 
  }

  .sidebar.is-active {
    left: 0; 
  }
}
11

Yes, I’m working on the Tech Doc for Responsive Web Design. My code passes every test except " 6. None of your header elements should be empty."

12

it may be your javascript, I can count various syntax errors. Are you familiar with JavaScript? if you aren’t, remove that please

13

your code passes for me.
Can you share whatever the current code you’re using is? (i used the latest css and html that you posted and it worked fine)

14

That’s the code I’ve been trying. I’m still getting " 6. None of your header elements should be empty."

15

we can’t do anything with this response because we can’t see your code. Please share all the code you are trying in one reply so we can also try it. (or just use the code you already posted?)

16

The code I’ve been using is above. Here is all the code in one post.

<html lang="en">
<head>
  <meta charset= "utf-8">
  <meta name="viewport" content="width=device-width intial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>HTML & CSS Beginners Guide</title>
</head>

<body>

  <div class="app">

    <div class="menu-toggle">
     <div class="hamburger">
      <span></span>
      </div>
    </div>
      
   <aside class="sidebar">
  <nav class="menu" id="navbar">
    <header>menu</header>
     
          <a href="#Intro_to_HTML_&_CSS?" class="nav-link">Intro to HTML & CSS?</a>
          <a href="#HTML_Elements" class="nav-link">HTML Elements</a>
          <a href="#HTML_Attributes" class="nav-link">HTML Attributes</a>
          <a href="#What_is_CSS?" class="nav-link">What is CSS?</a>
          <a href="#CSS_Basics" class="nav-link">CSS Basics</a>
          <a href="#CSS_Syntax_&_Selectors" class="nav-link">CSS Syntax & Selectors</a>
        </nav>

        </aside>
        
        </div>
    <script>
      const menu_toggle = document.queryselector('.menu-toggle');
      const sidebar = document.querySelector('.sidebar');
      
      menu-toggle.addEventListener('click', () => {
        menu_toggle.classlist.toggle('is-active');
        sidebar.classlist.toggle('is-active');
      })
      </script>
  <main class="content" id="main-doc">
    <section class="main-section" id="Intro_to_HTML_&_CSS?">
  <header>Intro to HTML & CSS?</header>
 <h2>What is HTML5?</h2>
 <p>HTML5 is officially not a programming language. HTML5 stands for Hypertextmarkup Language. HTML describes the structure of the webpage. It consists of elements that tell the browser how to display content. Elements help keep content structured and organized.</p>  
 <h2>HTML Basic</h2>
 <p>In HTML there are some basics that every page needs to have. One example is the !Doctype declaration. This declaration helps browsers display web pages correctly.</p>
 <p>Two more examples are the html and body elements. All html documents need the html element, why? I'm not sure. The body element is where all content that will be visible goes.</p>
 <p>Another HTML basic that is very important are headings. Headings are defined by importance by the h1-h6 tags.
 </p>
 <code></code>
    </section>
    <section class="main-section" id="HTML_Elements">
      <header>HTML Elements</header>
      <p> What is an HTML Element? An HTML element is everything from the opening tag to the closing tag. This includes the content inbetween. Some example elements are the already mentioned h1 element, p element, and a element for links. </p>
      <code></code>
      </section>
   <section class="main-section" id="HTML_Attributes">
     <header>HTML Attributes</header>
   <p>All elements can have attributes. Attributes provide additional information and they are always specified in the opening tag. They are usually in the format of "name=value". For example "id=attributes".</p>
   <h4>Example Attributes</h4><ul>
     <li>background </li>
     <li>border</li>
     <li>class</li>
     <li>color</li>
     <li>id</li>
     <li>label</li>
     <li>loop</li>
     <li>low</li>
     <li>max</li>
     <li>media</li>
     <li>method</li>
     </ul>
  <code></code> 
   </section>
    <section class="main-section" id="What_is_CSS?">
      <header>What is CSS?</header>
    <p>CSS stands for Cascade Style Sheets. It is the language we use to style HTML pages. CSS describes how HTML elements should be displayed. CSS saves us a lot of work by allowing us to control the layout of multiple webpages all at once.</p>
    <p>The history of CSS really helps us understand why we use it today. IT helped us solce a big problem. When HTML was created, it wasn't intended for tags like font. This created a problem that CSS was able to fix.</p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Basics">
      <header>CSS Basics</header>
    <p>css basics </p>
    <code></code>
    </section>
    <section class="main-section" id="CSS_Syntax_&_Selectors">
      <header>CSS Syntax & Selectors</header>
    <p>css syntax & Selectors</p>
    <code></code>
  </section>
</main>
    </body>
  </html>

Styling

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fire Sans', sans-serif;
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 2rem 1rem;
  background-color: #2e3047;
  position: relative; /* Ensure it's positioned correctly */
}

.sidebar h2 {
  color: #707793;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem; /* Ensure correct spacing */
}

.sidebar .menu {
  margin: 0 -1rem; /* Ensure no extra margin */
}

.sidebar .menu .nav-link {
  display: block;
  padding: 1rem;
  color: #FFF;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .nav-link:hover,
.sidebar .menu .menu-item.is-active {
  color: #3bba9c;
  border-right: 5px solid #33ba9c;
}

.content {
  flex: 1;
  padding: 2rem; /* Correct padding */
}

.content h1 {
  color: #3C3F58;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.content p {
  color: #707793;
}

.hamburger {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, 50%);
  width: 32px;
}

.hamburger > span,
.hamburger > span::before,
.hamburger > span::after { 
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.hamburger > span::before {
  content: '';
  top: -8px;
}

.hamburger > span::after {
  content: '';
  top: 8px;
}

.menu-toggle.is-active .hamburger > span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .hamburger > span::before {
  transform: rotate(0deg);
}

.menu-toggle.is-active .hamburger > span::after {
  transform: rotate(90deg);
}

@media (max-width: 1024px) {
  .sidebar {
    max-width: 200px; 
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .content {
    padding-top: 8rem;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0; 
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
    overflow: auto; 
  }

  .sidebar.is-active {
    left: 0; 
  }
}
17

i edited the post to split the two files up visually and with the backticks to format them better.

18

i copied your code again to the fcc challenge and it passed again.

I’m not sure how to help. Can you tell us what is happening on your end?

19

Thank you for improving my formatting and for all of your continued help! This is strange, I tried my code again on chrome instead of safari and it worked! It was failing " 6. None of your header elements should be empty." I don’t know if this makes any sense and have zero evidence but maybe it was my safari settings related to javascript?

20

Yeah maybe. Sometimes extensions can modify the css on the page too.