Javascript & Node

A linear progression through full stack Javascript, with tutorials, exercises, and examples.

About

• Requirements - Accounts, materials, etc.
• Structure - How I use this material with the Madeline Hunter Lesson Plan
• Prerequisites - Suggested prerequisites before you begin
• Credit & License

1 - Introduction to the language

1. Introduction slides | md - Introduction to Javascript, expressions, statements, and operators
2. Data & Variables slides | md - How to store and compare values and data types
3. Control Flow slides | md - Comparison and logical operators, conditional statements
4. DOM slides | md - Forms and the Document Object Model (DOM)
5. Functions slides | md - Reusing code, protecting variables
6. Data Structures slides | md - How to use arrays, objects, properties, methods, and loops

2 - Intermediate topics

7. Asynchronous Javascript slides | md - How to use callbacks, fetch, promises, async/await, etc.
8. Single Page Apps slides | md - How to create basic single page applications
9. Working with Maps slides | md - Leaflet vs. Google Maps
10. Browser Extensions slides | md - An introduction and tutorials
11. jquery slides | md - How to use jquery for interaction, display, and data

3 - Working with data

11. Working with Data slides | md - JSON, CSV, fetch, serialization, CORS, APIs, data cleaning
12. Data Persistance slides | md - Client vs server-side data, cookies, local storage
13. Data Visualization slides | md - Chart.js vs. D3
14. Data Scraping slides | md - A short introduction to scraping with JS
15. Servers slides | md - Chart.js vs. D3

Codepen Examples

• Basics
  • Cycle through all RGB values
  • Power of Two (Po2) Visualization
  • JS - Passing functions as values
• Strings
  • Every Character
  • JS Exercise - String functions
• Randomness
  • Random Article Generator
  • Data / Technology Question Generator
  • Javascript washing machine
• Interaction
  • Visibility + Presence with JS + CSS Animation
  • Secret Knock Detector
• DOM manipulation
  • Create an SVG with vanilla JS
  • Swap images with Javascript / jQuery
  • Add new content to a web page with JS (overlay, setTimeout) Tools
  • How to Create Bookmarklets!

4 - Advanced Javascript

16. Node & NPM slides | md - Introduction to server-side Javascript
17. Node & Express slides | md - Using node/express to build web applications and APIs
18. 📌 Node & Databases
19. 📌 Object Oriented Programming
20. 📌 Errors and Debugging
21. Modules slides | md - How to use modules in Node and the browser