Nav bar links

Get Help
#1

Hi guys not sure if you can see the image. But my problem is that I cant get my links in the nav bar to actually link to the pages. The links are showing under the nav bar and it says page not found

Capture
Capture1218×772 68.7 KB

#2

Do you have the pages [files] default.asp and projects.asp and so on
in the same directory [folder] ?

#3

I dont think so? How do i create a folder? Sorry really new to this!

#4

You don’t need another folder, but you need to create the appropriate files.
If its a Codecademy workspace, then, close to the top left, there’s a + button that lets you create/add a file.

#5

Woo thats very flash! Thanks

#6

image
image1671×501 48.5 KB

do i just put a <a href=“link here” type thing in?

#7

yes, you can;
but you’ll probably want another webpage file (like the html file or .asp file you mentioned) too.

#8

Kia Ora,

I’m not sure what you’re trying to do exactly… are you intending for those links to bring the user to the different sections of your page? If so, take a look at this code:

<!DOCTYPE html>
<html>
    <head>
        <title>Sophie Napier</title>
        <link href="style.css" rel="stylesheet">
    </head>

    <body>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="./projects.html">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </div>

        <div class="main-content">
            <h1>Hello friends!</h1>
            <p>This is my first website.</p>

            <h2 id="about">About Me</h2>
            <p>I studied a bachelor of...</p>

            <h2 id="contact">Contact</h2>
            <p>My LinkedIn details are...</p>
        </div>
    </body>
</html>

In the nav section, you’ll see three different types of link:

  • <a href="#"> just links back to the top of the current page.

  • <a href="./projects.html"> is a link to another file within the same directory as your current one.

  • both <a href="#contact"> and <a href="#about"> will bring you to those sections on the current page. But in order for these links to work, you have to give the corresponding sections the same id, as in <h2 id="contact">, and <h2 id="about">.

I hope this helps a little ?

Happy coding :slight_smile:

#9

Trying to link to a different page on the same website. So do I use ./projects.html?

#10

Well that didnt work :joy:

problwm
problwm1609×454 83.2 KB

#11

Have you created a portfolio.html file and placed it in the same folder as index.html? In the screen capture image above, I can see that you have three files in the ‘Projects’ folder, index.html, script.js, and style.css. You will need to add portfolio.html, and then the link should work.

As an aside, if ./portfolio.html doesn’t work, try just portfolio.html instead. They should both point to the current directory.

It’s nice to see another resident of Aotearoa on the Codecademy forums, by the way! :slight_smile:

#12

Create html file and save it. Then you can download it from of your choice of game or app

#13

:smiley: I have realised I can actually share code link! LOL I’m a spoon
https://www.codecademy.com/workspaces/630935997b93e12c7b97a1fa

1 Like
#14

if you want <a href="#about-me">About me</a> to link to something else on the the same page, then you have to have an element that has the attribute id="about-me" somewhere else in the webpage
(that’s what would be linked to)

#15

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.