Tell us what’s happening:
I can’t seem to find the error in my code. It keeps showing “Each .main-section should have an id that matches the text of its first child,having any spacess in the child text replaced with underscore for the id’s” and “Each .nav-link should have text that corresponds to the header text of its related section”
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documentation Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav id="navbar">
<header>JS Documentation</header>
<ul>
<li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
<li><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a></li>
<li><a class="nav-link" href="#Hello_World">Hello World</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="#Function_Declarations">Function Declarations</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="What_you_should_already_know">
<header><strong>What you should already know</strong></header>
<p>This guide assumes you have the following basic background:
<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 JavaScript.</li>
</ul>
</p>
</section>
<section class="main-section" id="Javascript_and_Java">
<header><strong>Javascript and Java</strong></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 LiveScript to JavaScript.</p>
<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variablrs, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.</p>
</section>
<section class="main-section" id="Hello_World">
<header><strong>Hello World</strong></header>
<p>
To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World")
</code>
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p>
</section>
<section class="main-section" id="Variable_Scope">
<header><strong>Variable Scope</strong></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.</p>
<code>
if (true) { var x = 5; } console.log(x); // 5
</code>
<p>
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.</p>
<code>
if (true) { let y = 5; } console.log(y); // ReferenceError: y is
not defined
</code>
</section>
<section class="main-section" id="Global_Variables">
<header><strong>Global Variables</strong></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.</p>
<p>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 class="main-section" id="Function_Declarations">
<header><strong>Function Declarations</strong><header>
<p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:
<ul>
<li>The name of the function.</li>
<li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li>
<li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
</ul>
</p>
<code>
function square(number) { return number * number; }
</code>
<p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.</p>
<code>return number * number;</code>
</section>
<section class="main-section" id="Reference">
<header><strong>Reference</strong></header>
<p>
<ul>
<li>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>.</li></p>
</ul>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: