WA101: just the presentation

.gitattributes

@@ -0,0 +1,2 @@
+/courses/Foundation/web-architecture-101/presentation/web-architecture-101.pdf linguist-generated=true
+/courses/Foundation/web-architecture-101/presentation/web-architecture-101.zip linguist-generated=true

.gitignore

@@ -1,4 +1,5 @@
 # Ignore hidden Mac OS directory files
 **/.DS_Store
+courses/Foundation/web-architecture-101/presentation/web-architecture-101/
 node_modules/
 support/dist/

.prettierignore

@@ -1 +1,2 @@
 /support/dist/
+/courses/Foundation/web-architecture-101/HYF Web Architecture 101/

courses/Foundation/web-architecture-101/README.md

@@ -1,3 +1,22 @@
 # Web Architecture 101
 
-TODO
+This module takes a rather different form from all of the other modules.
+It's in the form of a presentation, which is provided here in Keynote, PDF, and HTML forms.
+
+The purpose of this module is to provide a mental model of how the remaining technical modules fit together.
+
+You don't have to _remember_ and _learn_ everything in the presentation.
+Instead, it's all about getting an overview of how web sites work, some of the terminology,
+and how that relates to the coming modules.
+
+After the presentation, you may find the [recap](./recap.md) useful.
+
+## The presentation
+
+- in its original [Keynote format](./presentation/web-architecture-101.key)
+- exported as a [PDF](./presentation/web-architecture-101.pdf)
+- exported as [HTML](./presentation/web-architecture-101.zip) (zipped)
+
+---
+
+_Notes for mentors: see [goals](./goals.md) and [structure](./structure.md) to see how this module is put together._

courses/Foundation/web-architecture-101/goals.md

@@ -0,0 +1,26 @@
+# Goals
+
+The goals of WebArch101 are:
+
+- To provide a mental model into which the other technical modules fit.
+
+## Detail
+
+The technical modules (across Foundation, Back End specialism, and Front End specialism)
+are:
+
+- HTML & CSS
+- JavaScript / Advanced JavaScript
+- Databases
+- Intro to backend
+- Intro to frontend
+- React
+- Final project (to the extent that stuff needs to be deployed)
+
+It is these modules which we aim to present together in a coherent model.
+
+_Not_ in scope for WebArch101:
+
+- Git / Collaboration via Git
+- Team processes / Advanced team processes
+- Career training / Specialist career training

courses/Foundation/web-architecture-101/recap.md

@@ -0,0 +1,37 @@
+# Recap
+
+## Front end vs back end
+
+Web development spans:
+
+- the front end (stuff that happens in the users' web browsers);
+- the back end (stuff that happens on servers that we control).
+
+The front end and the back end communicate via HTTP. The front end makes a request, and the back end answers with a response.
+
+We get to write the software on both sides.
+
+## What happens in the front end
+
+- in the front end:
+  - we can only use JavaScript;
+  - we can do things like manipulate the web page, or make a request to the server.
+
+## What happens in the back end
+
+- in the back end:
+  - the primary goal is to send back a response for each HTTP request;
+  - we can use any language we like (but we'll be using JavaScript);
+  - we can also do things like read and write files (on the server), or talk to a database, or to another server.
+
+## Data & APIs
+
+TODO
+
+## Deployment
+
+The server is ours to control. It runs the back end code.
+
+It also has a copy of the front end code, so that it can provide it to the front end, for the web browser to run it.
+
+"Deployment" is about making sure that the server has all the code, other files, and settings that it needs.

courses/Foundation/web-architecture-101/structure.md

@@ -0,0 +1,66 @@
+# The structure of this presentation
+
+## Introduction
+
+Key points:
+
+- this module is rather different from the other technical modules
+- you don't have to remember everything in this module
+- the purpose of this module is to give an understanding of how the remaining modules fit together
+
+## HTTP
+
+Key points:
+
+- the structure of a URL (scheme, host, path)
+- finding a host with DNS
+- establishing a connection (TCP)
+- Content-Type instead of file extension
+- an HTTP GET request/response, at the most simple level
+
+## Front end vs back end
+
+Key points:
+
+- To make our web page available, we have to have a server
+- That server needs to run some software: a web (http) server
+- The server needs whatever software _it_ runs, plus files for the browser
+- Some of our code runs in the browser; some of our code runs on the host
+- This is "front end" and "back end"
+
+## The front end
+
+Key points:
+
+- Usually the starting URL is going to be `text/html`
+- How HTML refers to other resources
+- JavaScript is the only available language
+- What JavaScript in the browser can and can't do
+- Typical things we'll do with front-end JavaScript
+
+## The back end
+
+Key points:
+
+- http listen, handle request
+- what HTTP requests/responses "look like"
+- serving static content
+- it is just software. We can extend it!
+- any language, but we'll be using JavaScript
+
+## Data and APIs
+
+Key points:
+
+- TODO
+- data store services (in the abstract). Peristing data away from the web server.
+
+## More complex setups
+
+Key points:
+
+- This section talks about things _beyond_ what Hack Your Future covers
+- It's a taster of what things start to look like in larger, real-world scenarios
+- The client/server terminology
+- Adding a database server
+- Multiple environments