From 6c8aaacda2dac984dbb949d6809973289f21ffec Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Sun, 9 Dec 2018 21:12:37 +0000
Subject: [PATCH] Update GCSE CS blog

---
 assets/global.css                             |  4 +
 computer-science-blog/css/main.css            | 14 +--
 .../css/presentation-imports.css              | 12 +++
 computer-science-blog/index.html              | 55 +++++------
 computer-science-blog/pages/cookies.html      | 42 ++++++---
 computer-science-blog/pages/css.html          | 94 +++++++++++++------
 computer-science-blog/pages/html.html         | 48 +++++++---
 computer-science-blog/pages/http.html         | 36 +++++--
 computer-science-blog/pages/https.html        | 34 +++++--
 computer-science-blog/pages/hyperlinks.html   | 42 ++++++---
 computer-science-blog/pages/js.html           | 50 +++++++---
 .../scripts/css-presentation-slide.js         |  4 +
 computer-science-blog/scripts/scripts.js      | 34 +++----
 13 files changed, 313 insertions(+), 156 deletions(-)
 create mode 100644 computer-science-blog/css/presentation-imports.css
 create mode 100644 computer-science-blog/scripts/css-presentation-slide.js

diff --git a/assets/global.css b/assets/global.css
index 52670c7..51f9eae 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -52,6 +52,10 @@ body {
     overflow: auto;
 }
 
+.app-bar {
+    position: absolute;
+}
+
 .main-content, footer {
     margin: 20px;
 }
diff --git a/computer-science-blog/css/main.css b/computer-science-blog/css/main.css
index 5a04122..b717c79 100644
--- a/computer-science-blog/css/main.css
+++ b/computer-science-blog/css/main.css
@@ -36,6 +36,9 @@
 }
 
 .carousel-inner .item {
+	height: 100%;
+	width: 100%;
+	border: none;
 	padding: 15px;
 }
 
@@ -46,24 +49,13 @@
 .carousel-indicators .active {
 	background-color: var(--mdc-theme-secondary);
 }
-/* ensure content below buttons doesn't cover them */
-.presentation-buttons-container {
-	width: 100%;
-	min-height: 32px;
-}
 
 /* revert changes made by Bootstrap */
-p {
-	margin: 0;
-}
 .carousel-indicators {
 	margin: 0;
 	position: initial;
 	width: auto;
 }
-.carousel h1, .carousel h2, .carousel h3, .carousel .h1, .carousel .h2, .carousel .h3 {
-	margin-top: 0;
-}
 
 /* add side margins depending on screen size */
 #main-content {
diff --git a/computer-science-blog/css/presentation-imports.css b/computer-science-blog/css/presentation-imports.css
new file mode 100644
index 0000000..287ebca
--- /dev/null
+++ b/computer-science-blog/css/presentation-imports.css
@@ -0,0 +1,12 @@
+html, body {
+    font-family: 'Roboto';
+    background: transparent;
+}
+
+/* revert changes made by Bootstrap */
+p {
+	margin: 0;
+}
+h1, h2, h3, .h1, .h2, .h3 {
+	margin-top: 0;
+}
diff --git a/computer-science-blog/index.html b/computer-science-blog/index.html
index 819f5a6..c2e0183 100644
--- a/computer-science-blog/index.html
+++ b/computer-science-blog/index.html
@@ -72,8 +72,7 @@
 
             <main class="main-content" id="main-content">
                <div class="mdc-top-app-bar--fixed-adjust">
-                   <p>The current date is: <span id="current_date">unknown</span></p>
-					<div id="blog-insert"></div>
+                   <p>The current date is <span id="current_date">unknown</span>.</p>
 					<h1>HTTP Introduction</h1>
                     <div class="presentation-container">
                         <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
@@ -84,18 +83,16 @@
                               <!-- Indicators -->
                               <ol class="carousel-indicators">
                               </ol>
-                              <!-- <div class="presentation-buttons-container"> -->
-                                  <!-- button to go to previous slide -->
-                                  <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-                                      <i class="material-icons mdc-button__icon">navigate_before</i>
-                                      Previous
-                                  </button>
-                                  <!-- button to go to next slide -->
-                                  <button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-                                      Next
-                                      <i class="material-icons mdc-button__icon">navigate_next</i>
-                                   </button>
-                               <!-- </div> -->
+                              <!-- button to go to previous slide -->
+                              <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                                  <i class="material-icons mdc-button__icon">navigate_before</i>
+                                  Previous
+                              </button>
+                              <!-- button to go to next slide -->
+                              <button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                                  Next
+                                  <i class="material-icons mdc-button__icon">navigate_next</i>
+                               </button>
                            </div>
                        </div>
                     </div>
@@ -111,29 +108,29 @@
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                            </ol>
-                           <!-- <div class="presentation-buttons-container"> -->
-                               <!-- button to go to previous slide -->
-                               <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-                                   <i class="material-icons mdc-button__icon">navigate_before</i>
-                                   Previous
-                               </button>
-                               <!-- button to go to next slide -->
-                               <button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-                                   Next
-                                   <i class="material-icons mdc-button__icon">navigate_next</i>
-                                </button>
-                            <!-- </div> -->
+                           <!-- button to go to previous slide -->
+                           <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                               <i class="material-icons mdc-button__icon">navigate_before</i>
+                               Previous
+                           </button>
+                           <!-- button to go to next slide -->
+                           <button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                               Next
+                               <i class="material-icons mdc-button__icon">navigate_next</i>
+                           </button>
                         </div>
                     </div>
-                    <div class="presentation-buttons-container">
-                    </div>
+ 					<div id="blog-insert"></div>
 
                     <!-- link to source code on GitHub -->
                     <a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
                </div>
             </main>
             <footer>
-                &copy; Matthew Grove 2018
+                Made in association with Daniel Dunbar
+                <br>
+                <br>
+                &copy; Matthew Grove & Daniel Dunbar 2018
             </footer>
         </div>
     </body>
