Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Keeps say atleast 5 “li” element should be descendants of the “.main-section” element

Your code so far

WARNING

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"/>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width. initial-scale=1.0"/>
    <link rel="stylessheet" href="styels.css"/>
    <title>HTML Documentation</title>
    </head>
    <body>
   <nav id="navbar">
       <header>HTML Guide</header>
     <ul class="nav-list">
          <li><a class="nav-link" href="#introduction">Introduction</a></li>
          <li><a class="nav-link" href="#html_basics">HTML Basics</a></li>
          <li><a class="nav-link" href="#html_layout">HTML Layout</a></li>
          <li><a class="nav-link" href="#html_elements">HTML Elements</a></li>
          <li><a class="nav-link" href="#block_&_inline">Block & Inline</a></li>
          <li><a class="nav-link" href="#html_style">HTML Style</a></li>
          <li><a class="nav-link" href="#reference">Reference</a></li>
          </ul>
    </nav>
     

<main id="main-doc"> 
<section class="main-section" id="introduction">
<header>Introduction</header>

<p> HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages and describes the structure of a Web page. 
</p>
<p>
  HTML consists of a series of elements; these elements tell the browser how to display the content.
HTML elements label pieces of content such as "this is a heading", <b>"this is a paragraph", "this is a link"</b>, etc.
  </section> 

  <section class="main-section" id="html_basics">
  <header>HTML Basics</header>
 <p>
   All HTML documents must start with a document type declaration: &lt!DOCTYPE html&gt.
   </p>
   <p>
The HTML document itself begins with &lthtml&gt and ends with &lt/html&gt.
     </p>
     <p>
       The visible part of the HTML document is between &ltbody&gt and &lt/body&gt
       </p>
       <h5>HTML Headings</h5>
       <p>
         HTML headings are defined with the &lth1&gt to &lth6&gt tags.
     </p>
     <p>
&lth1&gt defines the most important heading. &lth6&gt defines the least important heading: 
         </p>
         <h5>HTML Images</h5>
         <p>
HTML images are defined with the &ltimg&gt tag.

The source file (src), alternative text (alt), width, and height are provided as attributes.
           </p>
           <h5>HTML Links</h5>
           <p>
             HTML links are defined with the &lta&gt tag:
             The link's destination is specified in the (href) attribute. 

Attributes are used to provide additional information about HTML elements.
             </p>
             <p>
               Example of a link to a stylesheet. </br>
             
<pre>
               <code>
         &lthead&gt 
              
  &ltlink rel="stylesheet" href="styles.css"&gt </br>
                
            &lt/head&gt
                 </code>
                 </pre>
               </p>
    </section>

    <section class="main-section" id="html_layout">
      <header>HTML Layout</header>
      <p>
        Websites often display content in multiple columns (like a magazine or a newspaper).
        </p>
        <p>
          HTML has several semantic elements that define the different parts of a web page:
          </p>
          <p>
           &ltheader&gt - Defines a header for a document or a section
            </p>
            <p>
            &ltnav&gt - Defines a set of navigation links
            </p>
            <p>
            &ltsection&gt - Defines a section in a document
              </p>
              <p>
                &ltarticle&gt - Defines an independent, self-contained content
                </p>
                <p>
                  &ltaside&gt - Defines content aside from the content (like a sidebar)
                  </p>
                  <p>
                    &ltfoote&gt - Defines a footer for a document or a section
                    </p>
                    <p>
                      &ltdetails&gt - Defines additional details that the user can open and close on demand.
                      </p>
                      <p>
                        &ltsummary&gt - Defines a heading for the &ltdetails&gt element
                        </p>
      </section>

  <section class="main-section" id="html_elements">
    <header>HTML Elements</header>
<p>
  The HTML element is everything from the start tag to the end tag and is defined by a start tag, some content, and an end tag.
  </p>
<p>
  Example of some HTML elements: </br>
  <pre>
  <code> 
   &lth1&gtMy First Heading&lt/h1&gt 
   
   &ltp&gtMy first paragraph&lt/p&gt
    </code>
    </pre>
  </p>
  <h5>Nested Elements</h5>
  <p>
    HTML elements can be nested inside each other to create a tree-like structure of the content on the web page.

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> 
    <p>
<pre>
      <code>
&lt!DOCTYPE html&gt 

&lthtml&gt 
&ltbody&gt 

&lth1&gtMy First Heading&lt/h1&gt
&ltp&gtMy first paragraph.&lt/p&gt 

&lt/body&gt 

&lt/html&gt
        </code>
</pre>

      </p>
    </section> 

    <section class="main-section" id="block_&_inline">
  <header>Block & Inline</header>
<p>
  Every HTML element has a default display value, depending on what type of element it is.
  </p>
  <p>

The two most common display values are block and inline.
    </p>
    <h5>Block Elements</h5>
    <p>
      A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
      </p>
      <p>
        A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: &ltp&gt and &ltdiv&gt.
        </p>
      <p>
        The &ltp&gt element defines a paragraph in an HTML document.
        </p>
        <p>
          The &ltdiv&gt element defines a division or a section in an HTML document
          </p>
      </section>

      <section class="main-section" id="html_style">
        <header>HTML Style</header> 
<p>
 The &ltstyle&gt tag is used to define style information (CSS) for a document.
  </p>
  <p>
    Inside the &ltstyle&gt element you specify how HTML elements should render in a browser.

The &ltstyle&gt element must be included inside the &lthead&gt section of the document.
    </p>
  <p>
    Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:
    </p>
    <p>
      <pre>
      <code>
        &lttagname style="property:value;"
        </code>
        </pre>
      </p>
      <p>
        Multiple styles can be attributted to the same element. 
        </p>
        <p>
          <pre>
          <code>
