WebArch101 draft

.prettierignore

@@ -1 +1,3 @@
 /support/dist/
+/courses/Foundation/web-architecture-101/HYF Web Architecture 101/assets/
+/courses/Foundation/web-architecture-101/HYF Web Architecture 101/index.html

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

@@ -1,3 +1,4 @@
 # Web Architecture 101
 
-TODO
+- [Goals](./goals.md) of this module
+- the [presentation](./presentation/README.md)

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

@@ -0,0 +1,20 @@
+# Goals
+
+To provide a mental model into which the other technical modules fit.
+
+Names of the technical modules (across Foundation, BE & FE),
+i.e. we aim to show how these modules fit together.
+
+- HTML & CSS
+- JavaScript / Advanced JavaScript
+- Databases
+- Intro to backend
+- Intro to frontend
+- React
+- Final project (to the extent that stuff needs to be deployed)
+
+Not in scope:
+
+- Git / Collaboration via Git
+- Team processes / Advanced team processes
+- Career training / Specialist career training

courses/Foundation/web-architecture-101/presentation/1-introduction/README.md

@@ -0,0 +1,24 @@
+# Web Architecture 101: 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
+ -->
+
+## Why this module exists
+
+So far you've seen HTML, CSS, and some JavaScript.
+
+![visual representation of the various modules](./modules.png)
+
+Maybe you're looking ahead to the other modules and seeing things like "Node.js" and "Databases" and "Front End", and perhaps you're wondering what they mean, and how they fit into the picture.
+
+That's where Web Architecture 101 comes in. It's a bit different to the other technical modules: whereas with the other modules we look at lots of technical detail to _learn_ and _memorise_ and _explore_, this module is much more of an overview.
+
+![the Charlie Conspiracy meme, with the text: "Let me tell you about how the web actually works"](./let-me-tell-you.jpg)
+
+You're not expected to learn or remember every single detail of what's in this module. Rather, the important thing is to see how the various modules fit together, so that as you progress though the other modules, you have an understanding of where it sits in relation to the other modules.
+
+Continue to [HTTP](../2-http/README.md)

courses/Foundation/web-architecture-101/presentation/2-http/README.md

@@ -0,0 +1,50 @@
+# What happens when you enter a URL into a web browser?
+
+<!--
+  Key points:
+  - the structure of a URL (scheme, host, path)
+  - finding a host with DNS
+  - establishing a connection
+  - Content-Type instead of file extension
+  - an HTTP GET request/response, at the most simple level
+ -->
+
+What happens when you enter a URL into a web browser?
+
+I have used this as an interview question before. There isn't a single definitive correct way to answer this question, because for each piece of the answer, you can either stop there, or dig deeper and uncover more pieces, and so on. How deep do you want to go?
+
+Well, let's make a start.
+
+## How to see pictures of cats
+
+You have your computer (laptop, phone, whatever), with a working Internet connection, and you want to see a picture of a cat. You already know the exact URL. So you go to your web browser and type in the URL.
+
+[TODO, pic]
+
+Your web browser is just software. So what does it do with what you typed in?
+
+## Understanding URLs
+
+Let's consider the URL `https://hyf.example.net/cat`
+
+- The part up to the `:` is called the _scheme_: here, it's `https`. It tells the browser how to interpret the rest of the URL, and also how to actually go about fetching the resource at that URL.
+- The part from `//` to the next `/` is the name of the _host_ (also known as the _server name_). Here, it's `hyf.example.net`.
+- The part from that `/` onwards is called the _path_. Here, it's `/cat`.
+
+## So many computers!
+
+the DNS bit
+
+## Connecting
+
+timed out
+
+refused
+
+accepted
+
+The connection is just a container for two streams of data, on in each direction. So what are they saying?
+
+## HTTP and Content-Type
+
+Continue to [Front End & Back End](../3-front-end-and-back-end/README.md)

courses/Foundation/web-architecture-101/presentation/3-front-end-and-back-end/README.md

@@ -0,0 +1,48 @@
+# Front End & Back End
+
+<!--
+  Key points:
+  - To make our web page available, we have to have a host
+  - That host needs to run some software: a web (http) server
+  - The host needs whatever software _it_ runs, plus files for the client
+  - Some of our code runs on the host; some of our code runs in the browser
+  - This is "front end" and "back end"
+-->
+
+## A simple game
+
+Let's say you've created a game, to be played in a web browser.
+
+It doesn't really matter here what the game does. Maybe it's "guess what number I'm thinking of" or something. Anything.
+
+The point is, you've made a page.
+
+Here are the files which make up your game-page:
+
+- index.html
+- styles.css
+- cat.jpg
+- gameplay.js
+
+## How can I play your game?
+
+You've made a game; you've created those four files.
+
+I would like to play your game! How can I do that?
+
+1. You need a server
+1. That server needs a name. e.g. `webgame.example.net`
+1. You put those four files onto the server.
+1. But the server isn't _doing_ anything yet. In order to become a _web_ server, which is to say an _HTTP_ server, it'll need something more. We can do that with one more bit of JavaScript, let's call it `server.js`.
+1. You put `server.js` onto the server too, and run it.
+1. Your game is now ready! You need to tell people the URL: `https://webgame.example.net/`
+1. Because I want to play your game, I enter that URL into my web browser:
+   1. The browser issues a `GET /` request, and gets sent the contents of the `index.html` file, marked as `Content-Type: text/html`
+   2. My browser reads that HTML it just received, and finds references to the other three things, so it requests them, too, in the same manner:
+      - `GET /styles.css`
+      - `GET /cat.jpg`
+      - `GET /gameplay.js`
+   3. My browser then diplays the page and starts running `gameplay.js`
+1. I am now happily playing your cat game.
+
+Continue to [The Front End](../4-the-front-end/README.md)

courses/Foundation/web-architecture-101/presentation/4-the-front-end/README.md

@@ -0,0 +1,14 @@
+# 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
+-->
+
+...
+
+Continue to [The Back End](../5-the-back-end/README.md)

courses/Foundation/web-architecture-101/presentation/5-the-back-end/README.md

@@ -0,0 +1,14 @@
+# 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
+-->
+
+...
+
+Continue to [Data and APIs](../6-data-and-apis/README.md)

courses/Foundation/web-architecture-101/presentation/6-data-and-apis/README.md

@@ -0,0 +1,10 @@
+# Data and APIs
+
+<!--
+  Key points:
+  - TODO
+-->
+
+...
+
+Continue to [Complexity](../7-complexity/README.md)

courses/Foundation/web-architecture-101/presentation/7-complexity/README.md

@@ -0,0 +1,14 @@
+# Complexity
+
+<!--
+  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
+-->
+
+...
+
+Continue to the [Recap](../8-recap/README.md)

courses/Foundation/web-architecture-101/presentation/8-recap/README.md

@@ -0,0 +1,3 @@
+# Recap
+
+...

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

@@ -0,0 +1,10 @@
+# Web Architecture 101: How Web Sites Work
+
+1. [Introduction](./1-introduction/README.md)
+2. [HTTP](./2-http/README.md)
+3. [Front End & Back End](./3-front-end-and-back-end/README.md)
+4. [The Front End](./4-the-front-end/README.md)
+5. [The Back End](./5-the-back-end/README.md)
+6. [Data and APIs](./6-data-and-apis/README.md)
+7. [Complexity](./7-complexity/README.md)
+8. [Recap](./8-recap/README.md)