Technical Documentation Page - Build a Technical Documentation Page - D2jlpfr8zUS3sQw4nJqnY

The test “None of your header elements should be empty” is failing, even though they are clearly not empty. I even tried it with the example document and this test still failed. I think the test is broken.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Documentation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav id="navbar">
      <header>Technical Documentation</header>
      <a href="#Getting_Started" class="nav-link">Getting Started</a>
      <a href="#Learning_the_Structure" class="nav-link">
        Learning the Structure
      </a>
      <a href="#Running_HTML" class="nav-link">Running HTML</a>
      <a href="#Basic_HTML_Elements" class="nav-link">Basic HTML Elements</a>
      <a href="#Learn_More" class="nav-link">Learn More</a>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Getting_Started">
        <header>Getting Started</header>
        <article>
          <p>
            HTML, or HyperText Markup Language, is base structure for webpages, and
            can be used in conjuntion with other programming languages, including
            JavaScript and CSS, Cascading Stylesheet. For those looking to get started
            learning HTML, this document is a great start. Before we start, it's best
            to know what your getting yourself into. This document contains the
            following:
          </p>
          <ul>
            <li>Code Examples</li>
            <li>Basic HTML Structure Guide</li>
            <li>Step by Step Instructions</li>
            <li>How to run HTML</li>
            <li>Basic HTML Elements</li>
          </ul>
          <code class="block">&lt;!DOCTYPE&gt;</code>
          <p>
            To start coding in HTML, HTML requires a declaration, used to tell the
            browsers what version of HTML to run. In previous versions, this was quite
            difficult, but in the most recent version, HTML5, all you need is the
            above <strong>element</strong>. An element tells the browser how to
            display whatever is inside of it, although this can be modified by adding
            or changing CSS code, thought that will not be taught here. The above
            element is <strong>self-closing</strong>, meaning it doesn't have a
            closing <strong>tag</strong>, such as <code>&lt;/element&gt;</code>. In
            previous versions, these types of elements needed a forward-slash
            (<code>/</code>) at the end to declare they had no closing tag, thought
            that is not nessiccary here. Note That some companies may require you to
            make use of it so that others know it is self-closing, especially for
            elements that can either be self-closing or not, depending on how it is
            being used.
          </p>
        </article>
      </section>
      <section class="main-section" id="Learning_the_Structure">
        <header>Learning the Structure</header>
        <article>
          <p>
            Once you have declared the document, you'll need somewhere to put all of
            your new code! introducing the
            <code>&lt;html&gt;</code> element. Unlike the previous element, this does
            have a closing tag, so you'll want to add a closing tag afterwards so your
            browser knows when your document has ended. Before you start typing your
            dream document, have you noticed that on other websites, they have titles
            that show up on the tabs. Not only would that be useful for viewers, but
            it's also useful for search engines so they understand the page better. To
            get a title up, however, type yourself the
            <code>&lt;head&gt;</code> element. From here on out, you'll be told if
            elements are self-closing, as most aren't, including this one. Now, you
            can utilize the <code>&lt;title&gt;</code> element, and type in your
            title. If it or any other plain text you type uses symboles that are often
            used when coding, such as those angled brackets, you'll have to look up
            HTML Entities online, as they won't be covered here. Not using them
            instead of plain text may confuse your code. Also, insert the below code
            into your <code>head</code> element, which will help clarify some
            technicalities for your browsers.
          </p>
          <code class="block">
            &lt;meta name="viewport" contents="width=device-width,
            initial-scale=1.o"&gt;<br />
            &lt;meta charset="utf-8"&gt;
          </code>
          <p>
            What this does is tell the browser how to display both the webpage and the
            characters inside the webpage. Also in the opening
            <code>html</code> add the <code>lang</code>
            <strong>attribute</strong> with the <strong>value</strong>
            <code>en</code>. Attributes and values use the folllowing
            <strong>sytax</strong>: <code>attribute="value"</code>. A syntax is a
            template of sorts, used to describe how to write code. Make sure there is
            a space between the opening tag and the attribe-value pair, and they
            should all be inside those angle brackets. Now you can create a
            <code>&lt;body&gt;</code> element. This will be where all of the
            displayable code will be. Also, none of the <code>meta</code> elements
            were needed, or the <code>lang</code> attribute. However, is best practice
            to include them, both for accessibility and to optimize your webpage for
            search engines, should you decide to publish it. Your HTML will run fine
            without them on most browsers.
          </p>
        </article>
      </section>
      <section class="main-section" id="Running_HTML">
        <header>Running HTML</header>
        <article>
          <p>
            Before we get into the nitty-gritty of all the different elements you can
            use to customize your webpage to your heart's content, you need to
            actually get your page to show up on screen. There are two methods to
            doing this. One is to use your favorite text editor or code editor on a
            HTML document, and open it in your browser, but this won't auto reload
            after adding new code. Instead, download Visual Studio Code and open up a
            new folder with it. Create a new HTML document in the Explorer tab, and
            name it what you like. It won't show up to others. Go to the Extensions
            tab, and search for "Prittier". Install it, and you may have to restart
            Code. Go to Preferences, and search for "Format". Check the option that
            allows you to format on save. Now close preferences, and install "Live
            Server". Right click your mouse or touchpad on or inside your HTML
            document, and select "Start Live Server". This will open up your page in
            your defult browser. If you use chrome, it will open on the most recently
            used user, if you have multiple. Now, it will auto reload when you save
            your decument. Also, no one else can access the displayed URL except you.
            What you created earlier is called a boiler plate. To recreate it in an
            instant, type
            <code>!</code> in your document and press your Tab key. Rename your
            document in your title contents as you wish. Now type the code below in
            the body element. Save your document, and go to the browser window, and a
            message should be displayed. If it's not, re-read this sectioon Before you
            continue.
          </p>
          <code class="block">&lt;h1&gt;Hello, World!&lt;/h1&gt;</code>
          <p>
            If you wish, you can delete that after you've confirmed you can see it in
            your browser. Now you can start learning all fun new elements of the HTML.
            Enjoy!
          </p>
        </article>
      </section>
      <section class="main-section" id="Basic_HTML_Elements">
        <header>Basic HTML Elements</header>
        <article>
          <p>
            The element we used above are called heading elements, and there are six
            of them, from <code>h1</code> to <code>h6</code>, each getting smaller. In
            most cases, you should only use one <code>h1</code>
            element. This helps both screen readers and seach engines better
            understand your webpage. You can style them however you like in your CSS
            file. To link it, use the bellow code, and replace
            <code>name</code> with your CSS file name. CSS is used to style HTML
            documents, while <strong>JavaScript</strong> is used to apply behavior to
            them. Also, ensure that all related files are in the same folder.
          </p>
          <code class="block">&lt;link rel="stylesheet" href="name.css"&gt;</code>
          <p>
            You can also link external online stylesheets this way, or other fonts.
            Just use the appropriate URL as a value for the
            <code>href</code> attribute. Ensure that you start it with
            <code>http://</code> or, preferably, <code>https://</code>, which means
            the website is secure. If your source does not have these, don't use it.
            That advice goes in general with any websites you may visit on a regular
            basis.
          </p>
          <p>
            For normal text, use the <code>&lt;p&gt;</code> element. To break up text,
            you can either use multiple of these, add a
            <code>&lt;br&gt;</code> element, which is self-closing, or do both. To
            break text with a horizontal line, you can do as before but with the
            <code>&lt;hr&gt;</code> element instead, also self-closing. To add a
            comment to your document only those editing or inspecting the actual code
            can see, use the bellow code, called a comment tag. It is self-closing,
            and can be placed anywhere. Your browser does not read these tags, so they
            should be used more as explanations to snibits of code, which you may need
            for more complex HTML.
          </p>
          <code class="block">&lt;!--comment--&gt;</code>
          <p>
            Also to style your text as code, similar to what you've seen so far, use
            the <code>&lt;code&gt;</code> element.
          </p>
        </article>
      </section>
      <section class="main-section" id="Learn_More">
        <header>Learn More</header>
        <article>
          <p>
            For more on coding HTML and other languages, visit these helpful websites
            below!
          </p>
          <ul>
            <li><a href="https://www.freecodecamp.org/">Free Code Camp</a></li>
            <li>
              <a href="https://www.grasshopper.com/">
                Grasshopper - A Free Google Product
              </a>
            </li>
            <li>
              <a href="https://www.codewithmosh.com/">
                Code With Mosh - A Perffessional Programming Instructor.*
              </a>
            </li>
            <li>
              <a href="https://www.google.com/"> The World Wide Web (Google)</a>
            </li>
          </ul>
          <p>
            * Hosts free course samples on his YouTube channel, otherwise you'll have
            to cough up a small fee for a full course. If your just looking for
            something to start on, though, the free samples should be fine, usually
            being atleast an hour in length, often much more.
          </p>
        </article>
      </section>
    </main>
  </body>
</html>

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: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I’ve copy pasted your code into my own editor, and the test passed. The only test that is failing is the one regarding media queries.

Are you still experiencing errors with the test concerning headers?

No, thank you. I discovered it may be an issue with my CSS. Removing my CSS, thus having the same code as I showed, it fixed the tests. I’m not really sure why, as CSS has nothing to do with the headings, but it does. I’ll put in different CSS and see if it gives the same weird failure. Thank you.

1 Like

Great to hear. If you still face an issue with this, feel free to put it up here. Sometimes, it helps to disable certain extensions, as they may be the reason for certain tests failing for you but passing for others.