零基础开始学 Web 前端开发，有什么建议？（视频教程）

桃扇骨 2022-11-07 11:32 221阅读 0赞

WEB前端看似简单，其实不然，要学的知识点很多很杂，对于零基础学习前端的小伙伴来说，一份详细的前端学习知识点大纲尤为重要。

下面，话不多说，直接上干货（全网最全，没有之一）。

PS：文末有惊喜（全阶段视频教程+学习资料），有需要的小伙伴可以找博主免费领，整理不易，希望对你的学习有所帮助！

web前端学习路线（包含各阶段的详细知识点），适合零基础的小伙伴。

第一阶段：前端页面重构

本阶段主要针对零基础的小伙伴，专业零基础入门，了解互联网，了解Web相关技术。学习完本阶段的内容后可具备以下技能：

具备静态网站设计与制作能力，可实现PC端与移动端布局；

了解开发工具的使用，浏览器调试控制台的使用等；

会使用切图软件进行页面制作，如PhotoShop的使用；

对HTML5新特性以及CSS3新特性有深入理解与掌握；

可实现响应式布局，一套代码适配PC端、移动端、平板设备等。

本阶段具体学习目录及详细知识点如下：

PC端网站布局

知识点：◆ HTML基础，CSS基础，CSS核心属性 ◆ CSS样式层叠，继承，盒模型 ◆ 容器，溢出及元素 ◆ 浏览器兼容与宽高自适应 ◆ 定位，锚点与透明 ◆ 图片整合 ◆ 表格，CSS属性与滤镜"

HTML5+CSS3基础

知识点：◆ HTML5新增的元素与属性 ◆ 表单域增强元素 ◆ CSS3选择器 ◆ 文字字体相关样式 ◆ CSS3位移与变形处理 ◆ CSS3 2D转换与过度动画 ◆ CSS3 3D转换与关键帧动画 ◆ 弹性盒模型 ◆ 媒体查询 ◆ 响应式设计

WebApp页面布局

知识点：◆ 移动端页面设计规范 ◆ 移动端切图 ◆ 流式布局（100%布局） ◆ 等比缩放布局（rem布局） ◆ 响应式布局 ◆ viewport ◆ rem/vw的使用 ◆ flexbox详解 ◆ 移动端reset, 1px border, 高清图片 ◆ 淘宝移动端页面适配方案

第二阶段：前后端网页交互

本阶段课程主要针对零基础进阶的内容，学习完本阶段的内容可具备以下技能：

能够独立完成常见的网页特效效果，如标签页、弹窗、轮播图等。

具备编程思维能力，可独立思考逻辑，会利用算法及数据结构进行开发训练。

了解前后端分工，前端与后端如何进行配合，完成- -个高质量的项目。

掌握jQuery库的基本使用，并能了解其实现的原理，并对jQuery插件进行使用。

掌握ES6到ES10提供的新语法及新特性，深入理解promise与模块化编程，可手写promise规范实现。

掌握前端工程化工具，如git、gulp、 webpack 等，搭建项目及开发项目。

本阶段具体学习目录及详细知识点如下：

原生JavaScript交互功能开发

知识点：◆ 基本语法 ◆ 循环语句 ◆ 函数与数组 ◆ String与Date ◆ BOM与DOM ◆ 事件 ◆ 拖拽效果 ◆ cookie存储 ◆ 正则表达式 ◆ Ajax ◆ 面向对象基础 ◆ 运动与游戏开发

面向对象进阶与ES5/ES6/ES7应用

知识点：◆ Promise ◆ 设计模式（观察者模式等） ◆ 原型链 ◆ 构造函数 ◆ 执行上下文栈与执行上下文 ◆ 变量对象与活动对象 ◆ 作用域链 ◆ 闭包 ◆ this ◆ ES5 ◆ ES6 ◆ ES7

JavaScript工具库自主研发

