Skip to content

Latest commit

 

History

History
199 lines (158 loc) · 3.63 KB

README.md

File metadata and controls

199 lines (158 loc) · 3.63 KB

Modern Web Application Architectures

A course teaching the first principles of modern web application architectures, concept by concept.

Lesson 1 - No tools, no frameworks, no libraries

Build a calculator web app with the following:

  • Plain text editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • One file for source code
  • Hosted on GitHub Pages

Materials

Lesson 2 - Add a code editor

Build a calculator web app with the following:

  • Code editor (new in this lesson)
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • One file for source code
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 3 - Add Node.js and npm (I'm not sure on the order of lessons 3 and 4, perhaps they should be swapped)

Build a calculator web app with the following:

  • Node.js and npm (new in this lesson)
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • One file for source code
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 4 - Add version control (I'm not sure on the order of lessons 3 and 4, perhaps they should be swapped)

Build a calculator web app with the following:

  • Git (new in this lesson)
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • One file for source code
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 5 - Add multiple files for source code, using script and link elements

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • Multiple files for source code, using script and link elements (new in this lesson)
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 6 - Add multiple files for source code, using modules

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • Multiple files for source code, using JavaScript modules (new in this lesson)
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 7 - Add a component model

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • Multiple files for source code, using JavaScript modules
  • Custom elements (new in this lesson)
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 8 - Add templating

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • Multiple files for source code, using JavaScript modules
  • Custom elements
  • lit-html (new in this lesson)
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 9 - Add state management

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • JavaScript
  • DOM API
  • Multiple files for source code, using JavaScript modules
  • Custom elements
  • lit-html
  • Redux (new in this lesson)
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy

Lesson 10 - Add a type system

Build a calculator web app with the following:

  • Git
  • Node.js and npm
  • Code editor
  • Modern web browser
  • HTML
  • CSS
  • TypeScript (new in this lesson)
  • DOM API
  • Multiple files for source code, using JavaScript modules
  • Custom elements
  • lit-html
  • Redux
  • Hosted on GitHub Pages
  • Article
  • Repository
  • Udemy