Bell Media - Web Dev & Javascript Training

How to build a web application in the single-page style (building the entire interface on the front-end with 'vanilla' Javascript, and making a JSON API w/ Javascript/Node on the back-end).

Prerequisites

comfortable w/ programming (in any language)
comfortable w/ basic JavaScript (or Intro to Javascript module)
comfortable w/ basic front-end Javascript (or Intro to Front-End Javascript module)
comfortable w/ HTTP (or Intro to The Web module)

Overview of SPAs

SPA Architecture, Compare to MPA, Build TODO list in MPA style

Demo: Sequence Diagram; HTML; client js; server js

Video

Exercise

: Extensions to TODO

Auth with SPAs

Demo: HTML; client js; server js

Video

Exercise

: More Extensions to TODO

Intro to React

2021-02-08

How to use React for make modern SPA applications in Javascript.

Prerequisites

comfortable w/ programming (in any language)
comfortable w/ basic HTML (or Intro to HTML & CSS module)
comfortable w/ basic Javascript (or Intro to Javascript module)
comfortable w/ basic front-end Javascript (or Intro to Front-End Javascript module)

React I

High level understanding, using components, passing props

: React JS (reactjs.org); Getting Started (reactjs.org); Thinking in React (reactjs.org); Tutorial (reactjs.org); React Cheatsheet (devhints.io); Other Starter Resources (reactfordesigners.com)

Video

Exercise

: TODO with React

React II

Using state and hooks, fetching remote

Video

Exercise

: More TODO with React

React III

Wider React ecosystem

: List of React-related projects; List of React Components

Video

Intro to Web Security

2020-02-22

How to build web apps securely. The bare minimum cryptography and security principles that every web developer should know.

Prerequisites

comfortable w/ programming (in any language)
comfortable with web development (understanding of HTTP, browsers, databases)

How to Make Secure Web Applications

How to think about web app security in general, OWASP Top 10 Web App Vulnerabilities, high level advice

authentication, injection, access-control, XSS

: Lecture Notes
OWASP: OWASP; OWASP Top 10; OWASP Proactive Advice; OWASP Cheatsheets

Video

Exercise

: OWASP Vulnerabilities Exercise

Video

crypto fundamentals + how they apply to web apps

passwords, random-number-generation, uuids, encryption, message-authentication, cookies, hashing

Video

Exercise

: Exercise

Video

Further Reading

Cryptography: How Cloudflare uses true random numbers; Crypto101 (free eBook); CryptoPals (crypto challenges); Cybok Knowledgebase (what cybersecurity experts should know about X); A Graduate Course in Applied Cryptography (free eBook); An Intensive Introduction to Cryptography (free eBook); The Joy of Cryptography (free eBook)

Proactive Advice

Video

Protecting yourself as an internet consumer

: Lecture Notes
HIBP: Email Check (Have I Been Pwned); Password Check (Have I Been Pwned)
Concepts: VPN; Phishing; Ransomware; CSRF; XSS; 2FA; OTP; U2F Keys
Apps/Extensions: Privacy Badger; uBlock Origin; NoScript; HTTPS Everywhere; AlgoVPN; 1Password; Bitwarden; Signal

Video

