https://github.com/lastmjs/modern-web-application-architectures
A course teaching the first principles of modern web application architectures, concept by concept.
https://github.com/lastmjs/modern-web-application-architectures
Last synced: 3 months ago
JSON representation
A course teaching the first principles of modern web application architectures, concept by concept.
- Host: GitHub
- URL: https://github.com/lastmjs/modern-web-application-architectures
- Owner: lastmjs
- License: mit
- Created: 2019-02-14T23:08:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T06:21:28.000Z (over 6 years ago)
- Last Synced: 2025-01-19T22:50:26.335Z (5 months ago)
- Size: 19.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://lastmjs.github.io/mwaa-lesson-1/)
* [Source code](https://github.com/lastmjs/mwaa-lesson-1)
* 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