Tell us what’s happening:
I am frustrated as I have been working on this for forever and stuck on 8. - Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores(_) for the id’s.
I literally took my titles down to one letter and it’s still failing. What am I not seeing here?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<header>
<h1>Technical Documentation</h1>
</header>
<ul>
<li><a href="#A" class="nav-link">A</a></li>
<li><a href="#B" class="nav-link">B</a></li>
<li><a href="#C" class="nav-link">C</a></li>
<li><a href="#D" class="nav-link">D</a></li>
<li><a href="#E" class="nav-link">E</a></li>
</ul>
</nav>
<!-- Main Content -->
<main id="main-doc">
<!-- Section 1: Should Know-->
<section class="main-section" id="A">
<header><h2> A </h2></header>
<p>This guide assumes you have the following basic background:</p>
<ul>
<li>Library of objects</li>
<li>Language elements</li>
<li>Control structures</li>
</ul>
</section>
<!-- Section 2: JavaScript and Java-->
<section class="main-section" id="B">
<header><h2>B</h2></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>
<ul>
<li>Small and lightweight</li>
<li>Kind and Considerate</li>
<li>Joyful and Triumphant</li>
</ul>
<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.</p>
<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, 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 3: Hello World-->
<section class="main-section" id="C">
<header><h2>C</h2></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.
</p>
<p>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>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
</section>
<!-- Section 4: Constants -->
<section class="main-section" id="D">
<header><h2>D</h2></header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</p>
</section>
<!-- Section 5: Declaring Variables -->
<section class="main-section" id="E">
<header><h2>E</h2></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. </p>
<p>When you declare a variable within a function, it is called a local variable, because it is available only within that function<./p>
</section>
</body>
</main>
</html>
/* file: styles.css */
/* Basic Styling */
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1, h2, h3{
color: #333;
}
ul{
list-style-type: none;
padding-left: 0;
}
/* NavBar Styles */
#navbar{
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100vh;
padding: 10px;
box-sizing: border-box;
}
#navbar header h1{
font-size: 1.5em;
margin-bottom: 20px;
}
#navbar us{
padding: 0;
}
#navbar .nav-link{
display: block;
padding: 10px;
font-size: 1.2em;
}
#navbar .nav-link:hover{
background-color: gray;
}
/* Main Content */
#main-doc{
margin-left: 260px;
padding: 20px;
}
.main-section{
margin-bottom: 50px;
}
.main-section header{
margin-bottom: 20px;
}
.main-section h2{
font-size: 1.8em;
}
.main-section p{
font-size: 1.1em;
line-height: 1.6em;
}
.main-section code{
display: block;
margin: 10px 0;
padding: 10px;
border-radius: 1px;
}
/* Media Queries */
@media (max-width: 768px){
#navbar {
width: 100%;
position: relative;
height: auto;
}
#main-doc{
margin-left: 0;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15
Challenge Information:
Build a Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-technical-documentation-page/build-a-technical-documentation-page`Preformatted text`
