Tell us what’s happening:
My project seems to fail the media query test even though I linked the styles.css already and have a media query in it. Sorry for the really huge length of code.
I do note that I have added an external .css for trying out highlight.js, and the test seems to pass if I remove highlight.js, is this a bug or a mistake on my part?
As a side note, sorry if this is probably the wrong section for it, but I really do want advice and opinions on my code, for me it seems very cluttered and ugly, and I would love to learn clean code in HTML and CSS.
Your code so far
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<link rel="stylesheet" href="styles.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<title>JavaScript Technical Documentation</title>
</head>
<body>
<header>
<nav id="navbar">
<header id="nav-header">
<h1><i class="fa-brands fa-square-js"></i> JavaScript Docs</h1>
</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Prerequisites">Prerequisites</a></li>
<li><a class="nav-link" href="#Java_and_Javascript">Java and Javascript</a></li>
<li><a class="nav-link" href="#Hello_World!">Hello World!</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li>
<li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
<li><a class="nav-link" href="#Global_variables">Global variables</a></li>
<li><a class="nav-link" href="#Constants">Constants</a></li>
<li><a class="nav-link" href="#Data_types">Data types</a></li>
</ul>
</nav>
</header>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header>
<h1>Introduction</h1>
</header>
<p>JavaScript is a programming language that allows you to implement complex things on web pages. Every
time a web page does more than just sit there and display static information for you to look
at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video
jukeboxes, or more—you can bet that JavaScript is probably involved.</p>
</section>
<section id="Prerequisites" class="main-section">
<header>
<h1>Prerequisites</h1>
</header>
<p>
JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before
attempting to learn JavaScript, you are strongly advised to get familiar with at least these two
technologies first, and perhaps others as well. Start by working through the following modules:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting
started with the Web</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to
HTML</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">Introduction to CSS</a>
</li>
</ul>
</p>
</section>
<section id="Java_and_Javascript" class="main-section">
<header>
<h1>Java and Javascript</h1>
</header>
<p>
Java and JavaScript are completely different languages. JavaScript is a dynamically typed programming
language with less rigid syntax around declaring variables. With JavaScript, you don't have to specify
what type of data you're saving to a variable. You can also reassign variables to values with different
data types. <br><br> On the other hand, Java is a statically typed programming language with rigid
syntax around
declaring variables. With Java, you have to specify the types of values you'll be saving to a specific
variable. Once you declare a variable as a particular type of data (like a String), it must remain such
for its entire lifetime.
</p>
</section>
<section id="Hello_World!" class="main-section">
<header>
<h1>Hello World!</h1>
</header>
<p>
To get started with writing JavaScript, open the Scratchpad and write your first "Hello World!"
JavaScript code:
</p>
<pre><code class="language-js">function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></pre>
</section>
<section id= "Variables" class="main-section">
<header>
<h1>Variables</h1>
</header>
<p>You use variables as symbolic names for values in your application. The names of variables, called
identifiers, conform to certain rules. <br><br>
A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent
characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the
characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase). <br><br>
You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode
escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and
_name.
</p>
</section>
<section id="Declaring_variables" class="main-section">
<header>
<h1>Declaring variables</h1>
</header>
<p>You can declare a variable in three ways: <br><br>
With the keyword var. For example,
<pre><code>var x = 42</code></pre>
This syntax can be used to declare both local and global variables. <br><br>
By simply assigning it a value. For example,
<pre><code>x = 42</code></pre>
This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this
variant. <br><br>
With the keyword let. For example,
<pre><code>let x=42</code></pre>
This syntax can be used to declare a block scope local variable. See Variable scope below.
</p>
</section>
<section id= "Variable_scope" class="main-section">
<header>
<h1>Variable scope</h1>
</header>
<p>
When you declare a variable outside of any function, it is called a global variable, because it is
available to any other code in the current document. When you declare a variable within a function, it
is called a local variable, because it is available only within that function. <br><br>
JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared
within a block is local to the function (or global scope) that the block resides within. For example the
following code will log 5, because the scope of x is the function (or global context) within which x is
declared, not the block, which in this case is an if statement.
<pre><code>if (true) { var x = 5; } console.log(x); // 5</code></pre>
This behavior changes, when using the let declaration introduced in ECMAScript 2015.
<pre><code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined</code></pre>
</p>
</section>
<section id="Global_variables" class="main-section">
<header>
<h1>Global variables</h1>
</header>
<p>Global variables are in fact properties of the global object. In web pages the global object is window,
so you can set and access global variables using the window.variable syntax. <br><br>
Consequently, you can access global variables declared in one window or frame from another window or
frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared
in a document, you can refer to this variable from an iframe as parent.phoneNumber.</p>
</section>
<section id="Constants" class="main-section">
<header>
<h1>Constants</h1>
</header>
<p>
You can create a read-only, named constant with the const keyword. The syntax of a constant identifier
is
the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can
contain alphabetic, numeric, or underscore characters.
<pre><code>const PI = 3.14;</code></pre>
A constant cannot change value through assignment or be re-declared while the script is running. It has to
be initialized to a value. <br><br>
The scope rules for constants are the same as those for let block scope variables. If the const keyword is
omitted, the identifier is assumed to represent a variable. <br><br>
You cannot declare a constant with the same name as a function or variable in the same scope. For example:
<pre><code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5;
// THIS WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g; //statements }</code></pre>
However, object attributes are not protected, so the following statement is executed without problems.
<pre><code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue";</code></pre>
</p>
</section>
<section id="Data_types" class="main-section">
<header>
<h1>Data types</h1>
</header>
<p>The latest ECMAScript standard defines seven data types:</p>
<ul>
<li>Primitive data types:
<ul>
<li><strong>Boolean.</strong> True and False</li>
<li><strong>null</strong>. A special keyword denoting a null value.</li>
<li><strong>undefined</strong>. A top-level property whose value is undefined.</li>
<li><strong>Number</strong>. 42 or 3.14159.</li>
<li><strong>String</strong>. "Howdy"</li>
<li><strong>Symbol</strong> (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li>
</ul>
</li>
<li>and <strong>Object.</strong></li>
</ul>
</main>
</body>
</html>
CSS
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
*,
::before,
::after {
box-sizing: border-box;
}
#navbar,
main {
font-family: 'Inter', sans-serif;
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 100%;
padding: 2rem;
overflow-y: auto;
border-right: solid thin grey;
}
#navbar ul {
margin: 0;
padding-left: 0;
list-style: none;
}
#navbar a {
color: grey;
text-decoration: none;
}
#navbar li {
padding-top: 2rem;
padding: 1rem;
border-bottom: none;
}
.main-section {
margin-top: 3.2rem;
margin-left: 21rem;
margin-right: 3rem;
scroll-margin-top: 3.2rem;
}
.main-section header {
margin-bottom: -0.6rem;
}
.main-section h1 {
font-weight: 500;
}
.main-section p {
line-height: 1.5;
}
.main-section ul {
list-style: none;
line-height: 2;
}
.main-section ul a {
line-height: 1.5;
text-decoration: none;
}
.main-section:last-of-type {
margin-bottom: 3rem;
}
pre>code {
font-family: 'Cascadia Code', monospace;
}
@media (max-width: 768px) {
body {
padding: 2rem;
}
#navbar {
position: absolute;
background-color: white;
margin-bottom: 1rem;
width: 100%;
height: 200px;
overflow: hidden;
text-align: center;
padding: 0;
border-bottom: solid thin grey;
}
#navbar ul {
height: 100%;
overflow-y: auto;
}
#navbar ul > li:last-of-type {
margin-bottom: 1.5rem;
}
.main-section:first-of-type {
margin-top: 14rem;
}
.main-section {
margin: 0;
margin-top: 3.2rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
