Navigate Within The Same Page: Cannot GET /

October 18, 2022

Hello I’m trying to make a really simple app to test navigation in page.
I have on my web page two link; one called section1 and the other section2, that are displayed at the left of my screen with a width of 100px; I vant a different background and message display on the rest of the screeen evetytime I click on one of them

For now I only get the following error:

Cannot GET /section1

Or:

Cannot GET /section2

Here is my index.html:

<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <h1>In Page Navigation Tutorial</h1>

        <ul>
            <li><a href="section1">section 1</li>
            <li><a href="section2">section 2</li>
        </ul>

        <div class="content">
            <section id="section1"> 
                <h2>section 1</h2>
            </section>
            <section id="section2">
                <h2>section 2</h2>
            </section>
        </div>
    </body>
</html>

And here my style.css:

ul{
    background-color: crimson;
    height: 100%;
    width: 100px;
}
ul li a{

    color: wheat;
}
ul li a:hover{

    color: aqua;
}
section{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#section1{
    background-color: plum;
}
#section2{
    background-color: palegreen;}

>Solution :

Just add # to href ..

<a href="#section1"> Section1</a>

ul {
  background-color: crimson;
  height: 100%;
  width: 100px;
}

ul li a {
  color: wheat;
}

ul li a:hover {
  color: aqua;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section1 {
  background-color: plum;
}

#section2 {
  background-color: palegreen;
}

<h1>In Page Navigation Tutorial</h1>

<ul>
  <li><a href="#section1">section 1</li>
            <li><a href="#section2">section 2</li>
        </ul>

        <div class="content">
            <section id="section1"> 
                <h2>section 1</h2>
            </section>
            <section id="section2">
                <h2>section 2</h2>
            </section>
        </div>