知识点：◆ DOM库 ◆ 事件库 ◆ AJAX库 ◆ 原型和继承库 ◆ MVVM核心库 ◆ 基于SPA的路由库

jQuery经典交互特效开发

知识点：◆ 时间轴特效 ◆ tab页面切换效果 ◆ 网页定位导航特效 ◆ 滑动门特效 ◆ 焦点图轮播特效 ◆ 导航条菜单效果 ◆ 瀑布流特效 ◆ 弹出层效果 ◆ 倒计时效果 ◆ 抽奖效果

PHP+MySQL后端基础

知识点：◆ Apache ◆ PHP ◆ MySQL ◆ HTTP(s)协议详解 ◆ Ajax进阶、跨域与Defered ◆ Apache与Nginx 环境搭建与配置 ◆ 接口的定义 ◆ Mock数据 ◆ Restful ◆ 前后端联调 ◆ 前端安全(XSS,CSRF,JSON注入)

前端工程化与模块化应用

知识点：◆ Gulp ◆ Webpack ◆ NPM ◆ Linux命令 ◆ Git/SVN ◆ CommonJS ◆ AMD ◆ CMD ◆ ES6模块化

PC端全栈开发项目

知识点：◆ 大首页、列表页与详情页 ◆ 展示与交互特效 ◆ 搜索 ◆ 登录与注册 ◆ 购物车 ◆ jQueryUI 与 jQuery EasyUI ◆ Bootstrap(ACE) ◆ Highcharts/Echarts ◆ ArtTemplate ◆ velocity ◆ smarty ◆ 云平台系统前端 ◆ Apache+PHP+MySQL服务器搭建

第三阶段：Node.js+前端框架

本阶段的课程主要针对有基础小伙伴的高级进阶内容，学习完本阶段的知识可以具备以下技能：

能够独立完成前后台相关功能，胜任H5全栈开发工程师职位。

了解工程化、自动编译、脚手架等内容，可实现-个小型开发工具。

掌握企业流行框架，可快速. 上手并能配合后端人员进行高效开发。

掌握移动Web App的开发模式，能够独立架构项目系统。

掌握小程序云开发，了解serverless无服务器技术及多端适配方案。

掌握React-native和Flutter进行混合开发的方式，并能独立搭建混合应用APP。

掌握桌面应用及可视化大数据，实现复杂数据展示类项目。

本阶段具体学习目录及详细知识点如下：

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中
    有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入
    我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了
    一些正在自学前端的初学者裙文件里面也有我做
    前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，
    需要的话都可以自行来获取下载。

Node.js后端开发

一、Node.js介绍

◆ 开发环境搭建M ◆ 模块与包管理工具M ◆ CommonJS模块M ◆ URL网址解析M ◆ QueryString参数处理M ◆ HTTP模块M ◆ HTTP小爬虫M ◆ request方法M ◆ 事件 events模块M ◆ 文件 fs模块M ◆ Stream 流模块M ◆ 原生路由与参数接收M ◆ 读取图片文件M ◆ npm scriptsM ◆ Yarn 与 PM2M

二、MongoDB

◆ MongoDB介绍与环境搭建 ◆ 数据库常用命令 ◆ Collection聚集集合 ◆ document文档操作 ◆ 聚集集合查询 ◆ NodeJS连接MongoDB

三、GraphGL

◆ GraphQL初探:从REST到GraphQL ◆ GraphGL安装 ◆ 准备数据源 ◆ 搭建GraphQL服务器 ◆ 数据查询

四、Express

◆ express 介绍 ◆ 安装和创建基于Express的项目 ◆ Express 4.1x 初始化项目详解 ◆ 路由简介 ◆ 模板引擎EJS ◆ 模板引擎Pug（Jade）

五、Koa2

◆ Koa2开始 ◆ 路由 ◆ 请求数据获取 ◆ 静态资源加载 ◆ cookie/session ◆ 模板引擎 ◆ 文件上传 ◆ 数据库MySQL ◆ JSONP实现 ◆ 测试与debug

