Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Please can I have assistance, I am almost finished my project but the run test has four errors and, I cant seem to fix the problem. #1: The first child of each .main-section should be a header element. #2: 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. #3: 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”). #4: 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


The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>HTML Technical Documentation Page</title>
        <link rel="stylessheet" href="./styles.css"/>
        <nav id="navbar">
  <header>HTML Documentation</header>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#Example_of_HTML">Example of HTML</a></li>
    <li><a class="nav-link" href="#How_HTML_works">How HTML works</a></li>
    <li><a class="nav-link" href="#HTML_Features">HTML Features</a></li>
    <li><a class="nav-link" href="#HTML_Hierarchy">HTML Hierarchy</a></li>
    <li><a class="nav-link" href="#What_are_HTML_elements">What are HTML elements</a></li>
    <li><a class="nav-link" href="#What_are_HTML_atrributes">What are HTML attributes</a></li>
    <li><a class="nav-link" href="#HTML_Syntax">HTML Syntax</a></li>
    <li><a class="nav-link" href="#Cons_of_HTML">Cons of HTML</a></li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>

        <main id="main-doc">
            <section class="main-section" id="Introduction">
      <p>HTML basics:</p>
      <p>HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.</p>
      <p>What is HTML?</p>
      <p>HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.
In simple words, HTML is the primary building block to create and structure website content.</p>
<p>Let's see what HyperText Markup Language means.</p>
<li>HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.</li>
<p>Markup language:</p>
      A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.
  <section class="main-section" id="Example_of_HTML">
      <header>Example of HTML</header>
      <p>Let's see a simple example of HTML.</p>
&lt;!DOCTYPE html&gt;
        &lt;h1&gt;HTML Tutorial&lt;/h1&gt;
        &lt;p&gt;You'll learn about HTML.&lt;/p&gt;
<p>In the above program,</p>
    <li><code>&lt;!DOCTYPE html&gt;</code> - defines that this document is an HTML document</li>
    <li><code>&lt;html&gt;</code> -root element of an HTML page which encloses all other elements in the HTML page</li>
    <li><code>&lt;head&gt;</code> - contains information about the page, such as the title and metadata</li>
    <li><code>&lt;title&gt;</code> - specifies a title for the HTML page which is shown in the browser's title bar</li>
    <li><code>&lt;body&gt;</code> - defines the main content of the page and is a container for all the visible contents, such as headings, paragraphs, lists, etc</li>
    <li><code>&lt;h1&gt;</code> - defines a heading</li>
    <li><code>&lt;p&gt;</code> - defines a paragraph of HTML document</li>
  <section class="main-section" id="How_HTML_works">
      <header>How HTML works</header>
      <p>HTML works by defining the structure and content of a web page using a series of tags like <code>&lth1&gt,</code><code>&ltp&gt</code>, etc. Each tag has a meaning and can be used to define the purpose of the content it encloses. For example,</p>
    &lt!DOCTYPE html&gt  
        &ltmeta charset="utf-8"&gt
        &ltmeta name="viewport" content="width=device-width"&gt
        &lth1&gtLearn to Code for Free&lt/h1&gt
            Learn to code with our beginner-friendly tutorials and examples.
            Read interactive tutorials, and write and test your code to learn programming.
        &ltbutton&gtJoin for free&lt/button&gt
      <p>As you can see, a web browser reads HTML tags and displays them on the browser by interpreting their meaning. In the above code:</p>
          <li><code>&lth1&gt</code> tag - displays the content inside it as a heading</li>
          <li><code>&ltp&gt</code> tag - displays the content inside it as a paragraph</li>
          <li><code>&ltcenter&gt</code> tag - displays contents inside it at the center of the page</li>
  <section class="main-section" id="HTML_Features">
      <header>HTML Features</header>
      <p>HTML is a text-based language used to create web pages. It has several features that make it a powerful and widely used language for creating web pages. Some of these features include:</p>
        <li>HTML is a standard language used for creating and structuring web pages. It allows for the organization of content using elements such as headings, paragraphs, lists, and tables.</li>
        <li>It supports a wide range of media types, including text, images, audio, and video, which makes web pages more engaging and interactive.</li>
        <li>HTML is a flexible language that can be used with other technologies, such as CSS and JavaScript, to add additional features and functionality to a web page.</li>
        <li>Since HTML is compatible with all browsers, web pages created in HTML are displayed across a variety of platforms and devices.</li>
        <li>Furthermore, it is an open and standardized language, which is constantly being updated and improved by a community of developers and experts.</li>
  <section class="main-section" id="HTML_Hiearchy">
      <header>HTML Hierarchy</header>
      <p>HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.</p>
      <p>This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,</p>
        &lt!DOCTYPE html&gt
        &lttitle&gtMy web page&lt/title&gt
        &lth1&gtHello, world!&lt/h1&gt
        &ltp&gtThis is my first web page.&lt/p&gt
        &ltp&gtIt contains a 
             &ltstrong&gtmain heading&lt/strong&gt and &ltem&gt paragraph &lt/em&gt.
      <p>In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.</p>
      <p>Let's see the meaning of the various elements used in the above example.</p>
          <li><code>&lthtml&gt</code>: the root element of the DOM, and it contains all of the other elements in the code</li>
          <li><code>&lthead&gt</code>: contains metadata about the web page, such as the title and any linked CSS or JavaScript files</li>
          <li><code>&lttitle&gt</code>: contains the title of the web page, which will be displayed in the web browser's title bar or tab</li>
          <li><code>&ltbody&gt</code>: contains the main content of the web page, which will be displayed in the web browser's window</li>
          <li><code>&ltp&gt</code>: contains the paragraphs of text on the web page</li>
          <li><code>&ltstrong&gt</code>, <code>&ltem&gt</code>: child elements of the <code>&ltp&gt</code> elements, they are used to mark text as important and emphasized respectively
  <section class="main-section" id="What_are_HTML_elements?">
      <header>What are HTML elements?</header>
      <p>HTML elements consist of several parts, including the opening and closing tags, the content, and the attributes. Here is an explanation of each of these parts:</p>
      <p><code>&ltp&gtLearn to code for free at</code></p>
        <li>The opening tag: <code>&ltp&gt</code> This consists of the element name, wrapped in angle brackets. It indicates the start of the element and the point at which the element's effects begin.</li>
        <li>The closing tag: <code>&lt/p&gt</code> This is the same as the opening tag, but with a forward slash before the element name. It indicates the end of the element and the point at which the element's effects stop.</li>
        <li>The content: <strong>Learn to code for free at</strong> This is the content of the element, which can be text, other elements, or a combination of both.</li>
        <li>The element: <code>&ltp&gtLearn to code for free at</code> The opening tag, the closing tag, and the content together make up the element.
  <section class="main-section" id="What_are_html_atrributes">
      <header>What are HTML atrributes</header>
      <p>HTML elements can have attributes, which provide additional information about the element. They are specified in the opening tag of the element and take the form of name-value pairs. Let's see an example:</p>
      <p><code>&lta href=""> Example &lt/a&gt</code></p>
      <p>The href is an attribute. It provides the link information about the <a> tag. In the above example,</p>
      <p>href - the name of attribute</p>
      <p> - the value of attribute</p>
  <section class="main-section" id="HTML_syntax">
      <header>HTML Syntax</header>
      <p>We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of tags, elements, and attributes, as well as the correct use of indentation and white space. Here are some key points about HTML syntax:</p>
        <li> HTML tags consist of the element name, wrapped in angle brackets. For example, 
