Tell us what’s happening:
why it won’t linked while my nav-link href and ID of the main sections are mathced but it wont worked out?
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">
<link rel="stylesheet" href="./styles.css">
<title>Java Documentationn Page</title>
</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>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="#Getting_Started_with_Java">
<header>Getting Started with Java</header>
<p>steps in getting started</p>
<ol>
<li>Download Java</li>
<li>Download Java SDK</li>
<li>Get an Integrated Development Environtment</li>
<li>Start a Project within the IDE</li>
<li>Code up "hello World" and run the code</li>
</ol>
</section>
<section class="main-section" id="#Java_Entry_Point">
<header>Java Entry Point</header>
<p>The entry point to a java aplication is the main fuction</p>
<p>
it is categorized by its <code>(string[] arg)</code> as a parameter to the function
</p>
<pre>
<code>
public class MyMainFunction {
/* Java main function example */
public static void main(string[] args) {
}
}
</code>
</pre>
<p>
as you can see the main function is wrapped within a class which is
part of the object oriented structure of Java Projects.
</p>
<p>The name of the project is therefore "MyMainFunction"</p>
</section>
<section class="main-section" id="#Printing_to_the_console">
<header>Printing to the console</header>
<p>In order to print to the console. we use System.out.println.</p>
<p>
I know, it is very long and cumbersome, but this is the way it's done.
</p>
<pre>
<code>
public class MyMainFunction {
/* Java main function example */
public static void main(string[] args) {
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>
Function are actually called methods in Java. Here is an example of
how to declare a Java method.
</p>
<img src="https://techvidvan.com/tutorials/wp-content/uploads/sites/2/2020/02/example-of-java-method-declaration.jpg"
alt="java-method-img" class="image" />
<p>some copiable code:</p>
<pre>
<code>
Public static void myFunction(String name, int age )
{
// function code
}
</code>
</pre>
</section>
<section class="main-section" id="#Object_Oriented_Programming">
<header>Object Oriented Programming</header>
<p>Java is known as an object oriented programming language.</p>
<p>
This means that it it easy to represent entities as objects by using
classes and encapsulation.
</p>
<p>
An example of this might be a student class to represent a student.
</p>
<pre>
<code>
public class student{
/* Student properties */
private string name;
private int age;
/* constructor */
public Student(string name, int age){
this.name = name;
this.age = age;
}
/* Getter method */
public String getName() {
return name;
}
/* Setter method */
publiic void setName(string name) {
thiis.name = name;
}
}
</code>
</pre>
<p> We use this class by doing the following:</p>
<pre>
<code>
Student student1 = new Student("jimmy" 19);
String jimmyName = student1.getName();
student1.setname("kevin");
String kevinName = student1.getName();
</code>
</pre>
</section>
</main>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: rgb(234, 234, 234);
display: flex;
flex-direction: column;
min-height: 100vh;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
section {
margin-top: 40px;
}
#navbar {
background-color: #fff;
width: 100%;
border-bottom: 1px solid;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid black;
list-style: none;
}
#navbar a{
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
font-size: 18px;
transition: text-indent 0.3s ease-in-out;
}
#navbar a:hover {
font-weight: 500;
text-indent: 5px;
}
p {
margin: 10px;
}
ol {
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: #fff;
padding: 0 15px;
margin: 10px;
border-radius: 5px;
}
.image {
width: 100%;
}
footer {
padding: 30px;
text-align: center;
color: grey;
}
@media only screen and (min-width: 815px) {
body {
flex-direction: row;
}
#navbar {
width: 300px;
height: 100%;
position: fixed;
resize: horizontal;
overflow-x: scroll;
}
#main-doc {
margin: 0 20px;
margin-left: 350px;
}
.image {
width: 70%;
margin-left: 20px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page