第一个月、HTML+CSS

第1周安排：

是了解前端入门的第一步，要学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周可以进行简单的页面搭建。

1、了解前端行业发展
2、了解HTML5对于网页的意义
3、学习常用标签/属性，进行结构搭建
4、掌握无序列表/有序列表/自定义列表
5、学习表单标签/属性，能创建常见表单结构
6、掌握标签嵌套规则/行内元素/块元素的使用
7、学习VSCode开发工具使用，能创建简单网页

学习资源：

课程：前端HTML5+CSS3+移动Web全套教程

第2周安排：
CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。

1、掌握CSS3的基本语法和使用
2、掌握CSS3各类型选择器/样式属性，进行快速开发
3、学习文本、字体等常见属性
4、盒子模型核心知识讲解，深入理解原理
5、掌握行内元素和块级元素设置与转换

学习资源：

课程：前端HTML5+CSS3+移动Web全套教程

第3周安排：

简单的样式开发还不够，通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。

1、浮动与定位核心知识，灵活运用实现网页布局
2、常见布局方法，解决布局常见问题
3、如何绘制圆角边框/阴影框/图片边框等特殊图形
4、掌握元素扭曲/移位/旋转，更自由的装饰HTML
5、BFC规范和浏览器差异

第4周安排：

CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。

1、大项目：结合H5/CSS3，完成PC小兔仙首页布局开发
2、掌握不同布局结构与技巧
3、掌握过渡的使用与缓动效果，实现常见小案例
4、运用动画效果，实现炫酷动画效果

第一个月课程表汇总：

前端HTML5+CSS3+移动Web全套教程，零基础学前端web首选黑马程序员

一个月详细的课程表，结合思维导图时间安排学习！

课程目录	详情
HTML认知	1. HTML的基本语法 2. HTML的排版标签3. 绝对路径和相对路径4. HTML的多媒体标签5. HTML的链接标签6. 案例：招聘案例、今日热词案例
HTML基础	1. HTML的列表标签 2. HTML的表格标签3. HTML的表单系列标签4. HTML的语义化布局标签 5. HTML的字符实体6.案例：学生信息表格案例、会员注册表单案例
CSS基础选择器+字体文本样式	1. CSS的引入方式 2. CSS的标签、类、ID、通配符选择器3. CSS的字体相关样式4. CSS的文本相关样式5. CSS的水平居中技巧6. Chrome调试工具的使用7. 案例：新闻网页案例、卡片居中案例
CSS选择器进阶+背景相关属性+元素显示模式+三大特性	1. CSS的后代、子代、并集、交集选择器 2. emmet基本语法3. hover伪类选择器4. CSS的背景相关属性5. 三种常见的元素显示模式6. CSS三大特性：继承性7. CSS三大特性：层叠性8. 案例：五彩导航案例
CSS盒子模型	1. CSS三大特性：优先级 2. CSS的权重叠加计算方法3. 盒子模型的组成部分4. 盒子模型的边框、内边距、外边距的作用和代码实现5. 外边距折叠现象6. 案例：新浪导航案例、网页新闻列表案例
CSS浮动	1. CSS的结构伪类选择器 2. 伪元素的基本使用3. 标准流的排布规则4. 浮动的特点和使用5. 清除浮动的常见方法6. 案例：小米布局案例、网页导航案例
CSS定位+装饰	1. 定位的特点和使用 2. 垂直对齐方式3. 边框圆角完成正圆和胶囊按钮效果4. 元素显示隐藏切换效果5. CSS完成三角形效果6. CSS的链接伪类选择器7. CSS的焦点伪类选择器8. CSS的属性选择器9. 案例：卡片模块hot图标案例、导航二维码居中定位案例
小兔鲜项目前置样式+项目搭建	1. 精灵图的使用 2. CSS的背景图片大小属性3. 文字和文本阴影效果4. SEO三大标签5. 项目结构搭建和基础公共样式6. 实战：实现「小兔鲜儿项目」 header模块开发
小兔鲜 header+footer+主体内容	1. 实战：实现「小兔鲜儿项目」 header模块开发 2. 实战：实现「小兔鲜儿项目」网站入口xtx-entry模块开发3. 实战：实现「小兔鲜儿项目」新鲜好物面板xtx-new-goods模块开发
CSS3高级	1. 平面转换 2. 空间转换3. 动画
Flex布局模型	1. Flex布局模型的使用 2. 项目：小兔鲜儿-移动端3. 项目：小兔鲜儿-PC端
移动端网页适配方案	1. Rem基本使用 2. Rem + 媒体查询适配3. Rem + flexible适配4. Rem适配原理5. 项目：游乐园6. vw/vh基本使用7. vw/vh适配原理8. 项目：B站
响应式	1. 媒体查询基本使用 2. 媒体查询实现响应式网页效果3. Bootstrap框架基本使用4. Bootstrap框架栅格系统5. 项目：腾讯全端

第二个月、JavaScript

黑马程序员JavaScript全套教程，Web前端必学的JS教程，零基础入门JavaScript

黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作

第5周安排

JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操作符，学完本周内容可以进行简单的JS代码编写。

1、掌握JS基本语法使用
2、掌握JS变量声明与提升的机理
3、掌握JS运算符操作与表达式
4、学习基本数据类型和复杂数据类型使用
5、深入理解数据类型转换与检测

第6周安排

本周继续深入学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容可以用简洁的代码实现强大功能。

