# minhnguyengia1910/learn-html-css-javascript architecture

> Architecture diagram of the GitHub repository minhnguyengia1910/learn-html-css-javascript, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/minhnguyengia1910/learn-html-css-javascript
- Repository: https://github.com/minhnguyengia1910/learn-html-css-javascript

## Overview

This repository is a small collection of Vietnamese HTML, CSS, and JavaScript learning notes and browser-demo files, not an application with a shared runtime workflow. A learner can read the theory and practice with exercises or demos. The sampled JavaScript materials cover language fundamentals, arrays and objects, and DOM APIs/events. The README is empty, and the demo HTML/CSS files were not sampled, so their internal links and behavior are not inferred.

Main entry points: [`My HTML/HỌC LÝ THUYẾT.html`](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.html) (HTML Notes), [`My HTML/demo.html`](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/demo.html) (HTML Demo), [`My CSS/HỌC LÝ THUYẾT.css`](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.css) (CSS Notes), [`My CSS/demo.css`](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/demo.css) (CSS Demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_html_css["HTML and CSS"]
  node_html_theory["HTML Notes<br/>[HỌC LÝ THUYẾT.html]"]
  node_html_demo["HTML Demo<br/>[demo.html]"]
  node_css_theory["CSS Notes<br/>[HỌC LÝ THUYẾT.css]"]
  node_css_demo["CSS Demo<br/>[demo.css]"]
  node_css_demo_page["CSS Demo Page<br/>[demo.html]"]
end

subgraph group_js_theory["JavaScript Notes"]
  node_js_fundamentals["JS Fundamentals<br/>[HỌC LÝ THUYẾT.js]"]
  node_js_dom["Arrays and DOM"]
end

subgraph group_js_practice["JavaScript Practice"]
  node_js_exercises["JS Exercises<br/>[baitap.js]"]
  node_js_demo_page["JS Demo Page<br/>[demo.html]"]
  node_js_demo["JS Demo Script<br/>[demo.js]"]
end

node_learner(("Learner"))

node_learner -->|"reads"| node_html_theory
node_learner -->|"opens"| node_html_demo
node_learner -->|"reads"| node_css_theory
node_learner -->|"reads"| node_css_demo
node_learner -->|"opens"| node_css_demo_page
node_learner -->|"reads"| node_js_fundamentals
node_learner -->|"reads"| node_js_dom
node_learner -->|"practices"| node_js_exercises
node_learner -->|"opens"| node_js_demo_page

click node_html_theory "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.html"
click node_html_demo "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/demo.html"
click node_css_theory "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.css"
click node_css_demo "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/demo.css"
click node_css_demo_page "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/demo.html"
click node_js_fundamentals "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.js"
click node_js_dom "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET%20PTIT.js"
click node_js_exercises "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/baitap.js"
click node_js_demo_page "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/demo.html"
click node_js_demo "https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/demo.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_html_theory,node_html_demo,node_css_theory,node_css_demo,node_css_demo_page toneBlue
class node_js_fundamentals,node_js_dom toneAmber
class node_js_exercises,node_js_demo_page,node_js_demo toneMint
class node_learner toneIndigo
```

## Components

### HTML and CSS

- [HTML Notes](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.html): `My HTML/HỌC LÝ THUYẾT.html`
- [HTML Demo](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20HTML/demo.html): `My HTML/demo.html`
- [CSS Notes](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.css): `My CSS/HỌC LÝ THUYẾT.css`
- [CSS Demo](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/demo.css): `My CSS/demo.css`
- [CSS Demo Page](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20CSS/demo.html): `My CSS/demo.html`

### JavaScript Notes

- [JS Fundamentals](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET.js): `My Javascript/HỌC LÝ THUYẾT.js`
- [Arrays and DOM](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/H%E1%BB%8CC%20L%C3%9D%20THUY%E1%BA%BET%20PTIT.js): `My Javascript/HỌC LÝ THUYẾT PTIT.js`

### JavaScript Practice

- [JS Exercises](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/baitap.js): `My Javascript/baitap.js`
- [JS Demo Page](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/demo.html): `My Javascript/demo.html`
- [JS Demo Script](https://github.com/minhnguyengia1910/learn-html-css-javascript/blob/master/My%20Javascript/demo.js): `My Javascript/demo.js`

### Other components

- **Learner**

## Connections

- Learner → HTML Notes: reads
- Learner → HTML Demo: opens
- Learner → CSS Notes: reads
- Learner → CSS Demo: reads
- Learner → CSS Demo Page: opens
- Learner → JS Fundamentals: reads
- Learner → Arrays and DOM: reads
- Learner → JS Exercises: practices
- Learner → JS Demo Page: opens