这套课的名字里有「零基础」三个字，但真正适合的读者，是已经摸过 HTML、CSS、JS 一段时间、却始终没能把页面写成一个完整项目的人。如果你连标签和选择器都没敲过，先补一段基础语法再回来，否则前面几章会跟得很吃力；如果你已经能照着教程做出静态页，却不知道下一步该学什么、工程里那些配置和框架到底解决什么问题，这套内容才对得上你的处境。

它主要解决哪个工作场景

前端岗位最典型的日常不是「写一个网页」，而是接手一个已有代码库，在别人的目录结构里加页面、改交互、调接口，并且保证本地能跑、能提交、能被构建。很多自学的人卡在中间层：单文件能写，拆成组件就不会组织；本地预览正常，一执行构建就报错；照着文档能用框架，但换一个项目结构又陌生。这套课的重心就落在这一段——从手写页面过渡到用主流框架组织应用，把「会写」变成「能交付一个小型可运行的项目」。

学完之后能独立做什么

  • 用前端框架搭建一个带路由、状态管理、接口请求的多页面应用，而不是把所有逻辑堆在一个文件里。
  • 看懂一个中等规模项目的目录结构，知道组件、样式、工具函数、接口封装分别放在哪、为什么这么放。
  • 独立完成「打开列表—加载数据—渲染—点击进入详情—修改后回写」这类最常见的业务闭环。
  • 遇到控制台报错时能定位到是构建配置、依赖版本还是业务代码的问题，而不是只会重启。

需要说清楚的是：它不负责把你变成能独立扛复杂架构的人。真实工作里还要补网络基础、浏览器渲染、调试工具、Git 协作，这些课程只能覆盖一部分，剩下的要在项目里磨。

资料结构和适合的基础

内容按「基础语法巩固—页面结构与样式—脚本交互—框架开发—项目整合」的顺序推进，前面几部分节奏偏快，默认你已经见过基本写法，讲的是容易出错的细节和工程习惯；到框架部分才开始真正铺开，配套的练习和项目是重点，别跳过。资源里有讲解、有示例代码，也有可以跟着改的练习素材，建议按顺序用，不要一上来就翻到框架章节。

基础判断标准很简单：能独立写出一个带表单校验和简单交互的静态页面，就适合从这套课的第一章开始。如果还做不到，先花两周把基础补齐，效率比硬啃高。

哪些人先别急着买

  • 想靠一套课直接拿到 offer 的人。课程给的是技能路径，简历和面试还得另外准备。
  • 已经工作一两年、需要深入工程化和性能优化的人，这套内容对你偏浅。
  • 完全零基础、还没写过一行动手代码的人，建议先确认自己能不能坚持每天写，再决定要不要投入这套体系课。

判断标准可以归结成一句：如果你缺的不是「知道前端有哪些东西」，而是「从会写语法到能交出一个项目」中间那段路，这套课值得按顺序走一遍；如果缺的是基础本身，先补基础更划算。

课程目录

01 HTML5+CSS3高效还原PSD效果图 01 HTML5-html系列课程的介绍 02 HTML5-了解上网的流程及相关知识 03 HTML5-html和css工作的规则 04 HTML5-安装工具及创建html文件 05 HTML5-首标签和尾标签 06 HTML5-html的基本结构 07 HTML5-如何使用liveServer插件 08 HTML5-meta标签和搜索引擎 09 HTML5-基础标签 10 HTML5-链接和图片标签 11 HTML5-列表和表格标签 12 HTML5-form表单 13 HTML5-行标签和快标签的特性 14 HTML5-id和class属性 15 HTML5-相关的符号 16 HTML5-h5新标签的使用 17 CSS3-CSS3课程介绍 18 CSS3-样式三种书写方式 19 CSS3-CSS选择器 20 CSS3-介绍谷歌开发者工具 21 CSS3-字体样式 22 CSS3-颜色的三种体现方式 23 CSS3-背景和边框的使用 24 CSS3-盒子模型 25 CSS3-浮动和文本对齐 26 CSS3-a和button的样式设计 27 CSS3-制作两种导航 28 CSS3-行与块标签的属性改变 29 CSS3-定位 30 CSS3-实战demo注册表单 31 CSS3-补充视频 32 CSS3-Colors 33 CSS3-Units 34 CSS3-Font 35 CSS3-BoxModel 36 CSS3-Display 37 CSS3-Background-Image 38 CSS3-Float-Position 39 CSS3-Selectors 40 CSS3-2D-Transform课程介绍 41 CSS3-2D-translate的使用 42 CSS3-2D-scale的使用 43 CSS3-2D-rotate的使用 44 CSS3-2D-skew的使用 45 CSS3-2D-origin的使用 46 CSS3-2D-Transition 47 CSS3-Animation 48 CSS3-Variable变量 49 CSS3-媒体查询(media-queries) 50 CSS3-弹性布局(flexbox) 51 CSS3-网格布局(grid) 52 HTML5高效还原PSD设计图 53 HTML5高效还原PSD效果图(2) 

