From 409c7869f2b8e709f03cfd01ec9713adf96f0edd Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Sep 2025 11:29:27 +0000
Subject: [PATCH 1/2] Initial plan


From 3d9861c33a1c9c83086aeb229eb2a8858c96f79d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 19 Sep 2025 11:34:21 +0000
Subject: [PATCH 2/2] Add study plan documentation and README

Co-authored-by: Wancj1128 <163379438+Wancj1128@users.noreply.github.com>
---
 README.md                           |  31 ++++++
 frontend-study-plan-vue.md          | 162 ++++++++++++++++++++++++++++
 frontend-study-schedule-12h-4x3h.md | 116 ++++++++++++++++++++
 3 files changed, 309 insertions(+)
 create mode 100644 README.md
 create mode 100644 frontend-study-plan-vue.md
 create mode 100644 frontend-study-schedule-12h-4x3h.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..72de05b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,31 @@
+# Web HTML CSS JS 学习仓库
+
+这是一个前端学习资源仓库，包含了 HTML、CSS 和 JavaScript 的实验练习和学习计划。
+
+## 学习计划
+
+我们提供了系统化的前端学习路径，帮助从零开始的学习者逐步掌握现代前端开发技能：
+
+- [前端学习计划（Vue 路线｜纯 CSS｜12周）](./frontend-study-plan-vue.md) - 完整的 Vue 3 技术栈学习计划
+- [12小时/周学习日程（4×3h 模式）](./frontend-study-schedule-12h-4x3h.md) - 详细的每周学习时间安排
+
+## This Week
+
+当前第1周学习任务清单：
+
+- [ ] Create a single-page resume/business card site (semantic HTML + responsive)
+- [ ] Deploy to GitHub Pages/Netlify/Vercel and add the live URL to README
+- [ ] Write a brief recap (what I learned, issues, next steps)
+
+## 实验内容
+
+本仓库包含以下实验练习：
+
+- 盒子布局实验 - CSS 盒模型和布局基础
+- 页面布局 - 完整页面结构设计
+- 浮动与定位 - CSS 定位和浮动技术
+- 列表 - HTML 列表元素的使用
+- 表单 - HTML 表单设计和交互
+- 专项集中实验 - 综合项目实践
+
+每个实验文件夹都包含了相应的练习文件和图片资源，适合循序渐进地学习前端开发技能。
\ No newline at end of file
diff --git a/frontend-study-plan-vue.md b/frontend-study-plan-vue.md
new file mode 100644
index 0000000..d214e97
--- /dev/null
+++ b/frontend-study-plan-vue.md
@@ -0,0 +1,162 @@
+# 零基础前端学习计划（Vue 路线｜纯 CSS｜12周）
+
+适用对象：从零开始的前端学习者  
+技术栈：Vue 3 + Vite + Vue Router + Pinia + Vitest + Testing Library（样式使用纯 CSS，不用 Tailwind/Styled Components）  
+学习强度：每周 12 小时（配套 4×3h 日程在 frontend-study-schedule-12h-4x3h.md）  
+输出要求：每周 1 个可运行 Demo（附在线链接）+ README 复盘
+
+---
+
+## 总览路线图（Vue + 纯 CSS）
+
+1) 基础三件套
+- HTML：语义化、表单、媒体、基础可访问性
+- CSS（纯 CSS）：选择器、盒模型、Flexbox/Grid、响应式、CSS 变量、媒体查询、过渡与动画
+- JS：语法、作用域/闭包、原型、DOM、事件、异步（Promise/async）、模块化
+
+2) 浏览器与网络
+- DevTools 调试与性能面板
+- HTTP/HTTPS、缓存策略、CORS、Cookie/Storage、安全（XSS/CSRF/CSP）
+
+3) 工程化
+- Node.js、npm（或 pnpm）
+- Vite 脚手架与环境变量
+- Git/GitHub 工作流、ESLint + Prettier
+
+4) Vue 生态
+- Vue 3（组合式 API）、组件化、props/emit、受控表单、插槽
+- Vue Router（嵌套路由、动态路由、导航守卫）
+- Pinia（state/getters/actions、模块化、可选持久化）
+- 样式：纯 CSS（BEM 命名 + CSS 变量 + 媒体查询；可选 CSS Modules）
+
+5) 质量与体验
+- 测试（Vitest + Vue Testing Library）
+- 可访问性（a11y）
+- 性能优化（代码分割、懒加载、图片优化）
+
+6) 进阶
+- TypeScript（在 Vue/Pinia/Router 中落地）
+- 认证（JWT/OAuth）与前端安全
+- 部署（Vercel/Netlify/GitHub Pages）
+
+---
+
+## 周计划（12周）
+
+> 每周执行："学 → 做 → 交付 → 复盘"，保持最小可用产品输出。
+
+### 第1周：HTML + CSS 入门（纯 CSS）
+- 学：语义化标签、表单与输入类型；CSS 选择器、盒模型、常用单位（px/%/rem）
+- 做：移动端优先的一页简历/名片
+- 交付：语义化 + 响应式的单页（含在线链接）
+
+### 第2周：布局与响应式
+- 学：Flexbox、Grid、媒体查询、响应式图片
+- 做：产品落地页（Hero/Features/Pricing/Footer）
+- 交付：手机与桌面均表现良好
+
+### 第3周：JavaScript 基础
+- 学：变量/类型、数组/对象、函数、this/箭头函数、模块化初识
+- 做：交互组件小合集（计时器/轮播/Tab）
+- 交付：原生 JS 交互组件集
+
+### 第4周：DOM、事件与数据处理
+- 学：DOM 操作、事件委托、表单校验、节流/防抖、JSON
+- 做：Todo App（增删改查 + LocalStorage）
+- 交付：可用的 Todo 应用
+
+### 第5周：异步与网络请求
+- 学：Fetch、Promise/async、错误处理、CORS、简单缓存策略
+- 做：公共 API 搜索（搜索/分页/加载与错误态）
+- 交付：API 搜索应用
+
+### 第6周：工程化与协作
+- 学：Node、npm、Vite、环境变量、ESLint/Prettier、Git 分支与 PR
+- 做：将第5周项目迁移到 Vite；建立 lint/format/build 脚本
+- 交付：工程化重构后的项目 + 使用说明
+
+### 第7周：Vue 3 入门（组合式 API）
+- 学：Vite + Vue 初始化、模板语法、ref/reactive、computed、watch、组件/props/emit、插槽
+- 做：组件练习（按钮/Input/对话框/通知）
+- 交付：3–5 个可复用组件（配纯 CSS 样式）
+
+### 第8周：路由与状态管理
+- 学：Vue Router（嵌套/动态/守卫）；Pinia（state/getters/actions、模块化）
+- 做：小型 SPA（多视图 + 守卫 + 全局状态）
+- 交付：带路由与全局状态的应用
+
+### 第9周：纯 CSS 设计体系与主题
+- 学：BEM 命名、CSS 变量（设计令牌：颜色/间距/字号）、媒体查询、prefers-color-scheme、过渡/动画
+- 做：为第8周项目统一样式系统；实现浅/深色主题切换（仅用 CSS 变量）
+- 交付：统一视觉 + 主题切换的 SPA
+
+### 第10周：测试、可访问性与性能
+- 学：Vitest + Vue Testing Library、a11y（语义/对比度/键盘导航）、性能（代码分割/图片懒加载）
+- 做：编写组件与 store 测试；跑 Lighthouse 并优化
+- 交付：核心模块测试覆盖 >60% + Lighthouse 合格
+
+### 第11周：TypeScript 实战
+- 学：基础类型、接口、泛型、类型推断；在 Vue/Pinia/Router 中落地
+- 做：将第8–9周项目核心模块迁移到 TS（组件 props/事件、store 类型）
+- 交付：严格模式构建通过、类型无报错
+
+### 第12周：综合实战与发布
+- 做：电商迷你站/课程平台/看板（三选一）
+  - 路由 + 状态 + API + 认证（模拟或简单后端）
+  - 表单校验与错误、a11y、性能优化
+- 交付：部署到 Vercel/Netlify，并写技术文档
+
+---
+
+## 纯 CSS 实施建议
+
+- 结构化命名：BEM（block__element--modifier）
+- 设计令牌：用 :root 定义 --color-primary、--spacing-sm、--font-size-base 等
+- 主题切换：html[data-theme="dark"] 覆盖 CSS 变量；或使用 @media (prefers-color-scheme: dark)
+- 响应式：移动端优先；使用 clamp() 进行流式字号/间距；媒体查询断点按内容需要设置
+- 动效：transition/transform 为主，避免大范围 box-shadow 与昂贵动画
+
+---
+
+## Vue 技术栈与工具
+
+- 脚手架：Vite（模板：vue）
+- 路由：Vue Router
+- 状态：Pinia（可选持久化插件）
+- 样式：纯 CSS（必要时可用 CSS Modules，但不引入 Tailwind/SC）
+- HTTP：fetch 或 axios（二选一）
+- 测试：Vitest + Vue Testing Library
+- Lint：ESLint（eslint-plugin-vue）+ Prettier
+- VS Code 扩展：Volar、ESLint、Prettier、Auto Rename Tag、GitLens
+
+---
+
+## 快速起步（预览）
+
+```bash
+# 新建项目
+npm create vite@latest my-vue-app -- --template vue
+cd my-vue-app
+npm install
+npm run dev
+
+# ESLint + Prettier（JS 版本）
+npm i -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier
+
+# Vue Router / Pinia
+npm i vue-router pinia
+
+# 测试
+npm i -D vitest @vitejs/plugin-vue @vue/test-utils @testing-library/vue jsdom
+```
+
+---
+
+## 自测清单
+
+- [ ] HTML/CSS：语义化、表单、盒模型、Flex/Grid、响应式、CSS 变量/主题
+- [ ] JS：作用域/闭包、DOM/事件、Promise/async、模块化、错误处理
+- [ ] 浏览器与网络：DevTools、HTTP/CORS/缓存、存储与安全
+- [ ] 工程化：Vite、环境变量、ESLint/Prettier、Git 工作流
+- [ ] Vue 生态：组合式 API、组件通信、路由、Pinia
+- [ ] 质量与进阶：测试、a11y、性能优化、TypeScript、部署
\ No newline at end of file
diff --git a/frontend-study-schedule-12h-4x3h.md b/frontend-study-schedule-12h-4x3h.md
new file mode 100644
index 0000000..f441ba5
--- /dev/null
+++ b/frontend-study-schedule-12h-4x3h.md
@@ -0,0 +1,116 @@
+# 12 小时/周学习日程（4×3h 模式｜Vue 路线｜纯 CSS）
+
+说明
+- 模式：每周 4 次，每次 3 小时（建议固定 4 天，如 Tue/Thu/Sat/Sun）
+- 方法：每次学习都进行"学 → 做 → 交付 → 复盘"，坚持小步快跑
+- 交付：每周至少 1 个可运行 Demo（含在线部署链接）+ README 复盘
+
+每次 3 小时建议结构
+- 专注 65min × 2 + 10min 休息
+- 复盘与提交 20–30min
+- 机动缓冲 10–20min（查文档/微调样式）
+
+---
+
+## 固定周节奏（适用于 12 周）
+
+- Session A（3h）学习与计划
+  - 阅读 MDN/文档，做要点摘记
+  - 制定本周任务清单与验收标准
+- Session B（3h）基础练习
+  - 针对本周关键点做 1–2 个小练习
+- Session C（3h）项目主功能
+  - 实现核心功能 A（最小可用版本）
+- Session D（3h）打磨与交付
+  - 实现功能 B；可访问性与细节；部署与复盘
+
+Tips
+- 每周至少 4 次提交：feat/bugfix/docs/refactor 分类清晰
+- 优先保证"能用+可部署"，再持续打磨样式与体验
+
+---
+
+## 第1周（HTML + 纯 CSS 入门，12h）
+
+目标
+- 掌握语义化标签、表单基础、CSS 选择器与盒模型、常用单位（px/%/rem）
+- 交付：移动端优先的一页简历/名片（语义化 + 响应式）
+
+Session A（3h）学习与计划
+- 学习：MDN（HTML 语义/表单、CSS 选择器/盒模型/display）
+- 输出：摘记与速查清单；本周任务与标准
+- 验收：提交 docs/notes/week1.md，列出关键概念与示例
+
+Session B（3h）基础练习
+- 练习 1：语义化结构（header/main/section/footer）
+- 练习 2：卡片组件（含图片/标题/按钮，hover 状态）
+- 练习 3：响应式图片（img + srcset/sizes）
+- 验收：/practice/week1 下 2–3 个最小页面，代码通过校验
+
+Session C（3h）项目主功能
+- 项目：个人名片/简历单页（移动端优先）
+- 实现：信息结构、基础排版、颜色/间距体系
+- 验收：375px 视口无水平滚动，导航/锚点可用
+
+Session D（3h）打磨与交付
+- 增强：表单联络区（label/placeholder/必填校验）、按钮状态、链接可见性
+- a11y：图片 alt、表单 label、颜色对比
+- 部署：GitHub Pages/Netlify/Vercel；README 附在线链接与截图
+- 验收标准：
+  - 语义化合理（header/main/section/footer/ul/label/alt）
+  - 响应式在 375/768/1024 正常、无水平滚动
+  - Lighthouse a11y ≥ 90（静态页通常可达）
+  - 交付：在线链接 + 源码 + README
+
+---
+
+## 第2周（布局与响应式，12h）
+
+目标
+- 掌握 Flexbox、Grid、媒体查询与响应式图片
+- 交付：产品落地页（Hero/Features/Pricing/CTA/Footer），手机与桌面表现良好
+
+Session A（3h）学习与计划
+- 学习：Flex 容器/项目属性、Grid 模板/区域命名、媒体查询
+- 输出：布局速查与常见布局草图；本周任务与标准
+- 验收：提交 docs/notes/week2.md
+
+Session B（3h）基础练习
+- Flex：导航栏（左右对齐）、三列信息条
+- Grid：杂志式区块（header/aside/main/footer）
+- 验收：/practice/week2 下 2–3 个布局示例
+
+Session C（3h）项目主功能
+- 页面：搭建落地页结构与 Hero/Features 区块（移动端优先）
+- 验收：主要区块在 375px 完整显示，排版清晰
+
+Session D（3h）打磨与交付
+- 完成：Pricing 卡片、CTA、Footer；桌面端断点布局
+- 性能：响应式图片 srcset/sizes、图片延迟加载；Lighthouse 测试
+- 验收标准：
+  - Flex/Grid 使用恰当，元素对齐合理
+  - 至少两个断点（<=640、>=1024）排版优
+  - Lighthouse Performance ≥ 90（静态页通常可达）
+  - 交付：在线链接 + 源码 + README（含断点策略与得分截图）
+
+---
+
+## 第3周（JavaScript 基础，12h）— 概要
+
+- 学：变量/类型、数组/对象、函数、this/箭头函数、模块化初识
+- 项目：交互组件小合集（计时器/轮播图/Tab）
+- 节奏：按 4×3h 模板执行（如需我可出逐 Session 清单）
+
+---
+
+## 第4周（DOM/事件/数据处理，12h）— 概要
+
+- 学：DOM 操作、事件委托、表单校验、节流/防抖、JSON
+- 项目：Todo App（LocalStorage 增删改查）
+- 节奏：按 4×3h 模板执行（如需我可出逐 Session 清单）
+
+---
+
+后续周次
+- 第5–12周按 frontend-study-plan-vue.md 的主题推进
+- 若需要，我可以为每一周生成"逐 Session（3h）任务 + 验收标准 + 资料链接"
\ No newline at end of file