You do have some pages working right? You could start with that template (you can duplicate it and play with the copy), attach a resource to it, and open the resource to see how things are working.
For every little piece it has the danger to break everything. So for a Wayfinder call, you need a working webpage to put it in. If the page isn't working, then the call isn't going to help. Its certainly possible that a call like that could mess things up if done wrong, but we have to mitigate potential causes of the error. In this case, by the way, the wayfinder call calls to ID=0, which is going to return an error.
Let me break down the parts of the page:
<head> this is important stuff like your site's name and info for google, javascript goes in here and some calls to your css file or other local files.
<body> this is the main part, what you see when it opens.
Now, I think the biggest problem you have here are the two matching calls to chunks I guess:
[[$header_jk_html]]
[[$footer_jk_html]]
The first problem is I am almost sure they need to be inside the <html> or <body> tags, as BobRay said. The html is the webpage, I guess, with some technologies contained inside.
I suspect you may want to try something more like this:
/* BaseTemplate Code from book */
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[$header_jk_html]]
<h2>[[*longtitle]]</h2>
<!-- [[Wayfinder? &startId=`0` &level=`2`]] -->
[[*content]]
[[$footer_jk_html]]
</body>
</html>
And if it works, then take the comments off of Wayfinder and change the call to the right ID, see if it works, but you might need to make a <div> or a <li> for wayfinder
It takes time, but you will learn to distinguish the characteristics of the different code. Like, html has stuff like
You might want to read a bit about the CSS box model
https://hackernoon.com/css-box-model-45ecf4ac219e
What I think you will do finally is make a <div>, place it where you want it, and let the wayfinder output sit right inside