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