Skip to content

Commit c7b2d21

Browse files
HansUXdevHansUXdev
committed
updates to site
updates to site
1 parent dc14f39 commit c7b2d21

File tree

8 files changed

+487
-65
lines changed

8 files changed

+487
-65
lines changed

‎00-Drafts/readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# All the unfinished draft content goes here.
1+
# All the unfinished draft content goes here.

‎01-Reteaching-JavaScript/04-TypesOfFunctions/Untitled-1.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// function Person(first, last, age) {
2+
// this.firstName = first;
3+
// this.lastName = last;
4+
// this.age = age;
5+
// }
6+
// const myFather = new Person("John", "Doe", 50, "blue");
7+
8+
class Person {
9+
constructor(first, last, age) {
10+
this.first = first;
11+
this.last = last;
12+
this.age = age;
13+
}
14+
}
15+
16+
let me = new Person("John", "Doe", 50);
17+
18+
console.log(me);

‎Twitch.md

Lines changed: 142 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ transition: "slide"
88
highlightTheme: "monokai"
99
# slideNumber: true
1010
# loop: true
11-
# autoSlide: 2000
11+
autoSlide: 200000
1212
# # openButton: false
1313
# enableMenu: false
1414
# # controlsLayout: 'edges'
@@ -28,69 +28,105 @@ highlightTheme: "monokai"
2828
gtag('config', 'UA-176679651-1');
2929
</script>
3030

31-
<!-- <link rel="stylesheet" href="theme.css"> -->
32-
<style>
33-
.flex-slide{display:flex}
34-
.column {display: flex;
35-
flex-direction: column;
36-
flex-basis: 100%;
37-
flex: 2;
38-
}
39-
40-
.double-column {
41-
display: flex;
42-
flex-direction: column;
43-
flex-basis: 100%;
44-
flex: 2;
45-
}
46-
.present {}
47-
.flex-slide p.fragment{ font-size: 0.6em; }
48-
49-
.reveal .slides section .fragment.visible {
50-
opacity: 1;
51-
visibility: inherit;
52-
font-size: large;
53-
}
54-
55-
h1, h2, h3, h4, h5, h6, p {color:white;}
56-
57-
/* Fix Issue of hidden content still taking up space */
58-
.fragment.fade-in-then-out:not(.current-fragment) {
59-
display:none;
60-
}
61-
62-
</style>
63-
64-
### About #JavaScriptFirst
31+
<link rel="stylesheet" href="theme.css">
6532

33+
34+
### About the Streamer
35+
36+
<div class="flex-slide">
37+
38+
:::block
6639
<p align="center">
6740
<a href="https://github.com/users/HansUXdev/sponsorship">
68-
<img src="https://hansmcmurdy.com/JavaScript-First/logo.svg" style="max-width:50%;" height="300px" alt="JavaScript Logo"/>
41+
<img src="assets/fancyPhoto.jpg" style="max-width:50%;" height="200px" alt="JavaScript Logo"/>
6942
</a>
7043
</p>
7144

72-
--
45+
```javascript
46+
const fullname = {first:"Brett", middle:"Hans", last:"McMurdy"}
47+
let {middle} = fullname;
48+
let name = middle;
49+
console.log(name);
50+
```
51+
{.column}
52+
:::
7353

74-
### Approach
75-
This book attempts to adopt a Career and Technical Education appoach to the content development and implementation.
54+
:::block
55+
My name is "Hans" . {.fragment .current-only .xxlg data-code-focus=4-5 }
7656

77-
![CTE](CTE.drawio.svg)
57+
I've be coding for 5+ years and my last full time job was teaching #JavaScript in public high school as a certified Career and Technical Education (CTE) teacher. {.fragment .current-only .lg}
58+
59+
{.double-column}
60+
:::
61+
62+
</div>
7863

7964
--
8065

81-
### Blooms
66+
<!-- ### Today's Class.. -->
67+
<!-- Today is a free day for me to live code whatever I want. {.fragment .current-only } -->
8268

