# web-dev-base

**Repository Path**: jinguozhang/web-dev-base

## Basic Information

- **Project Name**: web-dev-base
- **Description**: 一个专注于Web开发基础的开源项目，提供前端、后端及全栈开发的通用框架和工具，助力开发者快速构建高效、稳定的Web应用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-04
- **Last Updated**: 2026-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web 前端开发学习记录

> 我的前端学习笔记仓库。目标：系统掌握前端，留下可快速复习的笔记。
> 开始日期：2026-06-03

## 怎么用这个仓库

- 每学一个知识点 → 在对应目录新建 `xxx.md`，复制 [`_模板.md`](_模板.md) 来写。
- 每篇笔记最后都有「一句话总结」，复习时**先扫总结，不会的再点进去看**。
- 进度看板见下方，用 ✅ 已掌握 / 🚧 学习中 / ⬜ 未开始 标记。
- 能跑的代码 demo 放进 [`04-项目实战/`](04-项目实战/) 或笔记同级的 `demo/`。

## 推荐学习顺序（按这个顺序学最顺）

1. **HTML 基础** → 先能写出页面结构（语义化标签）
2. **CSS 基础** → 盒模型 → Flex → Grid → 定位，先把「摆放元素」练熟
3. **JS 核心** → 数据类型 → 函数与作用域 → 闭包 → 原型链 → this → 异步（这是重点，慢慢啃）
4. **ES6+ 语法** → 解构、箭头函数、Promise、模块化（写框架前必备）
5. **动手做小项目** → 用纯 HTML/CSS/JS 做个 ToDo 或天气查询，把前面串起来
6. **选一个框架** → 推荐先 Vue（上手快），再了解 React
7. **工程化** → Vite、npm、Git，边做项目边补

> 原则：**基础(00) 一定要扎实，JS 核心 + 异步是分水岭**，别急着跳框架。

## 学习路线图 & 进度看板

### 00 基础
| 主题 | 状态 | 笔记 |
|---|---|---|
| HTML 语义化标签 | ✅ | [语义化标签](00-基础/HTML/语义化标签.md) |
| CSS 盒模型 | ✅ | [盒模型](00-基础/CSS/盒模型.md) |
| CSS Flex 布局 | ✅ | [Flex布局](00-基础/CSS/Flex布局.md) |
| CSS Grid 布局 | ⬜ | |
| CSS 定位与层叠 | ⬜ | |
| JS 数据类型 | ✅ | [数据类型](00-基础/JavaScript/数据类型.md) |
| JS 函数与作用域 | ✅ | [函数与作用域](00-基础/JavaScript/函数与作用域.md) |
| JS 闭包 | ✅ | [闭包](00-基础/JavaScript/闭包.md) |
| JS 原型与原型链 | ⬜ | |
| JS this 指向 | ⬜ | |
| JS 异步（Promise/async） | ⬜ | |

### 01 进阶
| 主题 | 状态 | 笔记 |
|---|---|---|
| ES6+ 新特性 | ⬜ | |
| TypeScript 基础 | ⬜ | |
| 浏览器事件循环 | ⬜ | |
| 浏览器渲染原理 | ⬜ | |
| 跨域 | ⬜ | |
| 浏览器缓存 | ⬜ | |

### 02 框架
| 主题 | 状态 | 笔记 |
|---|---|---|
| Vue 基础 | ⬜ | |
| Vue 响应式原理 | ⬜ | |
| React 基础 | ⬜ | |
| React Hooks | ⬜ | |

### 03 工程化
| 主题 | 状态 | 笔记 |
|---|---|---|
| Vite | ⬜ | |
| Webpack | ⬜ | |
| npm / pnpm | ⬜ | |
| Git 常用命令 | ⬜ | |

### 04 项目实战
| 项目 | 状态 | 技术栈 |
|---|---|---|
| [代码示例（HTML/CSS/JS 三层）](04-项目实战/00-代码示例/) | ✅ | HTML + CSS + JS |

## 推荐资源

- [MDN Web Docs](https://developer.mozilla.org/zh-CN/) — 最权威的前端文档，遇事不决查 MDN
- [JavaScript.info](https://zh.javascript.info/) — 系统的现代 JS 教程
- [Vue 官方文档](https://cn.vuejs.org/) / [React 官方文档](https://zh-hans.react.dev/)
- 收藏的好文章 / 视频统一记到 [`99-资源/`](99-资源/)

## 复习节奏建议

- **当天**：写完笔记，合上文档自己复述一遍「一句话总结」。
- **每周**：扫一遍本周新增笔记的总结，把忘了的标回 🚧。
- **每月**：挑一个 🚧 主题写个小 demo 巩固。