Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I must be too close. I have looked at each class=“nav-link” href=“?” in the and compared that with the and its ? without finding my error.

I fail at: 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”).

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.

<!-- tech-doc.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Hodgepodge of Digital Literacy</title>
 <!--   <link rel="stylesheet" href="./styles.css"> -->
    <link rel="stylesheet" href="./tech-doc.css">
    <nav id="navbar">
        <header>Building This Site</header>
            <li><a class="nav-link" href="#Intro_1">Intro_1</a></li>
            <li><a class="nav-link" href="#Introduction">Introduction</a></li>
            <li><a class="nav-link" href="#Why_Was_This_Created?">Why Was This Created?</a></li> 
            <li><a class="nav-link" href="#Any_prerequisites?">Any prerequisites?</a></li> 
            <li><a class="nav-link" href="#Tools_I_use">Tools I use</a></li> 
            <li><a class="nav-link" href="#The_First_Step">The First Step</a></li> 
            <li><a class="nav-link" href="#Build_a_Template">Build a Template</a></li> 
            <li><a class="nav-link" href="#HTML">HTML</a></li>   
            <li><a class="nav-link" href="#CSS">CSS</a></li> 
            <li><a class="nav-link" href="#PHP">PHP</a></li>    
            <li><a class="nav-link" href="#step_04">step_04</a></li>  
            <li><a class="nav-link" href="#step_05">step_05</a></li>  
            <li><a class="nav-link" href="#step_06">step_06</a></li>  
            <li><a class="nav-link" href="#External_links">External links</a></li>  
            <li><a class="nav-link" href="#References">References:</a></li>  
    <main id="main-doc">
        <section id="Intro_1" class="main-section">
            <p>This page is being built with two purposes in mind. The first is to meet the requirements of to "Build a Technical Documentation Page". The second is to build a page that may be incorporated into my Hodgepodge. This section will disappear when this is incorporated into my pages. </p>

        <section id="Introduction" class="main-section">
            <p>This site was built to answer many questions from several people. Here you may learn how it came together. Some of this information may be old. Old as in outdated. Old as in not new to you. Moreover, old, as in I had fallen behind the changes in technogy and had to learn again. </p>

        <section id="Why_Was_This_Created?" class="main-section">
            <header>Why Was This Created?</header>
            <p>These are the reasons that this site was created.
                <ul><li>My granddaughter asked me to write some of my memories so that her children and their cousins could read as they got older</li>
                    <li>I was asked to volunteer at a local center. </li>
                    <li>I was asked to <i>try</i> to find parts of a website that was created, mostly by middle-school students, more than 25 years ago. </li>
                    <li>I was asked to help some people interested in learning "websiteing".</li>
                    <li>In responding to the three above I realized that much of what I knew is now out of date. This page is a part of my learning that process. </li>
                When one is going to teach others, he should have a pretty good understanding of the subject being taught and know the value of any resources he would recommend. This is part of the learning and evaluation prosses.</p>

        <section id="Any_prerequisites?" class="main-section">
            <header>Any prerequisites?</header>
            <p>The only real requirement to learn is desire. A notebook and pencil would be very helpful and access to a personal computer or laptop is essential. You don't need an expensive machine, almost any working device will do. </p>
        <section id="Tools_I_use" class="main-section">
            <header>Tools I use</header>
                <li><b>VSC </b>Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go. NET). </li>

                <li><br><b>Notepad++ </b>Notepad++ is a free source code editor and Notepad replacement that supports several languages.  </li>

                <li><br><b>XMAPP </b> The <b>X</b> stands for cross-platform, <b>A</b>pache <b>M</b>ariaDB <b>P</b>HP <b>P</b>erl. This provides an ideal local development environment. Hosting PHP applications created with XAMPP is easy.  </li>


        <section id="The_First_Step" class="main-section">
            <header>The First Step</header>
            <p>This may be the hardest part of building any website or page. Everyone involved should agree on how the pages should look and how a user should progress through them. This is where paper and pencil come in handy. Include a structure, of the directory tree of your file layout. </p> 
            <p>After the scratch-outs and erasing are all done, I suggest that everyone initial each page and sign the last one along with the date. Everyone should get a copy of the agreed-upon design. </p>
        <section id="Build_a_Template" class="main-section">
            <header>Build a Template</header>
            My template is a read-only text file found in my ./includes folder. There are instructions on naming the page and saving a copy with that name in the correct location. Changes to the template can be made only after saving a working copy.  The first instructions are: </p>
                &lt;?php // ./includes/	11/15/2022 the file location and name.<br>

                $title = "TITLE";              // Displayed in the Title Bar of a browser.<br>

                $pg = "PAGE";									// the DISPLAYED name for this page.<br>

                /* Instructions for using this template:<br>
                 * 1. Decide on the page NAME and where it will be saved.<br>
                 *    Use the format ~name.fld.typ~ where fld is the folder(directory).<br>
                 *    Example: is a .php file "cover" inside of /includes folder.<br>
                 * 2. "Save As" with that file location and name. Only now may this page be edited.<br>
                 * 3. Change line 1 to reflect the file location and name, <br>
                 *      line 2 to show the title and line 3 the page name.	
            <p>Please observe two things here: Every file will be a .php file. Every file name has a middle name, like  ".xxx."  I do this so that the complete file's name indicates the folder in which it resides. Public files live within ./public and have the middle name of .pub. within ./includes are ./includes/ and neighbors. </p>

            <p>The next section will add the new page to our navigation scheme. In the First Step above, we decided to have a horizontal bar under the page header. Some menu items, like "Home", stand-alone. Others have a main topic with submenu items dropping down (or up from the bottom) from the main item. Here are the instructions for that:</p>

                * 4. Prepare for navigation to this page:<br>
                *		  We will prepare a table data section &lt;td> &lt;/td> for site navigation.<br>
                *		  Remember to show the path from the site root directory:<br>
                *			  example: "../dir/name.fld.typ" is "root/folder/name.fld.php"<br>
                *		Will this be a sub-item? A "Drop-down" from another main menu item?<br>
                *			YES - continue at 4e. on line #31.<br>
                *			NO  - For standalone pages, continue here.
            <p>Let's prepare for a new stand-alone page, maybe a "Contact" page:   
                *   			a. On line 23, replace "page.php" with the new page location. (from line 1)<br>
                *    		b. On lines 22, (2 places), and 23 replace "PAGE" with the page name. (from line 3)<br>
                                &lt;td class="dropdown" style="border: 0px;"> 
                                &nbsp;&nbsp;&lt;?php if ($pg == "PAGE") { echo " PAGE "; } else { ?><br> 
                                &nbsp;&nbsp;   &lt;a href="page.php">&lt;b> PAGE &lt;/b>&lt;/a> &lt;?php  } ?><br>
                * 	4a. Copy (<ctrl><c>) lines 21 - 24.<br>
            <p>The instructions continue and, when followed, will provide a link on every other page on the site.</p>

            <p>Continuing, the variables which will provide the page header are assigned values. Saving the new page will allow it to be accessed. </p>

        <section id="HTML" class="main-section">
            <p>Taking a break from the template, I wish to acknowledge that the HTML 3 and 4 provisional I had known have been replaced by HTML5. This brings new specifications and requirements to allow its use.</p>

            <p>There are many Document Type Definitions (DTDs). Each specification ensures that browsers will attempt to follow those specifications. Plain text without markup is CDATA. The current DTD for HTML5 specification is "&lt;!DOCTYPE html>". We should tell the browsers what language we are using and also which set of character encoding is to be used. </p>

            <p>As the internet is being transported to so many new categories of devices, we need to consider those handheld computers with small displays as a part of the development prosses. Here is an example showing some of this:</p>
                &lt;!-- name.html Note that these four characters start a multi-line comment. &lt;!-- These three end it.--><br>
                // is used to start a comment ending at the end of a line.<br><br>

                &lt;!DOCTYPE html> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // begins a HTML5 document.<br>
                &lt;html lang="en"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // says English<br>
                &nbsp;&nbsp;&lt;head> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  // start the head section.<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  // use this set to encode characters <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- The next line provides for a multitude of viewing sizes --><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;title>Displays as a tab name&lt;/title><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" href="./styles.css"> // links to an external css file<br>
                &nbsp;&nbsp;&lt;/head> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  // close the head <br>
                &nbsp;&nbsp;&lt;body>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  // open the body section <br><br>
                This is the main section.   <br><br>
               &nbsp;&nbsp;&lt;/body> // remember, almost every tag needs to be closed.<br>

            <p>Tip: Use <a href=""></a> often as you create your pages.</p>
        <section id="CSS" class="main-section">
            <p>CSS has evolved so that it does much more than color and changes the size of the text. CSS can save a lot of work by controlling the layout of many web pages from one file. CSS can control the color, font, size of text, the spacing between elements, how elements are positioned on a page, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!</p>

            <p>"Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)! <sup><a href="#note1">1</a></sup></p>
            <p>CSS comes in three flavors:</p>
                    Inline CSS is used to apply a unique style to a single HTML element.
                        Placed in a sentence, &lt;style="color: red;">this would be red&lt;/style>
                    Note that this will override any CSS applied by the options below.
                <li><br><b>Internal CSS</b><br>
                An internal CSS is within the &lt;head> section within a &gt;style> element to define styles used on a single HTML page.
                        in the head:<br>
                        &nbsp;&nbsp;bad {color: red;}<br>
                        and in the text within the &lt;body>:<br>
                        Your answer was &lt;style="bad">wrong&lt;style>.<br>
                        would produce a red "wrong".
                    Notice that the {color: red;} is surrounded by curly brackets. Also, styles in the header override any External CSS styles and may be overridden by Inline styles.
                <li><br><b>External CSS</b><br>
                    External style sheets are used to define the style for many HTML pages. A link to it is added in the &lt;head> section of each HTML page:
                        In the HTML document's head:<br>
                            &lt;link rel="stylesheet" href="styles.css"><br>
                    There may be many linked stylesheets in a document's header. When there are definitions for the same style in multiple sheets, the last one read will replace that style. Also, Living up to the "Cascading" in the name, External style definitions are overridden by Internals, and those may be overridden by Inline styles.
            <p>Tip: Use <a href=""></a> to validate your pages.</p>

        <section id="PHP" class="main-section">
            <p>PHP is a scripting language that runs on a server. This code runs on a server where it will generate an HTML page to send to a visitor. The visitor will see the HTML page in their browser. They can not see the PHP script because it is only on the hosting server.  </p>

            <p>PHP’s job is to get specific information from the server and its database, then piece that together into an HTML web page. This "back-end" or “server-side” processing is the work of the site hosting server.</p>

            <p>PHP is available on all major operating systems, such as Linux, Microsoft Windows, and macOS. Most web servers, including Apache and IIS, also support PHP.  There are many versions of PHP, so it is advisable to verify that server will support your version.</p>

            <p>PHP can be used inside "normal" HTML files saved as .php. The server needs to recognize the .php file extension to call the PHP routines. Because the finished product of PHP is HTML, you should have a basic understanding of HTML and CSS. </p>

            <p>PHP statements begin with "&lt;?php" and end with "?>". They can be in one single line or span many. Every PHP statement ends with a semicolon (;).<p>
                    &nbsp; &nbsp;    echo "Hi, I'm a PHP script!";<br>
            <p>To experiment and learn PHP, I suggest that you use something like XAMPP or WAMP. With these installed in your machine, part of your machine will act as a server and PHP can be run. </p>
        <section id="step_04" class="main-section">
        <section id="step_05" class="main-section">
        <section id="step_06" class="main-section">
        <section id="External_links" class="main-section">
            <header>External links</header>
            <exnote id="note1" class="footnote"> </exnote> (1) This quote is from:  <a href="">W3School's "HTML Styles - CSS"</a>

        <section id="References" class="main-section">
                        <a href="">7 Skills You Need to Learn</a>
                    <dd>Some skills will serve you well regardless of what your goals are. Here are seven of them!</dd>
                <dt><br><b><a href="">28 Useful Skills to Learn in 2022</a></b></dt>
                    <dd>In addition to work-related skills, there are some skills that will make your life better no matter what you do for a living.</dd>
                    <dd>I use <a href="">Visual Studio Code</a> as an offline editor. Install the live server extension in VSC so that you may displays the results as changes are made to HTML and CSS. </dd>
                    <dd><a href="">Notepad++</a> installs quickly and there are turorials to help understand and use it.</dd>
                    <dd><a href="">XAMPP</a>  is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. Supported by XAMPP users from around the world. The forums were originally published in German, but you will find English and other other localized editions, too.</dd>



Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Try removing the colon here.

Thank you, Hanaa @hbar1st .
It is fitting that it was a colon that made an ass out of me!

Now, please, what is wrong with these current CSS media queries? I replaced the one I had with these and they work. That is seen by narrowing and expanding the browser window.

/* for smartphones */
@media (max-width: 450px) {
body {
background-color: paleturquoise;

/* for tablets */
@media (max-width: 800px) and (min-width: 451px) {
body {
background-color: rgb(164, 236, 236);

Read this instruction I copied from the project and compare what it says with what you have written:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

(Just in case this is not clear, the media rule needs to be inside the styles.css and linked from the index.html)

Thanks again, @hbar1st
It is there, just between the “”.
I’ll fix that and try again.

and it worked!
– Fred

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