1、掌握if，if elseif，switch等条件分支语句使用
2、掌握for、while、do while循环语句使用
3、掌握数组基本使用和常用方法
4、break和continue语句的特点及应用
5、运用数组知识，学习基本算法
6、使用简单的逻辑实现复杂业务逻辑

第7周安排

如想实现更炫的动态效果，那么操控网页元素很重要，通过掌握函数编程、DOM操作、事件以及BOM对象，让你能实现典型的触发和动态交互效果。

1、掌握DOM操作和DOM事件
2、掌握函数基础与函数高级应用
3、掌握BOM浏览器对象模型，与浏览器“对话”
4、掌握函数封装，提升编码质量

第8周安排：

面向对象是开发中非常重要的思想，在本周我们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。

1、学习this规则与使用
2、掌握构造函数概念以及创建、调用与使用
3、理解原型和原型链的关系与运用
4、闭包和作用域应用
5、熟练使用面向对象思想进行DOM编程
6、掌握JS模块化编程方式，编写高质量代码
7、掌握模块化开发技巧，解决企业级编程协同问题
8、贪吃蛇案例

第9周安排：

第九周可以利用电商项目来完成一个实战开发了，从0到1完成一个具备CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各类特效实现方案。
上面课程中，我们给出的案例是京东的网站开发；

1、结合H5/CSS3/JS，完成PC端课程中首页特效开发
2、项目动画效果分析，帮助更快梳理思路
3、实现典型JS特效效果：Banner轮播图、返回顶部动画、垂直菜单
4、学习正则表达式，完成常见手机号、邮箱、姓名等功能验证
5、完成京东网页开发

课程表：

阶段	详细内容
JavaScript基础语法	变量、数据类型、运算符、类型转称、函数、对象、流程控制、数组、Math、内置函数
WebAPI	宿主环境、节点查找、节点操作、节点关系、事件、事件流、事件委托、间歇函数、高阶函数、伪数组、执行环境、自执行函数、命名空间、排序、延时函数、正则、表单、自定义属性、重绘、回流、预加载、懒夹在、生命周期；
JavaScript高级	字面量构造函数、单体对象、面向对象、原型、class、getter、setter、柯里化、解构、箭头函数、Object、Array、const、严格模式、闭包

第三个月、ES6学习安排

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

补充一下，模块化知识在上面链接当中的228集开始，大家可以从228集开始看到258集。

第10周安排：

ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率

1、ES6基本语法与使用
2、掌握ES6中变量和常量的使用与区别
3、学习可以嵌入表达式的字符串字面量--模板字符串
4、掌握箭头函数的特点与应用
5、掌握如何自动解析数组或对象中的值
6、掌握参数默认值的使用
7、了解对象字面量更加简洁与灵活的表达方式

第11周学习安排

本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。

1、剩余参数与展开运算符的对比进行学习
2、了解如何实现减少逻辑或操作符的使用
3、认识ES6中新增的数据结构
4、了解ES6中新增的方法
5、了解遍历原理，以及学习新的循环方式
6、了解如何运用ES6 Promise进行异步编程
7、掌握Class基本语法的使用
8、掌握更加清晰与便捷的对象继承方式、面向对象的高级思想

写到这里不再按照周给大家做规划了，因为学习到这里大家已经输入成功入门前端了。可以自行安排接下来的学习时间了，你只需要接下来我们需要学什么内容即可。

第四个月、前端进阶学习之Ajax

web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程

本阶段需要学习内容
Ajax的作用、原生Ajax、同步异步、http协议、ajax封装
git历史、git与svn、git基本使用、分支、远程仓库、git冲突以及解决方案
项目初始化、前后端分离开发、工具的使用、用户的注册/登录/退出等
ES6简介、新增语法、内置对象扩展等
node.js环境安装、如何使用node.Js运行的代码...具体内容见课程
静态和动态网站、http模块使用、请求响应原理、HTTP协议、处理页面请求等
MySQL的概念、基本的增删改查等，以及利用Node.js操纵Mysql
express的概念、express的安装、后端路由、静态资源托管等；

web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程

重点内容
git基本概念
安装并且配置
基本操作
GitHub
远程仓库
SSH访问
本地分支操作

全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。

web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程

node基础
环境配置
fs模块
path模块
hettp模块
模块化
commonJS
模块的分类
模块的作用域、成员共享，加载机制

接下来要学习数据库的基本使用：

web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程

第五个月、热门框架

然后就是热门框架：

2021最全最新版VUE2.0+VUE3.0全套教程（上部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

2021最全最新版VUE2.0+VUE3.0全套教程（中部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

2021最全最新版VUE2.0+VUE3.0全套教程（下部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

课程亮点
工程化开发，现在市场还是直接引入 vue.js 到 html 页面，开发中不用这个方式，我们是直接按照工程化的方式进行讲解。
案例驱动教学，精心设计的 4 大案例，保证每一位学生听得懂、写得出、能实践。
深入浅出地讲解 Vue2 / Vue3 中的指令、组件、侦听器与计算属性，以及生命周期、数据共享、动态组件、插槽、路由等核心技术点。
同时，涵盖了 axios 在 Vue 项目中的最佳实践方案；以及 Vant 组件库的主题自定制方案。
最后一天的 Vue 基础收尾案例，助力学生更加轻松的过渡到 Vue 项目课的学习。

Vue 3.0 官方文档(英文) | Vue 3.0 官方文档中文 |
Composition-API手册 | Vuex 4.0 | Vue3 新动态