02 JavaScript零基础到项目实战 

01 Javascript-vscode配置 

02 Javascript-console的使用 

03 Javascript-三种容器关键字 

04 Javascript-数据类型 

05 Javascript-类型转换 

06 JavaScript-数值运算和Math对象 

07 JavaScript-字符串方法 

08 JavaScript-模板字符串 

09 JavaScript-数组方法 

10 JavaScript-对象 

11 JavaScript-日期 

12 JavaScript-分支语句 

13 JavaScript-Switch分支 

14 JavaScript-循环 

15 JavaScript-函数 

16 JavaScript-window对象 

17 JavaScript-变量作用域 

18 JavaScript-DOM介绍 

19 JavaScript-获取单个元素对象 

20 JavaScript-获取多个元素对象 

21 JavaScript-获取节点 

22 JavaScript-添加元素 

23 JavaScript-替换和删除元素 

24 JavaScript-事件监听和事件对象 

25 JavaScript-鼠标事件 

26 JavaScript-键盘事件 

27 JavaScript-事件冒泡和事件代理 

28 JavaScript-本地存储LStorage 

29 JavaScript-重构页面和添加任务 

30 JavaScript-删除搜索元素 

31 JavaScript-所有数据实现本地持久化 03 ECMAScript6/7/8/9/10 01 ES6-数组方法(forEach) 02 ES6-数组方法(mapn) 03 ES6-数组方法(filter) 04 ES6-数组方法(find) 05 ES6-数组方法(every&some1) 06 ES6-数组方法(every&some2) 07 ES6-数组方法(reduce1) 08 ES6-数组方法(reduce2) 09 ES6-let和const 10 ES6-模板字符串 11 ES6-箭头函数 12 ES6-增强对象字面量 13 ES6-函数参数默认值 14 ES6-展开运算符 15 ES6-解构(对象) 16 ES6-解构(数组-对象) 17 ES6-面向对象(es5) 18 ES6-generator生成器(斐波那契数列) 19 ES6-generator生成器原理(迭代器实现) 20 ES6-generator实战demo(相亲网) 21 ES6-新的数据结构(map) 22 ES6-新的数据结构(set) 23 ES6-Symbol类型基础用法 24 ES6-Reflect内置对象 25 ES6-Proxy对象 26 ES6--Promise(三种状态) 27 ES6-Fetch(新的http请求方法) 28 ES6-Fetch(请求三种数据格式) 29 ES6-封装Fetch库(增删改查) 30 ES6-async和await(es7) 31 ES6-async封装fetch 32 ES6-promise的应用 04 Vue3+setup语法糖项目实战-个人博客 01 Vue3-最终成果展示 02 Vue3-创建vite项目 03 Vue3-组件嵌套 04 Vue3-定义属性和方法 05 Vue3-ref响应式数据 06 Vue3-ref和reactive 07 Vue3-ref和reactive的区别 08 Vue3-计算属性基本结构 09 Vue3-v-for的使用 10 Vue3-v-model双向数据绑定 11 Vue3-实战搜索 12 Vue3-watch和watchEffect 13 Vue3-props属性传值 14 Vue3-SinglePost 15 Vue3-声明周期钩子函数 16 Vue3-模拟数据json-server 17 Vue3-axios请求模拟的数据 18 Vue3-代码抽离和组合 19 Vue3-渲染tag标签 20 Vue3-配置路由 21 Vue3-显示详情 22 Vue3-加载动画 23 Vue3-新建博客组件(标签) 24 Vue3-提交数据和路由跳转 25 Vue3-布局右侧标签 26 Vue3-实现标签显示内容 27 Vue3-显示底部标签和作业 05 Vue3+Setup语法糖项目实战-图片上传管理系统 01 Vue3-成果展示 02 Vue3-搭建项目 03 Vue3-搭建导航 04 Vue3-容器组件 05 Vue3-展示图标 06 Vue3-注册全局组件 07 Vue3-模拟图片展示 08 Vue3-模拟后端和前后端连载 09 Vue3-请求数据 10 Vue3-defineProps 11 Vue3-动态显示图标 12 Vue3-排序箭头切换 13 Vue3-defineEmits 14 Vue3-实现排序 15 Vue3-搜索(复杂版) 16 Vue3-搜索(简单版) 17 Vue3-单选和多选 18 Vue3-显示或隐藏(修改和删除) 19 Vue3-删除数据 20 Vue3-实现弹窗 21 Vue3-实现更新 22 Vue3-实现自动选中文件名 23 Vue3-实现修改删除的提示框 24 Vue3-选择文件上传 25 Vue3-拖拽文件 26 Vue3-展示上传提示框 27 Vue3-渲染上传的数据名字 28 Vue3-处理提示框的按钮操作 29 Vue3-复用图标代码 30 Vue3-处理加载进度 31 Vue3-取消请求 32 Vue3-重新上传 33 Vue3-实时渲染页面效果 34 Vue3-实现locate关联 35 Vue3-provide和inject 36 Vue3-实现进度条的效果 37 Vue3-设置按钮的样式 

