Help, Jquery Doesn't Work Here? What Can I Do To Fix It? (fi... - Digital Marketing Company | WordPress Web Design Services

I’m just starting out and this is my first time trying to make a website but I can’t use other people’s code. How do I fix this?

I want to use this plugin here: https://github.com/oriongunning/gridder

Here’s what I have in my work:

<!doctype html>
<html>

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

</head>

<!-- Gridder navigation -->

<body>
    <ul class="gridder">

        <!-- You can load specify which content is loaded by specifying the #ID of the div where the content is  -->
        <li class="gridder-list" data-griddercontent="#content1">
            <img src="https://www.thesprucepets.com/thmb/jbD_0GJnIVGmnLve7QDe9hCDbPU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/Stocksy_txp33a24e10lxw100_Medium_214761-5af9d6d7875db900360440a7.jpg" />
        </li>
        <li class="gridder-list" data-griddercontent="#content2">
            <img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
        </li>
        <li class="gridder-list" data-griddercontent="#content3">
            <img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
        </li>

        <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
        <li class="gridder-list" data-griddercontent="/content.html">
            <img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
        </li>
    </ul>
    <div id="content1" class="gridder-content"> Content goes here... </div>
    <div id="content2" class="gridder-content"> Content goes here... </div>
    <div id="content3" class="gridder-content"> Content goes here... </div>
  
    
    <script src="Files/jquery-3.4.1"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="dist/jquery.gridder.min.js"></script>
    <script>
        $(function() {
            // Call Gridder
            $('.gridder').gridderExpander({
                scroll: true,
                scrollOffset: 30,
                scrollTo: "panel", // panel or listitem
                animationSpeed: 400,
                animationEasing: "easeInOutExpo",
                showNav: true, // Show Navigation
                nextText: "Next", // Next button text
                prevText: "Previous", // Previous button text
                closeText: "Close", // Close button text
                onStart: function() {
                    //Gridder Inititialized
                },
                onContent: function() {
                    //Gridder Content Loaded
                },
                onClosed: function() {
                    //Gridder Closed
                }
            });
        });
    </script>

</body>
<!-- Gridder content --></html>

I have jquery downloaded on my computer as shown here: https://www.youtube.com/watch?v=kwb_YKRiq6c

I also used this tutorial as a guide: https://www.youtube.com/watch?v=MaEyWOI7Abs

I’m hoping it’ll look something like this in the end: http://oriongunning.github.io/gridder/

Here’s a picture of my code: