前端新手 30 天学习计划 - 打卡式学习路线

第 1 周 · HTML 与 CSS 基础 6 天

第 1 天 · 认识 HTML 标签与文档结构

学习目标：写出第一个结构完整的页面，理解常用标签的语义

搭建开发环境（VS Code + Live Server），新建第一个 .html 文件学习常用标签：标题、段落、列表、链接、图片、表格理解 DOCTYPE、head、meta charset 与 title 的作用手写一个个人简历静态页面（纯 HTML，暂不加样式）

推荐学习：DOCTYPE 与文档结构 head 头部信息语义化标签 HTML 教程目录

第 2 天 · 表单与用户输入

学习目标：掌握表单控件与提交流程

学习 form、input 各类型、textarea、select、button 理解 label、placeholder、required 等常用属性给简历页面加一个「留言」表单区

推荐学习：form 表单 input 类型大全文件上传

第 3 天 · CSS 初体验与盒模型

学习目标：理解样式如何作用于元素，掌握盒模型计算

学习选择器、类与 ID、内联/内部/外部样式表理解盒模型：content / padding / border / margin 掌握 box-sizing: border-box 与全局重置的意义给简历页面编写外部 style.css 并引入

推荐学习：盒模型与 box-sizing 选择器层叠与继承 CSS Reset

第 4 天 · 文本与背景样式

学习目标：排版与配色让页面有设计感

字体、字号、行高、颜色、文本对齐与装饰背景色、背景图、背景尺寸与重复练习：给页面配一套配色，调整可读性

推荐学习：line-height 行高 background-size 文本省略号

第 5 天 · 定位与浮动

学习目标：控制元素在页面中的位置

static / relative / absolute / fixed / sticky 的区别 z-index 层级与覆盖规则 float 与清除浮动的几种方式练习：固定顶部导航栏 + 相对定位的角标

推荐学习：position 定位 sticky 粘性定位 z-index float 与清除浮动

第 6 天 · Flex 布局与第 1 周复盘实战

学习目标：用 Flex 解决一维排列，并完成一个小作品收官

flex-direction / justify-content / align-items / flex-wrap 子项 flex-grow / shrink / basis 与 flex:1 实战：用 Flex 实现导航栏与卡片列表复盘自查：盒模型、定位、Flex 的核心概念是否掌握，页面在 375px 宽下是否还能看

推荐学习：flex 布局 gap 间距 Flex 演示器 CSS 速查表选择器优先级

第 2 周 · CSS 布局与响应式 6 天

第 7 天 · Grid 网格布局

学习目标：掌握二维布局利器

grid-template-columns / rows 与 fr 单位 repeat()、minmax()、auto-fit 自适应列数练习：相册网格 + 仪表盘布局

推荐学习：grid 网格布局 Grid 演示器

第 8 天 · 响应式与媒体查询

学习目标：让页面适配手机、平板、桌面

viewport 视口与移动端适配原理 @media 断点编写（移动优先策略） rem / em / vw / vh 相对单位的使用场景练习：博客首页加媒体查询，适配 768px / 480px

推荐学习：媒体查询视口 viewport vw/vh 视口单位容器查询

第 9 天 · BFC 与边距合并

学习目标：理解格式化上下文，解决布局疑难

BFC 的触发条件 BFC 解决 margin 重叠、浮动覆盖、高度塌陷练习：用 overflow 触发 BFC 清除浮动

推荐学习：BFC 块级格式化上下文 calc 计算

第 10 天 · 居中与常见布局模式

学习目标：总结套路，看到设计稿能快速下手

水平垂直居中的 N 种方案两栏布局（侧栏 + 主内容）与三栏圣杯布局等高列、底部固定的实现

推荐学习：居中与 Flex Grid 布局

第 11 天 · 过渡与动画基础

学习目标：让页面动起来

transition 过渡与常用缓动函数 keyframes 关键帧动画 transform 旋转/缩放/位移与 opacity 练习：按钮 hover 波纹 + 加载圆圈动画

第 12 天 · CSS3 视觉增强与第 2 周复盘

学习目标：阴影、渐变打造现代质感，并从特效合集临摹收官

box-shadow 与 text-shadow、border-radius、渐变（linear / conic） filter 滤镜与 backdrop-filter 毛玻璃浏览 CSS 特效合集，挑 5 个喜欢的逐行理解并改成自己的配色复盘：Grid / Flex / 媒体查询薄弱点重学

第 3 周 · JavaScript 基础 6 天

第 13 天 · 变量、数据类型与类型转换

学习目标：理解 JS 的类型系统

var / let / const 与变量提升、暂时性死区七种基本类型 + 对象，typeof 判断隐式与显式类型转换的坑（== 与 ===）

推荐学习：var let const 变量提升 typeof 与 instanceof 类型转换

第 14 天 · 运算符、流程控制与函数

学习目标：写出有逻辑的 JS

条件、循环、break/continue 函数声明与表达式、默认参数、剩余参数箭头函数与普通函数的区别练习：用函数实现一个简单的计算器

推荐学习：箭头函数 ES6+ 核心语法字符串方法

第 15 天 · 作用域与闭包

学习目标：面试高频，也是理解 JS 的钥匙

全局/函数/块级作用域与作用域链闭包的定义、应用场景与内存注意点练习：用闭包实现计数器与防抖

推荐学习：作用域 Scope 闭包防抖与节流

第 16 天 · 对象、数组与常用方法

学习目标：熟练操作数据结构

对象增删改查、遍历 for...in / Object.keys 数组方法：map / filter / reduce / forEach / sort 深拷贝与浅拷贝的区别

推荐学习：reduce 归并深拷贝深浅拷贝 Map 与 Set

第 17 天 · this 指向与原型链

学习目标：搞懂 JS 的两大谜题

this 的四种绑定规则与箭头函数 call / apply / bind 的区别 prototype 与 __proto__、原型链查找手写 new 与 instanceof

推荐学习：this 指向 call apply bind 原型与原型链 new 的原理

第 18 天 · 异步编程与第 3 周复盘：TODO 小项目

学习目标：掌握 Promise/async，并用纯 JS 做一个待办清单收官

Promise 三种状态与 then/catch/finally async/await 语法糖与错误处理用 fetch 获取一个接口数据并渲染实战：待办清单实现增删改查并用 localStorage 本地保存

第 4 周 · JS 进阶与 DOM/BOM 6 天

第 19 天 · 事件机制

学习目标：理解事件流与委托

冒泡与捕获、事件对象 e.target 事件委托的原理与好处阻止默认行为 stopPropagation / preventDefault

推荐学习：事件事件委托

第 20 天 · 事件循环与异步进阶

学习目标：宏任务微任务不再迷糊

Event Loop 执行机制宏任务与微任务的优先级 setTimeout / setInterval 的坑

推荐学习：事件循环 setTimeout 与 setInterval

第 21 天 · DOM 操作与性能

学习目标：少碰 DOM，多想性能

节点增删改查与属性操作重绘与回流的区别和减少手段 IntersectionObserver 实现懒加载

推荐学习：重绘与回流懒加载性能优化总览

第 22 天 · BOM 与浏览器存储

学习目标：操作浏览器的能力

window / location / navigator / history 对象 Cookie / localStorage / sessionStorage 的选型练习：记录用户访问次数

推荐学习：location 与路由 history 浏览器存储 localStorage

第 23 天 · 网络与 Ajax

学习目标：前后端数据交互

XMLHttpRequest 与 fetch 的写法 GET / POST 与常见状态码跨域原因与 CORS 解决方案

推荐学习：HTTP 状态码跨域与 CORS RESTful 规范 axios 请求库

第 24 天 · 安全、调试与第 4 周复盘：天气小应用

学习目标：综合运用异步 + DOM + 存储收官

XSS 注入与 CSP 防御、CSRF 与 Token / SameSite 防御学会用 DevTools 断点调试与 Network 面板实战：调用免费天气接口，渲染 7 天预报搜索历史存 localStorage，加上 loading 与错误兜底

推荐学习：XSS 与 CSRF HTTP 缓存内存泄漏排查 fetch 请求 JSON 序列化

第 5 周 · 框架入门、工程化与面试复习 6 天

第 25 天 · Vue 3 快速上手

学习目标：理解响应式与组件化

createApp、模板语法、指令与事件绑定 ref / reactive 响应式与 computed / watch 练习：用 Vue 重写 TODO 清单

第 26 天 · Vue 组件化与生态

学习目标：组件通信与路由、状态管理

props 与 emit、插槽 slot、provide/inject Vue Router 与 Pinia 的基本使用练习：拆分 3 个以上组件完成一个小商城页

第 27 天 · React 入门（对比 Vue）

学习目标：换一个框架拓宽视野

JSX 语法与组件思想 useState / useEffect 核心钩子对比 Vue 的响应式与 React 的重渲染

推荐学习：React 是什么 JSX useState 状态 useEffect 副作用 Vue 与 React 对比

第 28 天 · 工程化工具链

学习目标：了解现代前端如何构建项目

npm / pnpm 包管理与 package.json Vite 创建项目与开发体验 ESLint + Prettier 规范代码

推荐学习：npm 与包管理 pnpm Vite ESLint 代码规范 Prettier

第 29 天 · TypeScript 入门

学习目标：给 JS 加上类型

基本类型、接口 interface、类型别名泛型的简单使用练习：给 TODO 项目加类型

第 30 天 · 面试复习与模拟面试收官

学习目标：输出倒逼输入，完成 30 天收官

闭包、原型链、this、事件循环各能讲 3 分钟；盒模型、BFC、居中、Flex / Grid 过一遍框架原理：响应式、虚拟 DOM、Diff 能讲清；性能优化、首屏加载、缓存策略串一遍每天刷「今日面试题」并复述答案找人模拟面试或自问自答录音复盘，整理自己的前端知识笔记