# hps613/web architecture

> Architecture diagram of the GitHub repository hps613/web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hps613/web
- Repository: https://github.com/hps613/web

## Overview

This repository is a Chinese-language front-end learning knowledge base, intended to take learners from beginner concepts through advanced topics and serve as a reference. Its content spans browser foundations, JavaScript and asynchronous programming, frameworks, backend technologies, performance, and learning resources. The tree identifies these subject areas, but no source excerpts were provided; only the overall learning purpose is documented in the README, so internal sequencing and interactions are not asserted.

Main entry points: [`README.md`](https://github.com/hps613/web/blob/master/README.md) (Front-end Tutorial), [`16-前端综合`](https://github.com/hps613/web/tree/master/16-%E5%89%8D%E7%AB%AF%E7%BB%BC%E5%90%88) (Learning Routes), [`17-资源推荐`](https://github.com/hps613/web/tree/master/17-%E8%B5%84%E6%BA%90%E6%8E%A8%E8%8D%90) (Learning Resources)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_foundations["Web Foundations"]
  node_tools["Developer Tools"]
  node_html["HTML"]
  node_css["CSS"]
  node_css_advanced["Advanced CSS"]
  node_dom_practice["CSS and DOM Practice"]
end

subgraph group_javascript["JavaScript"]
  node_js_basics["JavaScript Basics"]
  node_es6["ES6 Syntax"]
  node_async["Async Programming"]
  node_js_advanced["Advanced JavaScript"]
end

subgraph group_frameworks["Frameworks"]
  node_vue["Vue"]
  node_react["React"]
  node_mobile["Mobile Web"]
end

subgraph group_practice["Engineering and Resources"]
  node_node["Node.js<br/>[11-Node.js]"]
  node_mysql["MySQL"]
  node_performance["Performance"]
  node_engineering["Front-end Engineering"]
  node_overview["Learning Routes"]
  node_resources["Learning Resources"]
end

node_learner(("Learner"))
node_knowledge_base["Front-end Tutorial<br/>[README.md]"]

node_learner -->|"learns from"| node_knowledge_base
node_knowledge_base -.->|"offers routes"| node_overview
node_knowledge_base -.->|"offers resources"| node_resources

click node_knowledge_base "https://github.com/hps613/web/blob/master/README.md"
click node_tools "https://github.com/hps613/web/tree/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7"
click node_html "https://github.com/hps613/web/tree/master/01-HTML"
click node_css "https://github.com/hps613/web/tree/master/02-CSS%E5%9F%BA%E7%A1%80"
click node_css_advanced "https://github.com/hps613/web/tree/master/03-CSS%E8%BF%9B%E9%98%B6"
click node_dom_practice "https://github.com/hps613/web/tree/master/08-%E5%89%8D%E7%AB%AF%E5%9F%BA%E6%9C%AC%E5%8A%9F%EF%BC%9ACSS%E5%92%8CDOM%E7%BB%83%E4%B9%A0"
click node_js_basics "https://github.com/hps613/web/tree/master/04-JavaScript%E5%9F%BA%E7%A1%80"
click node_es6 "https://github.com/hps613/web/tree/master/05-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9AES6%E8%AF%AD%E6%B3%95"
click node_async "https://github.com/hps613/web/tree/master/06-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B"
click node_js_advanced "https://github.com/hps613/web/tree/master/07-JavaScript%E8%BF%9B%E9%98%B6"
click node_vue "https://github.com/hps613/web/tree/master/12-Vue%E5%9F%BA%E7%A1%80"
click node_react "https://github.com/hps613/web/tree/master/13-React%E5%9F%BA%E7%A1%80"
click node_mobile "https://github.com/hps613/web/tree/master/09-%E7%A7%BB%E5%8A%A8Web%E5%BC%80%E5%8F%91"
click node_node "https://github.com/hps613/web/tree/master/11-Node.js"
click node_mysql "https://github.com/hps613/web/tree/master/10-MySQL%E6%95%B0%E6%8D%AE%E5%BA%93"
click node_performance "https://github.com/hps613/web/tree/master/14-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"
click node_engineering "https://github.com/hps613/web/tree/master/15-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96"
click node_overview "https://github.com/hps613/web/tree/master/16-%E5%89%8D%E7%AB%AF%E7%BB%BC%E5%90%88"
click node_resources "https://github.com/hps613/web/tree/master/17-%E8%B5%84%E6%BA%90%E6%8E%A8%E8%8D%90"

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_tools,node_html,node_css,node_css_advanced,node_dom_practice toneBlue
class node_js_basics,node_es6,node_async,node_js_advanced toneAmber
class node_vue,node_react,node_mobile toneMint
class node_node,node_mysql,node_performance,node_engineering,node_overview,node_resources toneRose
class node_learner toneIndigo
class node_knowledge_base toneTeal
```

## Components

### Web Foundations

- [Developer Tools](https://github.com/hps613/web/tree/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7): `00-前端工具`
- [HTML](https://github.com/hps613/web/tree/master/01-HTML): `01-HTML`
- [CSS](https://github.com/hps613/web/tree/master/02-CSS%E5%9F%BA%E7%A1%80): `02-CSS基础`
- [Advanced CSS](https://github.com/hps613/web/tree/master/03-CSS%E8%BF%9B%E9%98%B6): `03-CSS进阶`
- [CSS and DOM Practice](https://github.com/hps613/web/tree/master/08-%E5%89%8D%E7%AB%AF%E5%9F%BA%E6%9C%AC%E5%8A%9F%EF%BC%9ACSS%E5%92%8CDOM%E7%BB%83%E4%B9%A0): `08-前端基本功：CSS和DOM练习`

### JavaScript

- [JavaScript Basics](https://github.com/hps613/web/tree/master/04-JavaScript%E5%9F%BA%E7%A1%80): `04-JavaScript基础`
- [ES6 Syntax](https://github.com/hps613/web/tree/master/05-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9AES6%E8%AF%AD%E6%B3%95): `05-JavaScript基础：ES6语法`
- [Async Programming](https://github.com/hps613/web/tree/master/06-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B): `06-JavaScript基础：异步编程`
- [Advanced JavaScript](https://github.com/hps613/web/tree/master/07-JavaScript%E8%BF%9B%E9%98%B6): `07-JavaScript进阶`

### Frameworks

- [Vue](https://github.com/hps613/web/tree/master/12-Vue%E5%9F%BA%E7%A1%80): `12-Vue基础`
- [React](https://github.com/hps613/web/tree/master/13-React%E5%9F%BA%E7%A1%80): `13-React基础`
- [Mobile Web](https://github.com/hps613/web/tree/master/09-%E7%A7%BB%E5%8A%A8Web%E5%BC%80%E5%8F%91): `09-移动Web开发`

### Engineering and Resources

- [Node.js](https://github.com/hps613/web/tree/master/11-Node.js): `11-Node.js`
- [MySQL](https://github.com/hps613/web/tree/master/10-MySQL%E6%95%B0%E6%8D%AE%E5%BA%93): `10-MySQL数据库`
- [Performance](https://github.com/hps613/web/tree/master/14-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96): `14-前端性能优化`
- [Front-end Engineering](https://github.com/hps613/web/tree/master/15-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96): `15-前端工程化`
- [Learning Routes](https://github.com/hps613/web/tree/master/16-%E5%89%8D%E7%AB%AF%E7%BB%BC%E5%90%88): `16-前端综合`
- [Learning Resources](https://github.com/hps613/web/tree/master/17-%E8%B5%84%E6%BA%90%E6%8E%A8%E8%8D%90): `17-资源推荐`

### Other components

- **Learner**
- [Front-end Tutorial](https://github.com/hps613/web/blob/master/README.md): `README.md`

## Connections

- Learner → Front-end Tutorial: learns from (evidence: `README.md`)
- Front-end Tutorial → Learning Routes: offers routes
- Front-end Tutorial → Learning Resources: offers resources