diff --git a/computer-science-blog/pages/cookies.html b/computer-science-blog/pages/cookies.html
index e8e858b..1fb3fe6 100644
--- a/computer-science-blog/pages/cookies.html
+++ b/computer-science-blog/pages/cookies.html
@@ -1,12 +1,32 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>Cookies</h2>
-<p>
-	Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
-	information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
-	cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
-	difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
-	Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
-	visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
-	Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
-	cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+	<body>
+		<h2>Cookies</h2>
+		<p>
+			Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
+			information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
+			cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
+			difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
+			Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
+			visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
+			Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
+			cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
+		</p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/css.html b/computer-science-blog/pages/css.html
index bd18268..93ed2a2 100644
--- a/computer-science-blog/pages/css.html
+++ b/computer-science-blog/pages/css.html
@@ -1,32 +1,64 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>CSS</h2>
-<p>
-    Cascading Stylesheets (CSS) are used to style websites - i.e. to make them look pretty.
-    Whereas a page without CSS is just displayed as plain content:
-    <br>
-    <img class="presentation-image" src="images/without_css.jpg">
-    <br>
-    One with CSS looks a lot more presentable:
-    <br>
-    <img class="presentation-image" src="images/with_css.jpg">
-    <br>
-    CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
-    the elements on the page in order to style them. IDs are written with a preceding hashtag,
-    classes are written with a preceding full stop and tag names are written without any preceding characters.
-    The styles themselves (like <code>height</code>) should all end in semicolons.
-    Here are some example declarations:
-    <br>
-    <code>
-        p {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
-        }<br>
-        .class_name {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
-        }<br>
-        #id_name {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
-        }<br>
-    </code>
-    <br>
-    A comment in CSS is started with <code>/*</code> and ended with <code>*/</code>.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+        <script src="../scripts/css-presentation-slide.js"></script>
+    </head>
+    <body>
+        <h2>CSS</h2>
+        <p>
+            CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
+            h1 {
+            Background-color: red;
+            }
+            which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
+
+
+            Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
+            A page without CSS can be very bland and boring:
+            <br>
+            <img class="presentation-image" src="../images/without_css.jpg">
+            <br>
+            But one with CSS looks a lot more presentable:
+            <br>
+            <img class="presentation-image" src="../images/with_css.jpg">
+            <br>
+            CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
+            the elements on the page in order to style them. IDs are written with a preceding hashtag,
+            classes are written with a preceding full stop and tag names are written without any preceding characters.
+            The styles themselves (like <code>height</code>) should all end in semicolons. A comment in CSS is started
+            with <code>/*</code> and ended with <code>*/</code>.
+            Here are some example declarations:
+            <br>
+            <code>
+                p {<br>
+                    /* this changes the font size of all p elements */<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
+                }<br>
+                .class_name {<br>
+                    /* this changes the height of all elements with the class name 'class_name' */<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
+                }<br>
+                #id_name {<br>
+                    /* this changes the font of all elements with the ID 'id_name' */<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
+                }<br>
+            </code>
+            <br>
+            <span id="css_attribute_list_link"></span>
+        </p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/html.html b/computer-science-blog/pages/html.html
index fc969af..70bbc4e 100644
--- a/computer-science-blog/pages/html.html
+++ b/computer-science-blog/pages/html.html
@@ -1,15 +1,35 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>HTML</h2>
-<p>
-    Hypertext Markup Language is the standard language used by browsers to display webpages.
-    HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
-    an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>,
-    which displays a simple paragraph. Most tags must be closed with closing tags - like <code>&lt;/p&gt;</code>,
-    however some elements, like those for images (<code>&lt;img&gt;</code>) and linking external resources
-    (<code>&lt;link&gt;</code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
-    <br>
-    <code>&lt;img src="image_source_url"&gt;</code>
-    <br>
-    HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
-    <code>&lt;!--</code> and ended with <code>--&gt;</code>.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+    <body>
+        <h2>HTML</h2>
+        <p>
+            Hypertext Markup Language is the standard language used by browsers to display webpages.
+            HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
+            an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>,
+            which displays a simple paragraph. Most tags must be closed with closing tags - like <code>&lt;/p&gt;</code>,
+            however some elements, like those for images (<code>&lt;img&gt;</code>) and linking external resources
+            (<code>&lt;link&gt;</code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
+            <br>
+            <code>&lt;img src="image_source_url"&gt;</code>
+            <br>
+            HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
+            <code>&lt;!--</code> and ended with <code>--&gt;</code>.
+        </p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/http.html b/computer-science-blog/pages/http.html
index f617464..397da86 100644
--- a/computer-science-blog/pages/http.html
+++ b/computer-science-blog/pages/http.html
@@ -1,9 +1,29 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>HTTP</h2>
-<p>
-	HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web.
-	It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened
-	or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're
-	trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests,
-	the server and request must both follow this protocol.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+	<body>
+		<h2>HTTP</h2>
+		<p>
+			HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web.
+			It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened
+			or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're
+			trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests,
+			the server and request must both follow this protocol.
+		</p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/https.html b/computer-science-blog/pages/https.html
index ff78c45..a66eb44 100644
--- a/computer-science-blog/pages/https.html
+++ b/computer-science-blog/pages/https.html
@@ -1,8 +1,28 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>HTTPS</h2>
-<p>
-	HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
-	(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
-	essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
-	‘miscommunicated' data, because this increases security.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+	<body>
+		<h2>HTTPS</h2>
+		<p>
+			HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
+			(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
+			essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
+			‘miscommunicated' data, because this increases security.
+		</p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/hyperlinks.html b/computer-science-blog/pages/hyperlinks.html
index 11d2f69..a8863b5 100644
--- a/computer-science-blog/pages/hyperlinks.html
+++ b/computer-science-blog/pages/hyperlinks.html
@@ -1,12 +1,32 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>Hyperlinks</h2>
-<p>
-	A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
-	<br>
-	The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
-	<br>
-	Some website owners wish to reserve the right to not be hyperlinked without permission.
-	<br>
-	Creating a hyperlink in html:
-	<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+	<body>
+		<h2>Hyperlinks</h2>
+		<p>
+			A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
+			<br>
+			The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
+			<br>
+			Some website owners wish to reserve the right to not be hyperlinked without permission.
+			<br>
+			Creating a hyperlink in html:
+			<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
+		</p>
+	</body>
+</html>
diff --git a/computer-science-blog/pages/js.html b/computer-science-blog/pages/js.html
index 04f3ef9..3a61d77 100644
--- a/computer-science-blog/pages/js.html
+++ b/computer-science-blog/pages/js.html
@@ -1,16 +1,36 @@
 <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
-<h2>JavaScript</h2>
-<p>
-    JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
-    (rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
-    including editing content on a webpage, performing mathematical operations and storing variables.
-    Each line of JavaScript should end in a semicolon, for example:
-    <br>
-    <code>
-        // this code sets the content of the element with the ID "id_name" to "Hello World!"<br>
-        document.getElementById("id_name").innerHTML = "Hello World!";
-    </code>
-    <br>
-    A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
-    is started with <code>/*</code> and ended with <code>*/</code>.
-</p>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <meta name="HandheldFriendly" content="True">
+
+        <!-- import Roboto (font) -->
+        <link href="/assets/roboto.css" rel="stylesheet" type="text/css">
+
+        <!-- import Bootstrap -->
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
+
+        <!-- import local styling & scripts -->
+        <link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
+    </head>
+    <body>
+        <h2>JavaScript</h2>
+        <p>
+            JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
+            (rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
+            including editing content on a webpage, performing mathematical operations and storing variables.
+            Each line of JavaScript should end in a semicolon, for example:
+            <br>
+            <code>
+                // this code sets the content of the element with the ID "id_name" to "Hello World!"<br>
+                document.getElementById("id_name").innerHTML = "Hello World!";
+            </code>
+            <br>
+            A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
+            is started with <code>/*</code> and ended with <code>*/</code>.
+        </p>
+	</body>
+</html>
diff --git a/computer-science-blog/scripts/css-presentation-slide.js b/computer-science-blog/scripts/css-presentation-slide.js
new file mode 100644
index 0000000..8b65b58
--- /dev/null
+++ b/computer-science-blog/scripts/css-presentation-slide.js
@@ -0,0 +1,4 @@
+window.onload = function() {
+    var year = new Date().getFullYear();
+    document.getElementById("css_attribute_list_link").innerHTML = 'All of the CSS style attributes are listed <a href="https://www.w3.org/TR/css-' + year + '/#properties">here</a>.';
+}
diff --git a/computer-science-blog/scripts/scripts.js b/computer-science-blog/scripts/scripts.js
index f3f0c14..9dd4af9 100644
--- a/computer-science-blog/scripts/scripts.js
+++ b/computer-science-blog/scripts/scripts.js
@@ -9,7 +9,7 @@ window.onload = function() {
     var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
 
 	// set current date
-    var current_date = day + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
+    var current_date = day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
 
 	// display date
     $("#current_date").html(current_date);
@@ -21,29 +21,25 @@ window.onload = function() {
 	var http_pages = ["hyperlinks", "http", "https", "cookies"];
 	// displays HTTP presentation pages
 	http_pages.forEach(function(item, index) {
-		$.get("pages/" + item + ".html", function(content) {
-			if (index == 0) {
-				$("#http_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
-				$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
-			} else {
-				$("#http_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
-				$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' +  index + '"></li>')
-			}
-		});
+		if (index == 0) {
+			$("#http_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
+		} else {
+			$("#http_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' +  index + '"></li>')
+		}
 	});
 
    	// define variables for HTML presentation pages
    	var html_pages = ["html", "css", "js"];
    	// displays HTML presentation pages
    	html_pages.forEach(function(item, index) {
-   		$.get("pages/" + item + ".html", function(content) {
-            if (index == 0) {
-				$("#html_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
-				$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
-			} else {
-				$("#html_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
-				$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' +  index + '"></li>')
-			}
-   		});
+        if (index == 0) {
+			$("#html_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
+			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
+		} else {
+			$("#html_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
+			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' +  index + '"></li>')
+		}
    	});
 }