六、测试框架mocha

◆ 搭建框架 ◆ 断言assert ◆ 项目测试 ◆ 运行多个测试

七、socket 即时通信项目

◆ Socket简介和通讯流程 ◆ 基于net模块实现socket ◆ WebSocket ◆ http://Socket.io

八、Node.js高级全栈项目

课程内容：◆ 基于M站+Node.js+MongoDB高级全栈项目开发

Vue.js前端框架

Vue.js开发基础

知识点：◆ WebApp开发基础(Webstorage,移动端事件,UI组件, Zepto, IScroll, Swiper) ◆ MVVM模式 ◆ 前端组件化 ◆ 单文件组件 ◆ 组件间传值 ◆ Vue实例 ◆ E19Vue实例生命周期 ◆ Vue的模版语法 ◆ 计算属性,方法与侦听器 ◆ 计算属性的 getter 和 setter ◆ Vue中的样式绑定 ◆ Vue中的条件渲染 ◆ Vue中的列表渲染 ◆ Vue中的set方法 ◆ 父子组件间的数据传递 ◆ 组件参数校验与非 props 特性 ◆ 给组件绑定原生事件 ◆ 非父子组件间的传值 ◆ 在Vue中使用插槽 ◆ 作用域插槽 ◆ 动态组件与 v-once 指令 ◆ Vue动画

应用Vue.js开发WebApp项目

知识点：◆ 环境配置 ◆ 项目代码介绍 ◆ 单文件组件与Vue中的路由 ◆ 单页应用VS多页应用 ◆ Mint UI ◆ Element UI ◆ 项目的联调，测试与发布上线

React前端框架

React 开发基础

知识点：◆ React简介 ◆ React开发环境准备 ◆ React中的组件 ◆ JSX语法 ◆ 拆分组件与组件之间的传值 ◆ React developer tools 安装及使用 ◆ PropTypes 与 DefaultProps 的应用 ◆ props，state 与 render 函数的关系 ◆ 深入了解React虚拟DOM ◆ 虚拟 DOM 中的 Diff 算法 ◆ React 中 ref 的使用 ◆ React的生命周期函数及使用场景 ◆ 使用Charles实现本地数据mock ◆ React 中实现 CSS 动画效果 ◆ react-transition-group 实现动画 ◆ Redux 概念简述和工作流程 ◆ Action 和 Reducer 的编写 ◆ ActionTypes 的拆分 ◆ 使用 actionCreator 统一创建 action ◆ UI组件和、容器组件及无状态组件 ◆ 使用Redux-thunk 中间件实现ajax数据请求 ◆ Redux-saga 中间件使用 ◆ React-redux 中间件使用

应用React开发WebApp项目

知识点：◆ Ant Design组件库 ◆ React Router 4 路由 ◆ 项目组件编写 ◆ 使用 Immutable.js 来管理store中的数据 ◆ 项目的联调、测试与发布上线

混合开发(Hybrid,RN)

微信公众号开发

知识点：◆ 微信公众号 ◆ 订阅号的基本功能 ◆ 使用百度BAE实现代码的快速上线 ◆ 使用Git完成线上代码部署 ◆ 公众号开发权限及功能接入 ◆ 微信JSSDK接口API ◆ 微信场景项目开发与接入

各类混合应用开发

课程内容：◆ 自主原生Navtive Hybrid(iOS、Android) ◆ 第三方Hybrid框架Cordova/Phone gap ◆ 第三方Hybrid框架MUI + HTML5

阿里钉钉企业E应用（支付宝小程序）

课程内容：◆ E应用功开发入门 ◆ E应用开发流程 ◆ E应用开发基础 ◆ E应用开发实战

小程序开发

微信小程序开发

知识点：◆ 微信小程序初探 ◆ 小程序入门必学 ◆ 小程序组件体验 ◆ 小程序大功能 ◆ 项目实战带你征服小程序