in the course of building a technical documentation page, my codes could not run at some point. my problem is where am asked to do this:
click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id). i got confused.
Also i don’t know how to make my navbar visible by the left.
1 Like
Please post your code.
Use the “preformatted text” tool in the editor (</>) to add backticks around the code.
this is what made my project not to execute: When you click on a navbar element, the page should navigate to the corresponding section of the #main-doc element (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id, and contains the corresponding header).
but this is my code so far:
body {
width: 100%;
height: 100vh;
margin: 0;
backgrounf-color: #1b1b32;
font-family: Tahoma;
font-size: 16px;
}
h1, p, h2, h3, h4, h5 {
margin: 1em auto;
text-align: left;
font-family: Verdana, Tahoma;
}
navbar {
text-align: left;
}
@media (max-width: 600px) {
background-color: red;
}
.nav-link .hello_world:hover {
cursor: pointer;
}
please what is the problem
Please post your HTML as well.
this is my HTML codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title>Technical Documentation</title>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>
<h1>Introduction</h1>
</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</section>
<section class="main-section" id="what_you_already_know">
<header>
<h2>What you already know</h2>
</header>
<ul>This guide assumes you have the following basic background:
<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 JavaScript.</li>
</ul>
</section>
<section class="main-section" id="javascript_and_java">
<header>
<h3>JavaScript and Java</h3>
</header>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p>
</section>
<section class="main-section" id="hello_world">
<header>
<h4>Hello World</h4>
</header>
<ul>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</ul>
<code>function greetMe(yourName) { alert("Hello " + yourName); }</code>
<code>greetMe("World");</code>
</section>
<section class="main-section" id="declaring_variables">
<header>
<h5>Declaring Variables</h5>
</header>
<p>You can declare a variable in three ways:</p>
<p>With the keyword var. For example,</p>
<code>var x = 42.</code>
<p>This syntax can be used to declare both local and global variables.</p>
<p>By simply assigning it a value. For example,</p>
<code>x = 42</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</p>
<p>With the keyword let. For example,</p>
<code>let y = 13</code>
</section>
</main>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="hello_world">Hello World</a>
<a class="nav-link" href="declaring_variables">Declaring Variables</a>
I can’t see a closing tag for this nav element. That would likely be why it isn’t visible.
The hashtag is also missing for some of the href values here. That will stop the nav links working correctly.
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="hello_world">Hello World</a>
<a class="nav-link" href="declaring_variables">Declaring Variables</a>
You may want to try a html validator like the linked one to help catch syntax errors like missing closing tags.
please its still showing me this: click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
Okay, show me your updated html code, I’ll take a look at it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title>Technical Documentation</title>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>
<h1>Introduction</h1>
</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</section>
<section class="main-section" id="what_you_already_know">
<header>
<h2>What you already know</h2>
</header>
<ul>This guide assumes you have the following basic background:
<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 JavaScript.</li>
</ul>
</section>
<section class="main-section" id="javascript_and_java">
<header>
<h3>JavaScript and Java</h3>
</header>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p>
</section>
<section class="main-section" id="hello_world">
<header>
<h4>Hello World</h4>
</header>
<ul>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</ul>
<code>function greetMe(yourName) { alert("Hello " + yourName); }</code>
<code>greetMe("World");</code>
</section>
<section class="main-section" id="declaring_variables">
<header>
<h5>Declaring Variables</h5>
</header>
<p>You can declare a variable in three ways:</p>
<p>With the keyword var. For example,</p>
<code>var x = 42.</code>
<p>This syntax can be used to declare both local and global variables.</p>
<p>By simply assigning it a value. For example,</p>
<code>x = 42</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</p>
<p>With the keyword let. For example,</p>
<code>let y = 13</code>
</section>
</main>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello World</a>
<a class="nav-link" href="#declaring_variables">Declaring Variables</a>
this is the updated HTML codes
The closing tag for this nav element is still missing
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello World</a>
<a class="nav-link" href="#declaring_variables">Declaring Variables</a>
Also capitalising #Hello_world here will stop the nav-link working as the corresponding id="hello_world" doesn’t have a capital h. (I deleted my post where I brought up capitalisation because it was wrong, that was my mistake. Sorry for any confusion.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title>Technical Documentation</title>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>
<h1>Introduction</h1>
</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</section>
<section class="main-section" id="what_you_already_know">
<header>
<h2>What you already know</h2>
</header>
<ul>This guide assumes you have the following basic background:
<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 JavaScript.</li>
</ul>
</section>
<section class="main-section" id="javascript_and_java">
<header>
<h3>JavaScript and Java</h3>
</header>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p>
</section>
<section class="main-section" id="hello_world">
<header>
<h4>Hello World</h4>
</header>
<ul>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</ul>
<code>function greetMe(yourName) { alert("Hello " + yourName); }</code>
<code>greetMe("World");</code>
</section>
<section class="main-section" id="declaring_variables">
<header>
<h5>Declaring Variables</h5>
</header>
<p>You can declare a variable in three ways:</p>
<p>With the keyword var. For example,</p>
<code>var x = 42.</code>
<p>This syntax can be used to declare both local and global variables.</p>
<p>By simply assigning it a value. For example,</p>
<code>x = 42</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</p>
<p>With the keyword let. For example,</p>
<code>let y = 13</code>
</section>
</main>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="#hello_world">Hello World</a>
<a class="nav-link" href="#declaring_variables">Declaring Variables</a>
</nav>
i have corrected the mistakes you mentioned but the codes are still not executing. plesase look at CSS as well please. thank you.
Check this id and nav link href. They need to be identical to work correctly.
<a class="nav-link" href="#what_you_should_already_know">What you already know</a>
<section class="main-section" id="what_you_already_know">
Is there a specific problem with your css you need help with? You mentioned the navbar wasn’t visible on the left.
I’d check this media query. It doesn’t target a specific class or element, this means it won’t work correctly. There’s also a spelling error in your css you need to correct elsewhere.
There are also css validators to check for css errors.
@media (max-width: 600px) {
background-color: red;
}
Please provide all of your current code. If it isn’t sn an online IDE, then upload it to a github repo, something you need to learn how to do anyway.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.