Tell us what’s happening:
I got stuck on the use of media query . what i have done is If the screen is less than 768 px then the navbar will contain full width. I have used media query and it is working as well in the canvas but while running it says you failed the number 22 . Could anyone please help me with this one?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>Python Documentation</header>
<ul>
<li><a href="#Introduction"class="nav-link">Introduction</a></li>
<li><a href="#What_should_you_know_already."class="nav-link">What should you know already.</a></li>
<li><a href="#Python_and_its_uses:" class="nav-link">Python and its uses:</a></li>
<li><a href="#Variables"class="nav-link">Variables</a></li>
<li><a href="#Declaring_Variables"class="nav-link">Declaring Variables</a></li>
<li><a href="#Variable_Scope"class="nav-link">Variable Scope</a></li>
<li><a href="#Global_Variables"class="nav-link">Global Variables</a></li>
<li><a href="#Looping"class="nav-link">Looping</a></li>
<li><a href="#Arrays"class="nav-link">Arrays</a></li>
<li><a href="#Function"class="nav-link">Function</a></li>
<li><a href="#Reference"class="nav-link">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article><p>Python is a widely used general-purpose, high-level programming language. It was created by Guido van Rossum in 1991 and further developed by the Python Software Foundation. It was designed with an emphasis on code readability, and its syntax allows programmers to express their concepts in fewer lines of code. Python is a programming language that lets you work quickly and integrate systems more efficiently. There are two major Python versions: Python 2 and Python 3. Both are quite different.</p></article>
</section>
<section class="main-section" id="What_should_you_know_already.">
<header>What should you know already.</header>
<article><p>This guide assumes you have the following basic background:</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about Python.</li>
</ul>
</article>
</section>
<section class="main-section" id="Python_and_its_uses:">
<header>Python and its uses:</header> <article><p>Python is a computer programming language often used to build websites and software, automate tasks, and conduct data analysis. Python is a general-purpose language, meaning it can be used to create a variety of different programs and isn’t specialized for any specific problems. This versatility, along with its beginner-friendliness, has made it one of the most-used programming languages today.</p>
<p>According to a study by Statista, Python is the third most commonly used programming language among developers worldwide.</p>
<p>Python is commonly used for developing websites and software, task automation, data analysis, and data visualization. Since it’s relatively easy to learn, Python has been adopted by many non-programmers such as accountants and scientists, for a variety of everyday tasks, like organizing finances.</p>
<p>“Writing programs is a very creative and rewarding activity,” says University of Michigan and Coursera instructor Charles R Severance in his book Python for Everybody. “You can write programs for many reasons, ranging from making your living to solving a difficult data analysis problem to having fun to helping someone else solve a problem.”</p>
</article>
</section>
<section class="main-section" id="Variables">
<header>Variables</header><article><p>Python Variable is containers that store values. Python is not “statically typed”. We do not need to declare variables before using them or declare their type. A variable is created the moment we first assign a value to it. A Python variable is a name given to a memory location. It is the basic unit of storage in a program. In this article, we will see how to define a variable in Python.</p>
<p>Example of Variable in Python:<br>
An Example of a Variable in Python is a representational name that serves as a pointer to an object. Once an object is assigned to a variable, it can be referred to by that name. In layman’s terms, we can say that Variable in Python is containers that store values.</p>
<p><code>Var = "Geeksforgeeks"<br>
print(Var)</code></p>
<p>
There are different type of variables such as:
<ul>
<li>Local Variables</li>
<li>Global Variables</li>
<li>Instance Variables</li>
<li>Class Variables</li>
</ul>
</p>
</article>
</section>
<section class="main-section" id="Declaring_Variables">
<header>Declaring Variables</header>
<article><p>Python variables are simply containers for storing data values. Unlike other languages, such as Java, Python has no command for declaring a variable, so you create one the moment you first assign a value to it.</p>
<p>First, let’s define a variable. A variable is a placeholder for information you want Python to recall later in the coding process when you need to complete an action. Technically, the variable acts as an address for where the data is stored in memory. A Python variable may be assigned a value of one type and then later re-assigned a value of a different type. For example,<code> x = "apples"</code>can later be<code> x = 5.</code></p></article>
</section>
<section class="main-section" id="Variable_Scope">
<header>Variable Scope</header><article><p>Now that you know how to initialize a variable. Let's talk about the scope of these variables. Not all variables can be accessed from anywhere in a program. The part of a program where a variable is accessible is called its scope. There are four major types of variable scope and is the basis for the LEGB rule. LEGB stands for Local -> Enclosing -> Global -> Built-in.</p>
<p><code>def print_number():<br>
first_num = 1<br>
# Print statement 1<br>
print("The first number <br>defined is: ", first_num)</code><br><br>
<code>print_number()<br>
# Print statement 2<br>
print("The first number <br>defined is: ", first_num)
</code></p></article>
</section>
<section class="main-section" id="Global_Variables">
<header>Global Variables</header>
<article><p>
This is perhaps the easiest scope to understand. Whenever a variable is defined outside any function, it becomes a global variable, and its scope is anywhere within the program. Which means it can be used by any function.
</p>
<p><code>greeting = "Hello"<br>
def greeting_world():<br>
world = "World"<br>
print(greeting, world)<br><br>
def greeting_name(name):<br>
print(greeting, name)<br>
greeting_world()<br>
greeting_name("Samuel")</code>
</p>
</article>
</section>
<section class="main-section" id="Looping">
<header>Looping</header><article>
<p>Loops are important in Python or in any other programming language as they help you to execute a block of code repeatedly. You will often come face to face with situations where you would need to use a piece of code over and over but you don't want to write the same line of code multiple times.</p>
</article>
</section>
<section class="main-section" id="Arrays">
<header>Arrays</header>
<article>
<p>Arrays are fundamental data structures in many programming languages, providing a way to store collections of elements of the same type in a contiguous block of memory—meaning all elements are stored sequentially without gaps. This structure allows for efficient access and manipulation of the stored elements.</p>
<p>Unlike languages such as C or Java, Python does not have a built-in array data type in the traditional sense. Instead, Python provides several alternatives that function like arrays, each suited for different programming needs and scenarios.</p>
<p>Python’s standard library includes an array module, which allows for the creation of compact, type-restricted arrays similar to those in more statically-typed languages.</p>
<p>For numerical and scientific computing, however, the NumPy library and its ndarray (n-dimensional array) have become the go-to standard in Python. NumPy arrays provide extensive functionality far beyond the basic array structure offered by Python’s standard library.</p>
</article>
</section>
<section class="main-section" id="Function">
<header>Function</header><article>
<p>
Python Functions is a block of statements that return the specific task. The idea is to put some commonly or repeatedly done tasks together and make a function so that instead of writing the same code again and again for different inputs, we can do the function calls to reuse code contained in it over and over again.
</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header><article>
<p>
<ul>
<li>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/"> MDN</a></li>
</ul>
</p>
</article>
</section>
</main>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page[quote=“BipinPoudel, post:1, topic:711791, full:true”]
Tell us what’s happening:
I got stuck on the use of media query . what i have done is If the screen is less than 768 px then the navbar will contain full width. I have used media query and it is working as well in the canvas but while running it says you failed the number 22 . Could anyone please help me with this one?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
*{
margin:0;
padding:0;
}
body{
background-color:#CBD4C2;
display:flex;
flex-direction:row;
min-height:100vh;
padding:4px;
font-family:sans-serif;
section{
margin-top:40px;
}
#navbar{
position:sticky;
width:25%;
height:100vh;
}
#navbar li{
color:#50514F;
border-top:1px solid black;
list-style:none;
}
#navbar a{
text-decoration:none;
display:block;
padding:20px;
color:#4d4e53;
font-size:18px;
cursor:pointer;
transition:text-indent .3s ease-in-out;
}
#navbar a:hover{
background-color:#247BA0;
font-weight:500;
text-indent:6px;
}
p{
margin:10px;
}
main{
margin-left:10%
}
header{
font-weight:700;
font-size:20px;
}
li{
font-size:1em;
}
code{
display:block;
background-color:black;
color:white
}
@media screen and (max-width:768px){
#navbar{
width:100%;
height:auto;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
[/quote]