Web Dev & Javascript Training Syllabus	Every other Monday (see dates below) 9am - 5pm James Cash (james@bloomventures.io) Rafal Dittwald (raf@bloomventures.io) Google Meet
Intro to The Web & HTTP 2020-11-09	An overview of how 'The Web' works and how web applications are made. Prerequisites comfortable w/ programming (in any language) Show More Course Overview Video Intro to The Web A high-level introduction to the technologies that make up the web and how they fit together to make web applications. 'The Web', JS, DNS, 'The Internet', CSS, HTML, HTTP Video Exercises Review Questions Using CURL Research Questions Video Further Reading The Internet How does the Internet work? [MDN] How does the Internet work? The Web How the Web works? [MDN] What happens when you... (type google.com in your browser) cURL cURL Book cURL exercises Intro to HTTP An explanation of the HTTP protocol and how it's used to make web applications. Browser Dev Tools, HTTP Video Exercises Identify parts of HTTP requests & responses Identify appropriate HTTP method Identify malformed HTTP requests/responses Create a sequence diagram of a site interaction Video Further Reading HTTP HTTP [MDN] HTTP Made Really Easy Introduction to HTTP [LaunchSchool] Chrome Dev Tools Discover DevTools [Google]
Intro to Javascript 2020-11-23	Getting started with the Javascript programming language. Prerequisites comfortable w/ programming (in any language) Show More Intro to Javascript Javascript's evaluation model, syntax, and common gotchas. Clamp Video Exercises JS Exercises Javascript Coding and Debugging Work through some JS exercises together. Demo debugging tools (VSCode debugger, Chrome Debugger) Pokemon JSON Deep Equality Video Reviewing Exercises Conditional Counting Trie (Making, Autocomplete) Counting Nucleotides Async Typewriter Run Length Decoding Run Length Encoding Callbacks / Promises / Await Classifying Triangles Debouncing Manipulating JSON Data Merging Sorted Lists Deluxe FizzBuzz Higher Order Conditional Counting Video Other JS Features A quick overview of several JS features you might want to use in the future. Video Further Reading Javascript Javascript [LearnXinYMinutes] Javascript [MDN] Intro to Javascript [LaunchSchool eBook] VSCode Download
Intro to HTML & CSS 2020-12-07	The basics of HTML and CSS for making static web pages. Prerequisites comfortable w/ programming (in any language) Show More Intro to HTML HTML syntax, common tags and semantics Video Exercise Blog: Part 1 - HTML Intro to CSS Syntax CSS Syntax CSS Specificity Video Exercises CSS Specificity Quiz CSS Selectors Intro to CSS - Layout Box Model Diagram Demo HTML CSS Video Exercises Flexbox Froggy Blog: Part 2 - CSS Exercise Review HTML CSS Video CSS Extras Advanced CSS features, preprocessors and frameworks Video Further Reading HTML HTML [LearnXinYMinutes] HTML [MDN] Element Index [Html5Doctor] CSS CSS Term Definitions CSS Box Model [ShayHowe] Things I Wish I Knew About CSS CSS Reference (examples of all declarations) Pedantic Guide to CSS CSS Properties Almanac [CSSTricks] CSS Box Model [MDN] CSS [MDN] Interactive Box Model CSS [LearnXinYMinutes] Complex CSS Selectors [ShayHowe] CSS Specificity [SmashingMag] CSS Tools CSS Normalize CSS Resets SASS Tailwind CSS SMACSS Bootstrap Bulma Flexbox Visual Guide to Flexbox Flexbox Froggy (gamified flexbox exercises) Grid Garden (gamified grid exercises) HTML+CSS Learn to Code HTML&CSS [ShayHowe] CSS Zen Garden
Making a Web Application (Traditional MPA style) 2020-12-21	How to make a web application in the traditional multi-page style (server-rendered pages, no javascript on the front-end). Prerequisites comfortable w/ programming (in any language) comfortable w/ basic JavaScript (or Intro to Javascript module) comfortable w/ basic HTML (or Intro to HTML & CSS module) comfortable w/ basic HTTP (or Intro to The Web module) Show More Making a Web App Part One Server-generated HTML and forms Resources Web Forms Server-side Websites (MDN) Video Exercises Extending "Search" TODO List Video Cookies & Authentication Adding authentication and logins to a MPA web app, using cookies Auth Sequence Diagram Server JS Video Exercises Extending "Shop" TODO List, Continued Extension Exercises
Intro to Front-End Javascript 2021-01-11	An overview of the DOM, how to use Javascript in the browser, and various common browser APIs. Prerequisites comfortable w/ programming (in any language) comfortable w/ basic JavaScript (or Intro to Javascript module) comfortable w/ basic HTML (or Intro to HTML & CSS module) Show More Intro to Front-End Javascript The DOM, and how to query and modify it with Javascript Demo Adblock-Minus Resources The DOM (MDN) Video Exercise Querying and Modifying the DOM Querying and Modifying the DOM (Solution) Video Event Handling Demo counters Resources Intro to Events (MDN) List of Events (MDN) Video Exercise Extending Counters Example Client-Side TODO List Extending Counters Example (Solution) Client-Side TODO List (Solution) Video AJAX / Fetch Demo Ghibli Movies Resources AJAX (MDN) Fetch (MDN) Promises (MDN) Video Exercise Fetching and Displaying Remote Data Fetching and Displaying Remote Data (Solution - Part 1) Fetching and Displaying Remote Data (Solution - Part 2) Other Browser APIs A brief overview of other APIs available in the browser Browser API List (MDN) caniuse.com Feature Detection (MDN) Modernizr (feature detection lib)
Making a Web Application (SPA style) 2021-01-25	How to build a web application in the single-page style (building the entire interface on the front-end with 'vanilla' Javascript, and making a JSON API w/ Javascript/Node on the back-end). Prerequisites comfortable w/ programming (in any language) comfortable w/ basic JavaScript (or Intro to Javascript module) comfortable w/ basic front-end Javascript (or Intro to Front-End Javascript module) comfortable w/ HTTP (or Intro to The Web module) Show More Overview of SPAs SPA Architecture, Compare to MPA, Build TODO list in MPA style Demo Sequence Diagram HTML client js server js Video Exercise Extensions to TODO Auth with SPAs Demo HTML client js server js Video Exercise More Extensions to TODO
Intro to React 2021-02-08	How to use React for make modern SPA applications in Javascript. Prerequisites comfortable w/ programming (in any language) comfortable w/ basic HTML (or Intro to HTML & CSS module) comfortable w/ basic Javascript (or Intro to Javascript module) comfortable w/ basic front-end Javascript (or Intro to Front-End Javascript module) Show More React I High level understanding, using components, passing props React JS (reactjs.org) Getting Started (reactjs.org) Thinking in React (reactjs.org) Tutorial (reactjs.org) React Cheatsheet (devhints.io) Other Starter Resources (reactfordesigners.com) Video Exercise TODO with React React II Using state and hooks, fetching remote Video Exercise More TODO with React React III Wider React ecosystem List of React-related projects List of React Components Video
Intro to Web Security 2020-02-22	How to build web apps securely. The bare minimum cryptography and security principles that every web developer should know. Prerequisites comfortable w/ programming (in any language) comfortable with web development (understanding of HTTP, browsers, databases) Show More How to Make Secure Web Applications How to think about web app security in general, OWASP Top 10 Web App Vulnerabilities, high level advice authentication, injection, access-control, XSS Lecture Notes OWASP OWASP OWASP Top 10 OWASP Proactive Advice OWASP Cheatsheets Video Exercise OWASP Vulnerabilities Exercise Video crypto fundamentals + how they apply to web apps passwords, random-number-generation, uuids, encryption, message-authentication, cookies, hashing Video Exercise Exercise Video Further Reading Cryptography How Cloudflare uses true random numbers Crypto101 (free eBook) CryptoPals (crypto challenges) Cybok Knowledgebase (what cybersecurity experts should know about X) A Graduate Course in Applied Cryptography (free eBook) An Intensive Introduction to Cryptography (free eBook) The Joy of Cryptography (free eBook) Proactive Advice Video Protecting yourself as an internet consumer Lecture Notes HIBP Email Check (Have I Been Pwned) Password Check (Have I Been Pwned) Concepts VPN Phishing Ransomware CSRF XSS 2FA OTP U2F Keys Apps/Extensions Privacy Badger uBlock Origin NoScript HTTPS Everywhere AlgoVPN 1Password Bitwarden Signal Video

Web Dev & Javascript Training

Syllabus