2023年最新前端学习路线【超详细版】

第一个月、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 新动态

第六个月、小程序-uni-app

了解小程序开发的一般流程序,熟悉小程基础组件的使用,能够基于 wxml 和 wxss 实现小程序的界面布局,基于模板的数据绑定实现数据的动态渲染,基于 API 实现与服务端的数据通信,以及熟悉其它高级 API 的使用。

黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)

黑马程序员Web前端教程_零基础玩转微信小程序

6.2 uni-app

理解 uni-app 实现跨平台开发的原理机制,理清单文件组件与原生小程序组件的对应关系,以及 uni-app 开发小程序时开发时与原生小程序的差异。

前端开发利器vue,微信小程序快速开发实战,黑马程序员前端web教程

最后一个月!学习安排

本阶段是深入理解组件化和模块化开发的思想,三大主流框架之一,满足企业招聘中的岗位要求。

TypeScript 基础+高级

2023年最新前端学习路线【超详细版】_第1张图片

前端热门教程推荐|五天从零基础学会TypeScript

面试准备:

面试是通往成功就业的关键一步,本周包含布局基础以及JS和ES6等常见考点和经典面试题分析,带你把知识串成线,掌握前端面试技巧,顺利通关基础技能面试。

  • 1、H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧
  • 2、原型和原型链的5个原则与面试解题技巧
  • 3、变量类型/计算/构造函数的面试解题技巧
  • 4、作用域和闭包的执行上下文/this面试解题技巧
  • 5、异步和单线程/常见的内置对象面试解题技巧
  • 6、DOM本质/节点操作/BOM操作面试解题技巧
  • 7、AJAX与事件解面试题技巧

框架、小程序以及全栈相关内容也是面试必考。本周带大家梳理的常见考点和经典面试题分析,理清面试解题方法论,完成最后一厘米的冲刺。

  • 1、Vue.js原理/MVVM面试解题技巧
  • 2、组件生命周期/父子组件传值面试解题技巧
  • 3、组件异步加载/缓存/抽离公共逻辑面试解题技巧
  • 4、React基础语法/事件面试解题技巧
  • 5、React组件生命周期/父子组件通讯面试解题技巧
  • 6、React函数组件与class组件区别面试解题技巧
  • 7、Redux/react-router面试解题技巧

你可能感兴趣的:(前端,学习)