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

• Live application
• Source code
• Article
• Udemy course

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