Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Please how do I solve this problem? Your Technical Documentation project should use at least one media query.

Your code so far

<!-- file: i<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Programming</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>

  <body>
    <div class="nav-container">
    <nav id="navbar">
      <header>Basic Programming</header>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a>
          </li>
          <li><a class="nav-link" href="#What_is_Programming?">What is Programming?</a>
          </li>
          <li><a class="nav-link"  href="#What_are_Variables?">What are Variables?</a>
          </li>
          <li><a class="nav-link"  href="#What_is_a_Constant?">What is a Constant?</a>
          </li>
          <li><a class="nav-link"  href="#What_are_Data_Types?">What are Data Types?</a>
          </li>
        </ul>
    </nav>
    </div>

  <main id="main-doc">
    
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <article>
        <p>To understand programming, we need to understand the basic underlying concepts.

The following pages explain the basic programming concepts, using code examples, images, and animations.</p>
        <h3>Who Is This For?</h3>
        <p>These pages are for anyone who wants a clear explanation of one or more programming concepts.

Whether you're a total beginner or someone who needs to revisit a programming concept, these pages will help you understand how code works at a fundamental level.</p>
<p>Looking through the code examples, you can see for yourself that the concepts are the same in all programming languages, they are just written a little differently.

The next page explains how to get started with programming.</p>
<pre class="code-block">
                <code>&lt;p&gt;Programming is fun to learn.&lt;/p&gt;</code>
      </article>
    </section>

    <section class="main-section" id="What_is_Programming?">
      <header>What is Programming?</header>

      <article>
        <p>Programming is telling a computer what to do.

Being good at programming means you can make the computer do what you want.</p>
        <h3>Get Started With Programming</h3>
        <p>To master programming, you need to learn the core concepts first.

No matter the programming language, many of the concepts used are still the same.</p>
        <p>The first 5 core concepts you need to learn are:</p>
        <ol>
          <li>Variables</li>
          <li>If Statements</li>
          <li>Arrays</li>
          <li>Loops</li>
          <li>Functions</li>
        </ol>
        <p>It is recommended to learn these concepts in the order above.</p>
        <p>To fully understand these concepts, you also need to have a basic understanding of data types, boolean logic, and operators.</p>
        <p>After you have learned these core concepts, you can move on to more advanced concepts.</p>
        <h3>Programming Languages</h3>
        <p>A programming language is how we write code, what keywords we use, to tell the computer what to do.</p>
        <p>Different programming languages are used for different purposes, like JavaScript is good for web development, Python is good for AI, and C/C++ is good for programming microcontrollers.</p>
        <p>What we actually have to write to make use of for example variables, or functions, is slightly different depending on the programming language, and that is called the syntax of the programming language.</p>
     <pre class="code-block">
        <code>&lt;h1&gt;This is programminh.&lt;/h1&gt;
                    &lt;h2&gt;This is heading 2.&lt;/h2&gt;
                    &lt;h3&gt;This is 
                </code>
            </pre>
      </article>
    </section>

    <section class="main-section" id="What_are_Variables?">
      <header>What are Variables?</header>
      <article>
        <p>Variables are one of the most basic and essential concepts in programming, used to store values.</p>
        <p>A variable has a name, and you can store something in it.</p>
        <p>The reason for giving a variable a name is to be able to use it later in the code, and also to know what value it holds. </p>
        <p>Variables can hold different types of data, like whole numbers, decimal numbers, or text.</p>
        <p>When creating a variable in programming languages like C/C++ and Java, we must tell the computer what type of data the variable holds. To do that we need to write for example int in front of the variable name, if the variable holds a whole number (integer).</p>
        <h3>Doing Things with Variables</h3>
        <p>Like we have just seen in the previous example, a value can be stored in a variable. And if you run the example code above, you see how a variable is printed.</p>
        <p>We can do other things with variables as well, like math operations, or put variables with text strings together, etc.</p>
        <pre><code>
&lt!-- 4 heading levels: --&gt

&lth1&gtMy main title&lt&frasl;h1&gt

&lth2&gtMy top level heading&lt&frasl;h2&gt

&lth3&gtMy subheading&lt&frasl;h3&gt