&lthtml&gt 
   &lthead&gt </br>
   &ltstyle&gt </br>
     h1 {color:red;} </br>
     p {color:blue;} </br>
  &lt/style&gt </br>
  &ltstyle&gt </br>
    h1 {color:green;} </br>
    p {color:pink;} </br>
  &lt/style&gt </br>
  &lt/head&gt </br>
  &ltbody&gt </br>


&lth1&gtThis is a heading&lt/h1&gt </br>
&ltp&gtThis is a paragraph.&lt/p&gt </br>

  &lt/body&gt </br>
&lt/html&gt </br>
            </code>
            </pre>
          </p>
        </section>

        <section class="main-section"  id="reference">
          <header>Reference</header>
          </section>



</main> 
    </body>


</html>

Your mobile information:

iPhone - iOS15.6

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hi @mfd7y2gd6b

You don’t appear to have five or more li elements that are descendents of .main-section.

You do have li elements in the #navbar element, above that element.

Happy coding

1 Like

just closed the nav element. still saying the same thing


HTML Guide
 <ul class="nav-list">
      <li><a class="nav-link" href="#introduction">Introduction</a></li>
      <li><a class="nav-link" href="#html_basics">HTML Basics</a></li>
      <li><a class="nav-link" href="#html_layout">HTML Layout</a></li>
      <li><a class="nav-link" href="#html_elements">HTML Elements</a></li>
      <li><a class="nav-link" href="#block_&_inline">Block & Inline</a></li>
      <li><a class="nav-link" href="#html_style">HTML Style</a></li>
      <li><a class="nav-link" href="#reference">Reference</a></li>
      </ul>
Introduction

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages and describes the structure of a Web page.

HTML consists of a series of elements; these elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Basics

All HTML documents must start with a document type declaration: &lt!DOCTYPE html&gt.

The HTML document itself begins with &lthtml&gt and ends with &lt/html&gt.

The visible part of the HTML document is between &ltbody&gt and &lt/body&gt

HTML Headings

HTML headings are defined with the &lth1&gt to &lth6&gt tags.

&lth1&gt defines the most important heading. &lth6&gt defines the least important heading:

HTML Images

HTML images are defined with the &ltimg&gt tag.

The source file (src), alternative text (alt), width, and height are provided as attributes.


HTML Links


HTML links are defined with the &lta&gt tag:
The link’s destination is specified in the (href) attribute.

Attributes are used to provide additional information about HTML elements.



Example of a link to a stylesheet.

               
         &lthead&gt 
              
  &ltlink rel="stylesheet" href="styles.css"&gt 
&lt/head&gt
           </p>
</section>

<section class="main-section" id="html_layout">
  <header>HTML Layout</header>
  <p>
    Websites often display content in multiple columns (like a magazine or a newspaper).
    </p>
    <p>
      HTML has several semantic elements that define the different parts of a web page:
      </p>
      <p>
       &ltheader&gt - Defines a header for a document or a section
        </p>
        <p>
        &ltnav&gt - Defines a set of navigation links
        </p>
        <p>
        &ltsection&gt - Defines a section in a document
          </p>
          <p>
            &ltarticle&gt - Defines an independent, self-contained content
            </p>
            <p>
              &ltaside&gt - Defines content aside from the content (like a sidebar)
              </p>
              <p>
                &ltfoote&gt - Defines a footer for a document or a section
                </p>
                <p>
                  &ltdetails&gt - Defines additional details that the user can open and close on demand.
                  </p>
                  <p>
                    &ltsummary&gt - Defines a heading for the &ltdetails&gt element
                    </p>
  </section>
HTML Elements

The HTML element is everything from the start tag to the end tag and is defined by a start tag, some content, and an end tag.

Example of some HTML elements:

   
   &lth1&gtMy First Heading&lt/h1&gt 

&ltp&gtMy first paragraph&lt/p&gt

Nested Elements

HTML elements can be nested inside each other to create a tree-like structure of the content on the web page.

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:


      
&lt!DOCTYPE html&gt 

&lthtml&gt 
&ltbody&gt 

&lth1&gtMy First Heading&lt/h1&gt
&ltp&gtMy first paragraph.&lt/p&gt 

&lt/body&gt 

&lt/html&gt
        
  </p>
</section> 

<section class="main-section" id="block_&_inline">
Block & Inline

Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.


Block Elements


A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.



A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: &ltp&gt and &ltdiv&gt.



The &ltp&gt element defines a paragraph in an HTML document.



The &ltdiv&gt element defines a division or a section in an HTML document


  <section class="main-section" id="html_style">
    <header>HTML Style</header> 

The &ltstyle&gt tag is used to define style information (CSS) for a document.

Inside the &ltstyle&gt element you specify how HTML elements should render in a browser.

The &ltstyle&gt element must be included inside the &lthead&gt section of the document.

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:





&lttagname style=“property:value;”




Multiple styles can be attributted to the same element.





&lthtml&gt
&lthead&gt

&ltstyle&gt

h1 {color:red;}

p {color:blue;}

&lt/style&gt

&ltstyle&gt

h1 {color:green;}

p {color:pink;}

&lt/style&gt

&lt/head&gt

&ltbody&gt

&lth1&gtThis is a heading&lt/h1&gt

&ltp&gtThis is a paragraph.&lt/p&gt

&lt/body&gt

&lt/html&gt




    <section class="main-section"  id="reference">
      <header>Reference</header>
      </section>

.nav-list is not a descendent of .main-section

Which section element contains the li elements?
Each section element has a class of .main-section

1 Like

haha OMg. took me a while. had to re-read your solution several times. My mistake was conflating the list element in the #navbar to be the list element the project asked for----turns out- i needed to use the li element in the main section as well as the #navbar.

:sweat_smile: THANK YOU

1 Like