Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

My @media query was passing, but after I changed some class elements, now it won’t pass. I cannot figure out why. Tried moving it to the bottom, but it still doesn’t work.

@media (any-hover: hover) {
a:hover {
background-color: pink;
}
}

nav {
position: fixed;
min-width: 200px;
top: 0px;
left: 0px;
width: 250px;
height: 100%;
border-right: solid;
border-color: #111111;
background-color: #f5f3f3
}

html {
display: block;
}

html, body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: Times, Arial, Vernanda;
line-height: 1.5;
}

main {
display: block;
}

#main-doc {
position: absolute;
margin-left: 300px;
padding: 10px;
margin-bottom: 100px;
}

header {
font-weight: bold;
}

#navbar li {
display: block;
padding: 1rem;
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
font-size: 18px;
text-align: left;
}

nav>header {
position: relative;
border-bottom: solid 2px #111111
}

nav>ul {
postion: relative;
margin-left: 0;
display: block;
}

#navbar ul {
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}

header {
font-size: 24px;
}

p {
font-size: 14px;
}

code {
display: block;
background-color: #91F4F4;
}

.code-type {
font-weight: bold;
}

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

I think you should write @media(hover:hover) I looked into the documentation and I found it is written like this

3

That didn’t make a difference. Just as a note - the media query is working on the page, but it does not pass the final “You must use at least one media query” test. It did at first, but after I added some more CSS for aesthetics it no longer works. I don’t know what I could have done to make it fail.

4

Try adding a media query at the end of your code that changes sth in your layout when the width of the screen changes.

5

Good idea, but it’s still not passing the test.

6

Please share your html

7 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="./styles.css">
	<title>Coding Course Intro</title>
</head>

<body>
	<nav id="navbar">
		<header>Coding Course Intro</header>
			<ul>
				<li><a class="nav-link" href="#Introduction">Introduction</a></li>
				<li><a class="nav-link" href="#What_is_Coding?">What is Coding?</a></li>
				<li><a class="nav-link" href="#What_Does_Code_Look_Like?">What Does Code Look Like?</a></li>
				<li><a class="nav-link" href="#Other_Types_of_Code">Other Types of Code</a></li>
				<li><a class="nav-link" href="#Summary">Summary</a></li>
			</ul>
  </nav>
<main id="main-doc">
	<section id="Introduction" class="main-section">
		<header>Introduction</header>
			<p>Welcome to the world of coding! It may be an arduous journey, but it is a worthwhile one. </p>
			<p>Here is a brief overview of coding for you.</p>
  </section>

	<section id="What_is_Coding?" class="main-section">
		<header>What is Coding?</header>
			<p>Coding is what is used to get everything you see on your computer screen.  It is sort of the "behind-the-scenes" version of your display. </p>
			<p>There are many types of code.  We will start with the most common and best code to learn first: html.</p>
  </section>

	<section id="What_Does_Code_Look_Like?" class="main-section">
		<header>What Does Code Look Like?</header>
			<p>html is the language of the web.  You will see below an example of what html code looks like for the set up and title of this page.</p>
			     	<code ><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<title>Coding Course Intro</title>
</head></code>
			<p>html is great for putting text and images on the page, but in order to get the different styles and colors you see on the web, you need CSS. Here is an example of the CSS for this page's navigation bar.</p>
				<code>#navbar li {
    display: block;
    padding: 1rem;
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
    font-size: 18px;
    text-align: left;
}</code>
  </section>

	<section id="Other_Types_of_Code" class="main-section">
		<header>Other Types of Code</header>
			<p>There are a few other types of code you may hear about.  Below are some examples.</p>
      <p class="code-type">PYTHON</p>
				<code># This program prints Hello, world!

print('Hello, world!')</code>
			<p class="code-type">JAVA</p>
				<code>document.getElementById("demo").innerHTML = "Hello JavaScript!";</code>
			<p class="code-type">RUBY</p>
        <code># Variables and expressions.
a = 10
b = 3 * a + 2
printf("%d %d\n", a, b);</code>
<p>Below are some of the more advanced, lesser known coding languages:
				<ul>
					<li>C++</li>
					<li>Swift</li>
					<li>Golang</li>
					<li>R</li>
					<li>C#</li>
				</ul>
   </section>

	<section id="Summary" class="main-section">
		<header>Summary</header>
			<p>Coding knowledge will open you up to a whole world of opportunity in the computer programming space.  Don't forget to have fun!</p>
				
  </section>
	
</main>


</body>
</html>
8

hmm I dont see the issue just by glancing over it, I will try to dig deeper when have some more time later, but there are a few other issues in your css

No semicolon here

position is misspelled

Pretty sure the last font here is misspelled as well. Unless there is actually a font with that name, but I think you are looking for Verdana

9

Thanks for the help!

10

Weird, but I just ran the tests on my phone and it passed with no changes. I don’t know? I had already tried clearing the cache and that didn’t work so I’m at a loss, but I’m moving on! Thanks!

11

Apologies, I looked it over the day before yesterday but got side tracked with every thing else going on. Never could fund out why it wasn’t passing, but glad to hear it ended up working out for you

12

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