&lth4&gtMy sub-subheading&lt&frasl;h4&gt
              </pre></code>
      </article>
    </section>

    <section class="main-section" Id="What_is_a_Constant?">
      <header>What is a Constant?</header>
      <article>
        <p>A constant is a value that cannot be changed after it is assigned.</p>
        <p>Constants are useful when you have a value that should stay the same while the program runs, like the value of PI, the number of days in a week, or a fixed URL.</p>
        <h3>Why Use Constants?</h3>
        <p>Using constants makes your code easier to understand and maintain:</p>
        <ul>
          <li>Readability: Names like PI or DAYS_IN_WEEK explain what the number means.</li>
          <li>Safety: Constants protect important values from being accidentally changed.</li>
          <li>Easy updates: If you need to change a constant (like a tax rate), you only update it in one place.<li>
        </ul>
        <h3>Changing a Constant</h3>
        <p>Once a constant is assigned, trying to change it will usually cause an error or be ignored, depending on the language.</p>
        <h3>Constants in Practice</h3>
        <p>Here are some common examples of constants:</p>
        <ul>
          <li>PI = 3.14159   (The mathematical constant pi)</li>
          <li>DAYS_IN_WEEK = 7</li>
          <li>URL = "https://example.com"</li>
        </ul>
        <p>Note: In Python, there is no built-in way to make a variable constant. The common practice is to write constant names in UPPERCASE to show other programmers that the value should not change.</p>
    <pre class="code-block">
        <code>&lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
        &lt;title&gt;programiz&lt;/title&gt;
        &lt;/head&gt; &lt;body&gt;
        &lt;h1&gt;HTML Tutorial&lt;/h1&gt;
        &lt;p&gt;You'll learn about HTML.&lt;/p&gt;
        &lt;/body&gt; &lt;/html&gt;                  
        </code>
        </pre>
      </article>
    </section>

    <section class="main-section" id="What_are_Data_Types?">
      <header>What are Data Types?</header>

      <article>
        <p>Data types are the types of data that can be stored in a variable.</p>
        <p>A data type is the type of data a variable has, like is it a text or is it a number?</p>
        <p>The data type we set a variable to affects what we can do with the variable.</p>
        <p>For example, if we have two variables of a number data type, with values 3 and 4, we can use the + operator to add them together, and we get 7</p>
        <p>But, if we store the two values as text string data types instead, as "3" and "4", we get "34" as the result when we use the + operator</p>
        <p>What data types you have available depends on the programming language you are using, but the most common data types are:</p>
        <ul>
          <li>String (text)</li>
          <li>Integer (whole number)</li>
          <li>Float (decimal number)</li>
          <li>Boolean (true or false)</li>
        </ul>
        <p>In Python and JavaScript, we don't specify the data type when the variable is created, because that happens automatically, but in Java and C++, we need to specify the data type when creating a variable.</p>
        <h3>Finding the Data Type of a Variable</h3>
        <p>If you have a variable, and you want to find out what data type it is, most programming languages have a built-in function you can use for that.</p>
        <p>Other Data Types are as follows:</p>
        <ol>
          <li>String Data Type</li>
          <li>Integer Data Type</li>
          <li>Float Data Type</li>
          <li>Boolean Data Type</li>
          <li>Casting Data Types</li>
          <li>None, or Null</li>
          <li>Binary Values and Data Types</li>
        </ol>

        <p>Control characters are characters that are not printable, and are shown as <control> in the simulation above. Such characters are used to control the computer, to tell the computer "here comes a new line" for example.</p>
        <p>A simple ASCII/UTF-8 character set is used to interpret the binary sequences in the simulation above, which means we use only the first 7 bits, or the 128 first positions of the character set.</p>
         <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;Page Title&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Programiz&lt;/h1&gt;
                            &lt;p&gt;We create easy to understand programming tutorials.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                </code>
            </pre>
        </article>
      </section>
    </main>
  
  </body>
</html>ndex.html -->


/* file: sty*, *::before, *::after {
  margin: 0;
  padding: 0;
  font-family: Tahoma;
  box-sizing: border-box;
}

.nav-container {
  display: block;
  position: fixed;
  width: 300px;
  min-width: 290px;
  height: 100%;
  top: 0;
  left: 0;
  border-right: grey solid 2px;
}

#navbar header {
  text-align: left;
  padding: 10px 0 5px 10px;
  border-bottom: grey solid 2px;
}

#navbar ul {
  list-style: none;
  margin-top: 10px;
}

#navbar li {
  margin-bottom: 20px;
  border-bottom: grey solid 2px;
  padding: 4px;
  text-align: left;
  font-size: 1.1em;  
  position: relative;
}

.nav-link {
  text-decoration: none;
}

.nav-link:visited {
  color: brown;
}

.nav-link:hover,
.nav-link:focus {
  color: grey;
}

#main-doc {
  display: block;
  position: absolute;
  top: 0;
  left: 320px;
  margin: 0 auto;
  width: 100%;
  max-width: 65em;
}

header {
  margin-bottom: 10px;
  margin-top: 25px;
  font-size: 1.8em;
}

p {
  margin-bottom: 15px;
  line-height: 1.5;
}

article li {
  margin-bottom: 8px;
  margin-left: 2em;
  line-height: 1.5;
}

img {
  max-width: 100%;
}

.broken-image {
  padding: 25px;
}

pre, .code {
  display: inline-block;
  background: hsl(0, 0%, 94%);
  margin-left: 1em;
  margin-bottom: 1em;
  padding: 5px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 5px;
}

#reference a {
  text-decoration: none;
}

.reference a:visited {
  color: black;
}

.reference a:hover,
.reference a:focus {
  color: grey;
}

pre.code-block {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    background-color: aliceblue;
    margin-bottom: 24px;
    white-space: pre-line;
}les.css */

Your browser information:

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

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page

2

Not trying to be dismissive but have you tried to add a media query?

https://www.freecodecamp.org/learn/responsive-web-design-v9/lecture-best-practices-for-responsive-web-design/how-do-media-queries-work