First, a disclaimer:
While working on my portfolio, one of the more important pieces of feedback I received involved the ability to navigate quickly to different points of the page. This user wanted the ability to quickly take a peek at the final designs, and then start over.
It took quite a bit of playing around, looking up snippets of code, and receiving help from my mentor, but a solution arose, and I wanted to share it with the world to save others from my fate. (It really wasn’t that bad, but this will be easier!)
For those of you on a schedule, or who already know your way around a bit of code
The full code is at the bottom, copy and paste, customize and use!
First the Annoying Part
The first step is going through your page, and inserting a code block directly above any item you want to use as an anchor.
In the code block type:
Where text is the title of that anchor. If the title is more than one word, make sure to use dashes instead of spaces.
<div id= “Puppy-Playtime-Party”></div>
This has to be done for every single anchor you want to use, and make sure to give them easy titles because there is no easy way to go see what you assigned it! (Or even better, write down the titles, including capitalization.)
Connecting the Anchors to Text
In order to do these next steps, we must make a code block at the very top of the page.
Now we are going to link the anchors we created to text (don’t worry if things look weird at this stage, the pretty part comes next!)
First type a title for your menu using:
<h1> Title </h1>
(You can use h2, h3 or whatever you want)
<h1> Speedy Nav </h1>
Then for the actual links we need to use: