Tell us what’s happening:
I keep receiving 2 errors :
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.
and
Each .nav-link should have an href attribute that links to its corresponding .main-section (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).
I have stared at this code for hours. Help please
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Documentation</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav id="navbar">
<header>Java Documentation</header>
<ul>
<li><a class="nav-link" href="#getting_started_with_java">Getting Started with Java</a></li>
<li><a class="nav-link" href="#java_entry_point">Java Entry Point</a></li>
<li><a class="nav-link" href="#printing_to_the_console">Printing to the console</a></li>
<li><a class="nav-link" href="#declaring_functions">Declaring Functions</a></li>
<li><a class="nav-link" href="#object_oriented_programming">Object Oriented Programming</a></li>
</nav>
<main id="main-doc">
<section class="main-section" id="#getting_started_with_java">
<header>Getting Started with Java</header>
<p>Steps to get started</p>
<ul>
<li>Download Java</li>
<li>Download Java SDK</li>
<li>Integrated Development Enviroment (IDE)</li>
<li>Start a project within the IDE</li>
<li>Code "Hello World"</li>
</ul>
</section>
<section class="main-section" id="java_entry_point">
<header>Java Entry Point</header>
<p>Regardless of the case, the beginning of a program is called entry point.</p>
<p>It is catorgized by its (String[] arg) as a parameter to the function </p>
<pre>
<code>
public class MyMainFunction {
/* Java main fuction */
public static void main String[] arg{
}
}
</code>
</pre>
<p>As you can see the main function within a class which is part of the object oriented structure of the Java projects.
</p>
</p>The name of the project is therefore "MyMainFuction."
</section>
<section class="main-section" id="#printing_to_the_console">
<header>Printing to the console</header>
</p>JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the window.print() method
</p>
<p>I know this can be cumbersome, but this is the way it is done.
</p>
<pre>
<code>
public class MyMainFunction {
/* Java main fuction */
public static void main String[] arg{
System.out.println("Hello World");
}
}
</code>
</pre>
<p>In this example we are printing out "Hello World" to the console when we run the program</p>
</section>
<section class="main-section" id="#declaring_functions">
<header>Declaring Functions</header>
<p>A function declaration defines a named function. This type of function can be called before it is defined due to hoisting. Here is an example.
</p>
<img src="https://cdn.educba.com/academy/wp-content/uploads/2020/02/JavaScript-Function-Declaration.jpg" alt="java-method-img" class="image"/>
<p>Copy Code:</p>
<pre>
<code>
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
</code>
</pre>
</section>
<section class="main-section" id="#object_oriented_programming">
<header>Object Oriented Programming</header>
<p>
Java was among the first object-oriented programming languages. An object-oriented programming language organizes its code around classes and objects, rather than functions and commands.
<p>
Most modern programming languages, including C++, C#, Python, and Ruby are object-oriented.
</p>
<p> Here is an example:
</p>
<pre>
<code>
// Defining object
let person = {
first_name: 'Mukul',
last_name: 'Latiyan',
//method
getFunction: function () {
return (`The name of the person is
${person.first_name} ${person.last_name}`)
},
//object within object
phone_number: {
mobile: '12345',
landline: '6789'
}
}
console.log(person.getFunction());
console.log(person.phone_number.landline);
</code>
</pre>
<p>We use this class by doing the following:
</p>
<pre>
<code>
// Using a constructor
function person(first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
}
// Creating new instances of person object
let person1 = new person('Mukul', 'Latiyan');
let person2 = new person('Rahul', 'Avasthi');
console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);
</code>
</pre>
</section>
</p>
</main>
<footer>
</footer>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
background-color: rgb(234, 234, 234);
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: arial;
}
section {
margin-top: 40px;
}
#navbar {
background-color: white;
width: 100%;
border-bottom: 1px solid;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
}
#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
font-size: 18px;
transition: width .3s;
}
#navbar a:hover {
font-weight: 500;
text-indent: 5px;
}
p {
margin: 10px;
}
ul {
margin-left: 30px;
}
#main-doc {
margin: 0 auto;
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: 500;
}
code {
display: block;
text-align: left;
white-space: pre;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
background-color: white;
padding: 0 15px;
margin: 10px;
border-radius: 5px;
}
.image {
width: 75%;
margin-left: 20px;
}
footer {
padding: 30px;
text-align: center;
color: #4d4e53;
}
@media (max-width: 768px) {
body {
flex-direction: row;
}
#navbar {
width: 300px;
position: fixed;
height: 100%;
}
#main-doc {
margin: 0 20px;
margin-left: 350px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page