From 112d173d59e747896402c19fe801ab7e07653663 Mon Sep 17 00:00:00 2001
From: colevandersWands <18554853+colevandersWands@users.noreply.github.com>
Date: Tue, 31 Oct 2023 16:48:50 +0100
Subject: [PATCH] first draft curriculum outline
---
pages/_meta.json | 3 +-
.../ea-wd-1-html.excalidraw.svg | 2350 +------------
.../ea-wd-2-users.excalidraw.svg | 2958 +----------------
.../eb-ds-2-analyzing-data.excalidraw.svg | 2519 +-------------
pages/index.mdx | 2 -
pages/web-development-curriculum.mdx | 92 +
.../assets/curriculum-spider-web.svg | 16 +
.../assets/rhetorical-situation.svg | 740 +++++
8 files changed, 886 insertions(+), 7794 deletions(-)
create mode 100644 pages/web-development-curriculum.mdx
create mode 100755 pages/web-development-curriculum/assets/curriculum-spider-web.svg
create mode 100644 pages/web-development-curriculum/assets/rhetorical-situation.svg
diff --git a/pages/_meta.json b/pages/_meta.json
index b421d8e..d3f9ff3 100644
--- a/pages/_meta.json
+++ b/pages/_meta.json
@@ -3,8 +3,9 @@
"study-lenses": "Study Lenses",
"curriculum-design": "Curriculum Design",
"lesson-materials": { "display": "hidden" },
+ "web-development-curriculum": "Web Development Curriculum",
"awesome-teaching": "Awesome Teaching",
- "De Nepo on GitHub": {
+ "De Nepo on GitHub ↗": {
"href": "https://github.com/DeNepo",
"newWindow": true
}
diff --git a/pages/curriculum-design/big-picture-assets/ea-wd-1-html.excalidraw.svg b/pages/curriculum-design/big-picture-assets/ea-wd-1-html.excalidraw.svg
index 3210212..07fca62 100644
--- a/pages/curriculum-design/big-picture-assets/ea-wd-1-html.excalidraw.svg
+++ b/pages/curriculum-design/big-picture-assets/ea-wd-1-html.excalidraw.svg
@@ -1,2343 +1,17 @@
-
-
-
-
- image/svg+xml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- you
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- team members
-
-
- A Computer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Source Code
-
-
-
-
-
-
- Development Team
-
-
- - PRs & issues
- - code review
- - coffee breaks
- - documentation
- - backlogs
- - ...
-
-
-
-
- output
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - program behavior
- - DOM inspector
-
-
- - comments
- - variable names
- - formatting
- - paradigms
-
-
-
-
-
-
-
-
- precise instructions
- (hopefully) describing the intended program
-
- Real-World Context:
-
-
- - who is building the software?
- - why are they building it?
- - who will use the software?
- - who will benefit from it?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Computer
- Instructions:
-
-
- Developer
- Intentions:
-
-
- Computer Output:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- instructions
-
-
- interpretation
-
-- empathize - define - ideate - prototype - test - ... repeat! you team members Users (real humans!) A Computer Source Code Development Team - PRs & issues - code review - coffee breaks - documentation - backlogs - ... data in state (initial), instruction, state, instruction, ... state (final). data out - program behavior - error messages - logs - comments - variable names - formatting - paradigms precise instructions for how to process program data - is intuitive - displays program state - takes in user data - real-time interactions Real-World Context: - who is building the software? - why are they building it? - who will use the software? - who will benefit from it? * state: data at one moment in time Design Thinking: User Interface: Computer Instructions: Developer Intentions: Computer Output: ( - wants and needs - frustrations - and dreams
-
-
- image/svg+xml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - empathize
- - define
- - ideate
- - prototype
- - test
- - ... repeat!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- you
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- team members
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Users (real humans!)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Source Code
-
-
-
-
-
-
- Development Team
-
-
- - PRs & issues
- - code review
- - coffee breaks
- - documentation
- - backlogs
- - ...
-
-
-
-
-
-
-
-
- - program behavior
- - DOM inspector
-
- A Computer
-
-
- output
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- instructions
-
-
- interpretation
-
-
-
- - comments
- - variable names
- - formatting
- - paradigms
-
-
-
-
-
-
-
-
- - is intuitive
- - is intentional
- - fills an actual need
-
-
- Real-World Context:
-
-
-
-
- - who is building the software?
- - why are they building it?
- - who will use the software?
- - who will benefit from it?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Design Thinking:
-
-
- User Interface:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Developer
- Intentions:
-
-
- Computer Output:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
-
-
- - wants and needs
- - frustrations
- - and dreams
-
-
- precise instructions
- (hopefully) describing the intended program
-Computer
-Instructions:
-- empathize - define - ideate - prototype - test - ... repeat! you team members Users (real humans!) A Computer Source Code Development Team - PRs & issues - code review - coffee breaks - documentation - backlogs - ... data in state (initial), instruction, state, instruction, ... state (final). data out - program behavior - error messages - logs - comments - variable names - formatting - paradigms precise instructions for how to process program data - is intuitive - displays program state - takes in user data - real-time interactions Real-World Context: - who is building the software? - why are they building it? - who will use the software? - who will benefit from it? * state: data at one moment in time Design Thinking: User Interface: Computer Instructions: Developer Intentions: Computer Output: ( - wants and needs - frustrations - and dreams
-
-
- image/svg+xml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- you
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- team members
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Source Code
-
-
-
-
-
-
- Development Team
-
-
- - PRs & issues
- - code review
- - coffee breaks
- - documentation
- - backlogs
- - ...
-
-
-
-
-
-
-
-
-
-
- - program behavior
- - error messages - logs
-
- - comments
- - variable names
- - formatting
- - paradigms
-
-
-
-
-
-
-
-
- precise instructions
- (hopefully) describing the intended program
-
- Real-World Context:
-
-
- - who is building the software?
- - why are they building it?
- - who will use the software?
- - who will benefit from it?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Computer
- Instructions:
-
-
- Developer
- Intentions:
-
-
- Computer Output:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- A Computer
-
-
- data in
-
-
- state (initial),
- instruction,
- state,
- instruction,
- ...
- state (final).
-
-
- data out
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- * state: data at one moment in time
-
-- empathize - define - ideate - prototype - test - ... repeat! you team members Users (real humans!) A Computer Source Code Development Team - PRs & issues - code review - coffee breaks - documentation - backlogs - ... data in state (initial), instruction, state, instruction, ... state (final). data out - program behavior - error messages - logs - comments - variable names - formatting - paradigms precise instructions for how to process program data - is intuitive - displays program state - takes in user data - real-time interactions Real-World Context: - who is building the software? - why are they building it? - who will use the software? - who will benefit from it? * state: data at one moment in time Design Thinking: User Interface: Computer Instructions: Developer Intentions: Computer Output: ( - wants and needs - frustrations - and dreams
+
+
+
+
+
+ reading code writing code group communication ... and more! project planning design thinking user-centered development computer terminal Markdown HTML/CSS Basic JavaScript HTML/CSS + JS ... and beyond! organizing code code review deployment data modeling
diff --git a/pages/web-development-curriculum/assets/rhetorical-situation.svg b/pages/web-development-curriculum/assets/rhetorical-situation.svg
new file mode 100644
index 0000000..489a8e7
--- /dev/null
+++ b/pages/web-development-curriculum/assets/rhetorical-situation.svg
@@ -0,0 +1,740 @@
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - empathize
+ - define
+ - ideate
+ - prototype
+ - test
+ - ... repeat!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ you
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ team members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Users (real humans!)
+
+
+ A Computer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Code
+
+
+
+
+
+
+ Development Team
+
+
+ - PRs & issues
+ - code review
+ - coffee breaks
+ - documentation
+ - backlogs
+ - ...
+
+
+ data in
+
+
+ state (initial),
+ instruction,
+ state,
+ instruction,
+ ...
+ state (final).
+
+
+ data out
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - program behavior
+ - error messages
+ - logs
+
+
+ - comments
+ - variable names
+ - formatting
+ - paradigms
+
+
+
+
+
+
+
+
+ precise instructions
+ for how to process
+ program data
+
+
+ - is intuitive
+ - displays program state
+ - takes in user data
+ - real-time interactions
+
+
+ Real-World Context:
+
+
+
+
+ - who is building the software?
+ - why are they building it?
+ - who will use the software?
+ - who will benefit from it?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * state: data at one moment in time
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Design Thinking:
+
+
+ User Interface:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Computer
+ Instructions:
+
+
+ Developer
+ Intentions:
+
+
+ Computer Output:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+
+ - wants and needs
+ - frustrations
+ - and dreams
+
+