06 Vuex状态管理学习指南 

01 Vuex是什么? 

02 Vuex成果展示和项目创建 

03 Vuex使用Vue父组件的属性传值 

04 Vuex定义state和计算属性获取 

05 Vuex使用getters重构数据 

06 Vuex使用mutation修改全局状态 

07 Vuex使用actions发起异步方法 

08 Vuex使用modules模块化 07 Vue3TypeScript实战项目-后台管理系统 01 Vue3TypeScript项目成果展示 02 Vue3创建项目 03 Vue3创建路由 04 Vue3安装Element-Plus 05 Vue3渲染404和注册页面 06 Vue3实现注册表单的数据绑定 07 Vue3注册表单校验规则 08 Vue3注册表单rules的类型匹配 09 Vue3注册表单提交按钮校验 10 Vue3配置反向代理解决跨域 11 Vue3实现路由跳转 12 Vue3实现登录功能 13 Vue3实现路由守卫 14 Vue3请求数据携带token 15 Vue3请求拦截和响应拦截 16 Vue3解析token 17 Vue3使用pinia实现全局状态管理 18 Vue3布局导航 19 Vue3实现退出功能 20 Vue3动态展示数据和avatar 21 Vue3展示首页默认页面 22 Vue3展示用户信息 23 Vue3构建侧边栏 24 Vue3动态加载侧边栏 25 Vue3侧边栏实现跳转 26 Vue3显示数据的Table表格 27 Vue3处理table表格的设置 28 Vue3实现添加按钮 29 Vue3实现弹窗的布局 30 Vue3定义弹窗的数据 31 Vue3弹窗的类型匹配 32 Vue3解决弹窗的bug 33 Vue3实现添加数据 34 Vue3获取编辑数据 35 Vue3实现编辑和删除 36 Vue3实现分页展示 37 Vue3实现分页跳转 38 Vue3根据时间筛选数据 39 Vue3权限控制 

08 Svelte框架学习指南-项目实战 

01 课程介绍 

02 课程介绍和环境配置 

03 配置VSCODE 

04 项目结构 05 配置全局样式和字体图标