Non-Core Functionality, Sophisticated Digital Effects

JQuery
In order to upgrade our websites and make them for fancy we can use JQuery to perform animations and other tasks:

w3 Schools has a whole section about how to use JQuery:
https://www.w3schools.com/jquery/default.asp 

Task: Animate some text

1.) Create an new HTML page with a button and some text under <p> code
2.) Get the button to link to a function
3.) Include the following at the top of your code:
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
This Links the page to the Jquery code
3.) Enter this code in your function
$("p").toggle(1000);
​4.) Click the button to see what happens

​The code should appear and disappear.
Bonus Tasks: Using classes or ID's enter two lines of text under a <p> tag

Make it so that only the top line of text disappears based on either a class or id.

Importing Headers and Footers - Industry Standards for HTML Code, Efficiency

Imagine for a second that your website had 100 pages.

You can create the headers and copy and paste as a template...

However imagine you made a mistake.

You would have to go to each individual page and modify the header or footer.

We can actually import the header and footer using JavaScript so that we only have to make it once
Task: Load the header using JavaScript

1.) Make a separate file called header.html (include the doctype).
2.) Copy the header code into that html file
3.) Create div tags where the header used to be
<div id="header"></div>
4.) Import the jquery library that helps with imports, by putting this code at the top of your html code
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
5.) Insert this code to load the header:
// When document is ready, load header file into header id
$(document).ready(function () {
    console.log("ready!");
    $("#header").load("header.html");
});

Task: Use the same process to import the footer
Problem: If you try and open the website outside of brackets the import will not work.
(browsers do not like opening local files).
​Solution: 
1.) Create a Github Account
https://github.com/
​2.) Upload the header.html
​3.) Find the link, by clicking the raw button e.g. https://raw.githubusercontent.com/FreybergDigital/website/master/header.html
4.) Change header.html to the github link.
​

Bootstrap v4

To make a website quicker way of developing fancy websites 

1.) You will need to import the following different scripts:
Jquery (if you don't have it already):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Bootsrap JS:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

2.) Go to w3schools and have a go at some of the tutorials to make some cool things on your site.
https://www.w3schools.com/bootstrap5/