<p><code>&lth1&gt</code>, <code>&ltp&gt</code>, <code>&ltimg&gt are some HTML tags.</code></p>
        <li> HTML elements are created by enclosing the content of the element inside the opening and closing tags of the element. For example,</li>
        <p><code>&ltspan&gtSome text here&ltspan&gt</code> : is an HTML element.</p>
        <li>HTML attributes are used to provide additional information about HTML elements and are specified in the opening tag of the element. For example,</li>
        <p><code>&lta target=""&gtClick here&lt/a&gt </code>: Here, target is an attribute.</p>
        <li>HTML code should be well-formed and properly indented, with each element on its own line and each level of hierarchy indented by one level. This makes the code easier to read and understand, and can help to avoid errors. For example,</li>
        &lttitle&gtMy First HTML Page&lt/title&gt
        &lth1&gtMy First HTML Page&lt/h1&gt
        &ltp&gt Hello World!&lt/p&gt
  <section class="main-section" id="Cons_of_HTML">
      <header>Cons of HTML</header>
      <p>Here are some of the cons of using HTML:</p>
        <li>text-based language, which can make it difficult to read and write</li>
        <li>may not be powerful enough to handle some of the more complex features found in modern web pages</li>
        <li>can be challenging to maintain and update over time</li>  
       <section class="main-section" id="Reference">
       <p>All the information on this page was gathered from <a href="">Programiz</a></p>
        Done by: Brandon Thomas   

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

There should be a four-way exact match (barring underscores and hashes) between each of your .nav-link href attributes, .nav-link link text, .main-section id attributes and .main-section header text.

There are a number of typos and mismatches between these, so I’d go through them all in turn checking that all four are matching in each case. This includes upper/lower case, punctuation and spelling. For instance, you mistype ‘hierarchy’ and ‘attributes’ in some cases.

If you fix all of the typos, you will pass all tests except for:

The first child of each .main-section should be a header element.

I haven’t had time to look through the code in enough detail to figure out why this isn’t passing but I suspect it may be something to do with errors within your section elements. For instance, you have a mistyped tag here: <p>HyperText:<p/>.

1 Like

Hi there, I want start off by saying thank you so much for your assistance in this matter and for your sound advise. You are right, I did indeed make a few typos and mismatches, after careful examination I eventually found and corrected the mistakes. I can happily say that all of my errors have been resolved, however I’m still sitting with one error left with regards to: The first child of each .main-section should be a header element. As far as i can see, each section element does have a header element as its first child. nonetheless, once again, i will go through all of code and see what could be the problem and, by the way, I did fix the one typo you spotted with regards to the mistyped tag: <p>HyperText:<p/>. Once again, thank you, I sincerely appreciate your help.

I just had another look and found the issue in the ‘What_are_HTML_attributes’ section:

<p>The href is an attribute. It provides the link information about the <a> tag. In the above example,</p>

You have an anchor tag inside this p element. You’ll need to change the <a> (perhaps to ‘anchor’)? Or you could use the ampersand coding which you have used elsewhere (e.g. &lta&gt).
The issue is that it is currently being read as a stray anchor tag rather than part of the text content of the p element. You’ll notice that if you remove that single tag, the remaining test will pass.

1 Like

Hi, Your sound advise worked. I am pleased to say that I have successfully passed all of the steps and completed my project. I could have not done it on my own and I am truly grateful for your assistance. It was very kind of you to go out of your way and take the time to help me out. If I ever will be as good as you one day in the future, I will be happy to return the favour and help someone along their journey to learn how to code . Once again, thank you so much, I appreciate it.

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