Ok so first of all everything I have here passes the tests except “None of your header elements should be empty”. Which, unless I am totally missing something, is just not true. Also I am getting the " 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”)." Error which I have double checked and I don’t see what I could have done wrong. I am going to continue to the later lessons and hopefully I will get a response by then. I would appreciate some help.
Thank you,
Fox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav id="navbar">
<header>Python</header>
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Hello_World">Hello World</a></li>
<li><a href="#Variables_and_Types">Variables and Types</a></li>
<li><a href="#If_Else">If Else</a></li>
<li><a href="#Why_Python?">Why Python?</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>Python is a programming language written in the language of C. It is well-known for being easy to understand and use.</p>
<p>Python does not have static typing or strong type-checking(As of recent, it does have type-checking, but it's "weak" in comparison to Java's type-checking), and while it allows for Object-Oriented programming it is not required like it is in Java.</p>
</section>
<section class="main-section" id="Hello_World">
<header>Hello World</header>
<p>Writing code to output the text "Hello World" has never been easier than it is in Python</p>
<p>It is simple! Here is how it is done</p>
<code>print("Hello World")</code>
</section>
<section class="main-section" id="Variables_and_Types">
<header>Variables and Types</header>
<p>To store values in Python, you can assign them to a variable. By doing this, you can call these variables later in your program instead of rewriting the data you want</p>
<p>Let's practice by adding two numbers together using variables we've assigned them to</p>
<pre><code>x = 10
y = 20
print(x + y)
Output:
30</code></pre>
<p>You can assign many kinds of data to variables, each different kind is called a type. In the example above x and y are ints</p>
<p>Here are some important types to know in Python</p>
<ul>
<li>int (integer): a positive or negative whole number with no decimal point.</li>
<li>float (float): a positive or negative number with decimal points (ex: 1.1)</li>
<li>str (string): any text surrounded by single or double quotes('' or "")</li>
<li>bool (boolean): has only 2 values: True or False</li>
<li>NoneType: the type of anything that does not contain a value, such as print()</li>
</ul>
<pre><code>string = "Hello World"
floatingPointNumber = 2.5
print(type(string))
print(type(floatingPointNumber))
Output:
<class 'str'>
<class 'float'>
</code><pre>
<p>Here is an example of a NoneType</p>
<pre><code>print(type(print("Hello World")))
#We are passing in print("Hello World") into the type() function
Output:
<class 'NoneType'></code></pre>
</section>
<section class="main-section" id="If_Else">
<header>If Else</header>
<p>Note: A comment is some text in a program that is ignored by the computer and is only used for the person viewing the code</p>
<code>#Placing '#' before any text will turn it into a comment</code>
<pre><code>"""
Using 3 double quotes will allow for a multi-line comment.
It is commonly used within the first lines of a function
definition to document what the function does
"""</code></pre>
<p>Any code placed after an if statement will only run if the condition is True</p>
<pre><code class="indent">if x > y:
print(x)</code></pre>
<p>This code will only print x if x > y. If it isn't greater, it will do nothing. If we want to do something when the condition (x > y) is False, we use else</p>
<pre><code class="indent">if x > y:
print(x)
else:
print(y)</code></pre>
<p>Now we will print the value of y if x is not greater than y</p>
</section>
<section class="main-section" id="Why_Python?">
<header>Why Python?</header>
<p>Python allows a user-friendly approach to programming, without sacrificing the complexity that is unique to programming. If there's a program you want to write, it can be written in 5 lines of code while it may be 15 lines of code in another language. When a task requires a programming solution, Python should always be the first language you turn to.
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
One, was there also CSS to go along with this HTML? You said you were passing all tests, but you can’t pass the @media query test without CSS.
Second, I pasted just your HTML above into the project, and it actually passes the “None of your header elements should be empty” section. So unless the code above is different from the code you are using, it should pass that.
Lastly regarding you not passing the .nav-link sections, the code above doesn’t have any .nav-link classed elements. Challenge requirement 10 is this below:
10) Additionally, the navbar should contain link (a) elements with the class of 'nav-link'....
So if you don’t assign .nav-link to any elements, you’re going to fail all the .nav-link related tests. And I don’t show any of your links have a class:
So you may want to look over the code and correct these and continue on with the challenge. Let me know if Im missing something though or if you have additional questions.
@kinome79 thank you for your response. Unfortunately, I am still getting the same errors with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav id="navbar">
<header>Python</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Hello_World">Hello World</a></li>
<li><a class="nav-link" href="#Variables_and_Types">Variables and Types</a></li>
<li><a class="nav-link" href="#If_Else">If Else</a></li>
<li><a class="nav-link" href="#Why_Python?">Why Python?</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>Python is a programming language written in the language of C. It is well-known for being easy to understand and use.</p>
<p>Python does not have static typing or strong type-checking(As of recent, it does have type-checking, but it's "weak" in comparisson to Java's type-checking), and while it allows for Object-Oriented programming it is not required like it is in Java.</p>
</section>
<section class="main-section" id="Hello_World">
<header>Hello World</header>
<p>Writing code to output the text "Hello World" has never been easier than it is in Python</p>
<p>It is simple! Here is how it is done</p>
<code>print("Hello World")</code>
</section>
<section class="main-section" id="Variables_and_Types">
<header>Variables and Types</header>
<p>To store values in Python, you can assign them to a variable. By doing this, you can call these variables later in your program instead of rewriting the data you want</p>
<p>Let's practice by adding two numbers together using variables we've assigned them to</p>
<pre><code>x = 10
y = 20
print(x + y)
Output:
30</code></pre>
<p>You can assign many kinds of data to variables, each different kind is called a type. In the example above x and y are ints</p>
<p>Here are some important types to know in Python</p>
<ul>
<li>int (integer): a positive or negative whole number with no decimal point.</li>
<li>float (float): a positive or negative number with decimal points (ex: 1.1)</li>
<li>str (string): any text surronded by single or double quotes('' or "")</li>
<li>bool (boolean): has only 2 values: True or False</li>
<li>NoneType: the type of anything that does not contain a value, such as print()</li>
</ul>
<pre><code>string = "Hello World"
floatingPointNumber = 2.5
print(type(string))
print(type(floatingPointNumber))
Output:
<class 'str'>
<class 'float'>
</code><pre>
<p>Here is an example of a NoneType</p>
<pre><code>print(type(print("Hello World")))
#We are passing in print("Hello World") into the type() function
Output:
<class 'NoneType'></code></pre>
</section>
<section class="main-section" id="If_Else">
<header>If Else</header>
<p>Note: A comment is some text in a program that is ignored by the computer and is only used for the person viewing the code</p>
<code>#Placing '#' before any text will turn it into a comment</code>
<pre><code>"""
Using 3 double quotes will allow for a multi-line comment.
It is commonly used within the first lines of a function
definition to document what the function does
"""</code></pre>
<p>Any code placed after an if statement will only run if the condition is True</p>
<pre><code class="indent">if x > y:
print(x)</code></pre>
<p>This code will only print x if x > y. If it isn't greater, it will do nothing. If we want to do something when the condition (x > y) is False, we use else</p>
<pre><code class="indent">if x > y:
print(x)
else:
print(y)</code></pre>
<p>Now we will print the value of y if x is not greater than y</p>
</section>
<section class="main-section" id="Why_Python?">
<header>Why Python?</header>
<p>Python allows a user-friendly approach to programming, without sacrificing the complexity that is unique to programming. If there's a program you want to write, it can be written in 5 lines of code while it may be 15 lines of code in another language. When a task requires a programming solution, Python should always be the first language you turn to.
</section>
</main>
</body>
</html>
I did indeed have the class=“nav-link” in all my elements before, so I did pass all the .nav-link related tests except 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”)." I probably had it like that when I copied it because I was testing things to try and solve my problem, that’s my bad. Also, here is my CSS, I am passing the @media test.
Hopefully this gives you a clearer picture. Seing that you are passing the header test just makes me more confused . Do you see any reason I should be failing the other test? If you can please give this one more look.
Thank you so much,
Fox
Going to have a look now, but one of the first things I noticed was that in the preview, your nav bar isn’t visible… perhaps a CSS setting is set to hide it or something which might be failing the tests related to it:
In your @media query, you have a line that hides the nav-bar. If the nav-bar isn’t visible well the test can’t see it as its likely reading the output your code is generating.
I removed the line that hides your nav-bar, and that allowed me to pass all tests. Nice move in hiding a Nav-Bar if the screen isn’t big enough for it to be practical, but not so good for a test that is checking that it’s present.
Thank you so much!
This was exactly what it was. I had thought about it but never tested it so I just never checked. I fixed it while keeping the ability for the nav bar to disappear when the page is too small by changing visibility: hidden; to display: none; when my media condition is satisfied. Again, thank you so much!
There is one more issue that test are not picking up, but can be pretty important in technical documentation page you are building. You haven’t closed <pre> tag started on line 52.
Ah I see, that’s a silly mistake, I’m surprised the editor didn’t pick it up. Thanks for letting me know! It doesn’t show anything weird on the actually page itself either
. Do you see any reason I should be failing the other test? If you can please give this one more look.