83-
![](blooms.drawio.svg)
69+
#### Today's Lesson: How to rapidly design and prototype a website with @drawio @FoundationCSS @GitPod.
8470

85-
--
8671

87-
## Objectives of the course
88-
Teach anyone 16+ how to code a website, server and mobile app using **JavaScript**.
72+
{.fragment}
73+
74+
<div class="flex-slide">
75+
76+
:::block
77+
What you need to do in order to follow along ! {.fragment .xlg}
78+
79+
1. Join me in Twitch chat !
80+
2. Use these slides: hansmcmurdy.com/JavaScript-First/Twitch.html {.fragment}
81+
3. These will be updated before and after the live stream {.fragment}
82+
4. Open up Chrome and install the extension from [gitpod](https://chrome.google.com/webstore/detail/gitpod-dev-environments-i/dodmmooeoklaejobgleioelladacbeki). {.fragment}
83+
5. Signup for [Github](https://github.com/) and sign into the account {.fragment}
84+
6. Find the foundation template: https://github.com/foundation/foundation-zurb-template {.fragment}
85+
7. Click the **fork button** to make your own copy.{.fragment}
86+
8. Click the **GitPod button** that appears with the chrome extension above. {.fragment}
87+
9. Open it on GitPod {.fragment}
88+
10. Follow along as best as you can and shout out to me in chat if I'm going to fast. {.fragment}
89+
11. Video to pre {.fragment}
90+
<!-- 8. Fork it ![GitHub Forks](https://img.shields.io/github/forks/HansUXdev/JavaScript-First?style=social) {.fragment} -->
91+
<!-- - [ ] -->
92+
{.column }
93+
:::
94+
95+
:::block
96+
Things I'll talk about: {.fragment}
97+
98+
1. What is @gitHub VS @GitPod {.fragment}
99+
2. What is @drawio {.fragment}
100+
3. What is @FoundationCSS, web & email {.fragment}
101+
4. How to use the Foundation CLI {.fragment}
102+
5. How to use GitPod & Configure it for the above {.fragment}
103+
104+
{.double-column .fragment}
105+
:::
106+
107+
108+
</div>
109+
110+
---
111+
112+
#JavaScriptFirst
113+
114+
Most of my content is for an **Open Source Book** based off **state standards**, geared toward students and able to be **run on low end hardware** such as a table, old PC or even a raspbery pi (with GitPod). {.fragment}
115+
116+
There will eventually be a **teacher-version** that could be adopted in other schools, bootcamps, universities who become contributors (financially or code / content contributors). {.fragment}
117+
118+
<p align="center">
119+
<a href="https://github.com/users/HansUXdev/sponsorship">
120+
<img src="https://hansmcmurdy.com/JavaScript-First/logo.svg" style="max-width:50%;" height="300px" alt="JavaScript Logo"/>
121+
</a>
122+
</p>
123+
124+
Learn more about the content by scrolling down
89125

90126
--
91127

92128
### What this book covers:
93-
This book is still in **early access** and **open source**.
129+
This content is still in **early access** and **open source**.
94130
The content is made to be **open source curriculum**. {.fragment}
95131

96132
You will learn how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript. {.fragment}
@@ -104,7 +140,27 @@ It takes a **blended learning approach** . {.fragment}
104140

105141
[![Twitch Status ](https://img.shields.io/twitch/status/hansoncoding?style=for-the-badge)](https://www.twitch.tv/hansoncoding) {.fragment}
106142

107-
If the button ^ is live, click it. {.fragment}
143+
If the button ^ is live, click it and join free classes online, otherwise follow. {.fragment}
144+
145+
--
146+
147+
148+
### My Approach
149+
I to apply the CTE model toward teaching as well as to the way I develop my content.
150+
151+
![CTE](CTE.drawio.svg)
152+
153+
---
154+
155+
### Blooms
156+
This is a visual illustration of how I approach learning objectives using bloom's taxonomy.
157+
158+
![](blooms.drawio.svg)
159+
160+
--
161+
162+
## Objectives of the course
163+
Teach anyone 16+ how to code a website, server and mobile app using **JavaScript**.
108164

109165
--
110166

@@ -119,29 +175,50 @@ This is helps provide an **interactive experiance** through [codetogether](http
119175

120176
---
121177

122-
### Chapter 1: Reteaching JavaScript & Web Development
123-
- [History of JavaScript](https://medium.com/javascript-in-plain-english/a-brief-history-of-javascript-9289a4d344d2?source=friends_link&sk=e99b98fd76bf99dcc6fd1a85e60b4721)
124-
- Learning Terminal, NVM, Git & Node.js
125-
- JavaScript Datatypes
126-
- Types of Functions
127-
- Logging Datatypes
178+
### #JavaScriptFirst Content
179+
180+
Read more about the current [Version 0.1](https://hansmcmurdy.com/JavaScript-First/#/2) or scroll down for more info.
128181

129182
--
130183

131-
### Chapter 2: Introduction to Web Development with HTTP
132-
- Learn JavaScript before by building an HTTP Server with Node.js
133-
- Learn HTML with ES6 Template Strings
134-
- Secure your site with an SSL Certificate
135-
- Hosting your node.js server
136-
- Connect it to web Domain
184+
#### Chapter 1: Reteaching JavaScript & Web Development
185+
186+
> **Objective:** Students should know the syntax of JavaScript and how to use variables, hoisting, objects, functions, etc {.fragment .current-only }
187+
188+
| Lessons | Type |
189+
|-------------|:-----------:|
190+
| [History of JavaScript](https://medium.com/javascript-in-plain-english/a-brief-history-of-javascript-9289a4d344d2) | Article |
191+
| [Learning Terminal, NVM, Git & Node.js](https://medium.com/swlh/terminal-basics-and-installing-nvm-node-js-631cf9476ac4) | Activity |
192+
| [JavaScript Datatypes](https://medium.com/javascript-in-plain-english/what-do-you-really-know-about-variables-data-types-and-immutability-in-javascript-1730835a9e87?source=friends_link&sk=f71e5c38da34456f55ed813b23d4ed78) | Code Along |
193+
| [Types of Functions](01-Reteaching-JavaScript/04-TypesOfFunctions/FunctionTypes/index.html) | Code Along |
194+
| Logging Datatypes | Exercise |
195+
| War Game? | Exercise |
196+
197+
[View the whole chapter](/01-Reteaching-JavaScript/Overview.html) {.fragment .current-only }
137198

138199
--
139200

140-
### Chapter 3: Test Driven Curriculum
141-
- Unit Tests
142-
- Users Tests (Twitter Bot)
143-
- Automatic Responsive Testing
144-
- Automatic Cross-Browser Testing
201+
#### Chapter 2: Introduction to Web Development with HTTP
202+
> **Objective:** Students will build their first website and deploy it by the end of the chapter. {.fragment .current-only }
203+
204+
| Lessons | Type |
205+
|-------------|:-----------:|
206+
| Learn HTML by building an HTTP Server with Node.js | Exercise |
207+
| Build a dynamic Website with Vanilla.js with Functions & Template Strings | Exercise |
208+
| Deploying a Dynamic site with HTTPS & Open SSL | Exercise |
209+
210+
211+
--
212+
213+
#### Chapter 3: Test Driven Development
214+
> **Objective:** Students will learn how to write tests for code challenges and to automate front-end testing tasks. {.fragment .current-only }
215+
216+
| Lessons | Type |
217+
|--------------------------------|:-----------:|
218+
| Writing Unit Tests | Exercise |
219+
| Automate Responsive Testing with puppeteer | Exercise |
220+
| Automate Cross-Browser with puppeteer | Exercise |
221+
| Build a Twitter Bot | Exercise |
145222

146223
--
147224

@@ -160,6 +237,7 @@ Current Content may include:
160237

161238
### Wecome to class...
162239

240+
{.fragment}
163241

164242
<div class="flex-slide">
165243

0 commit comments

Comments
 (0)