# webLesson **Repository Path**: tree23/web-lesson ## Basic Information - **Project Name**: webLesson - **Description**: 前端课程讲义，每天更新，内含最新最热的面试题，以入职场拿高薪为核心目标展开 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 16 - **Created**: 2025-05-28 - **Last Updated**: 2025-05-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 前端工程师零基础就业体系课 前端入门如同学写毛笔字，如果你不知道从哪里开始，那就选择这门课吧！ > 前端技术栈发展迅速，体系课每6个月升级一次，参加完本课程后，可终身回听。 ## 前言 入行前端，是明智的选择！入行门槛低，小白易快速上手，岗位需求多，就业前景好 2022年春季全新版本，从知识体系、技术版本、项目复杂度、就业面试指导等多维度升级，省心省力 让你从0基础入门到全栈开发再到大型项目构建，系统提升开发能力，直达就业 紧跟企业需求，学的都有用，学了都能懂，提高效率、不走弯路 ### 就业方向广 - 需求广泛，多领域 - 多岗位都可就业 前端工程师 Web全栈工程师 H5移动开发工程师 小程序开发工程师 App混合开发工程师 Node.js工程师 桌面应用开发工程师 ### 职业前景好 - 人才长期稀缺 - 未来发展持续看好 入行工资可观 几乎所有行业都离不开前端 前端不会被淘汰 职业发展路线更长更广 ### 学习门槛低 前端从业者背景多样 没有限制 非IT背景？可学 IT背景？更要学 想转行？首选前端 没有大学学历？可学 ## 课程特点 - 紧跟企业需求 - "就好业"的人才培养体系 - 调研200+ 以上前端岗位需求 - 总结前端大牛最佳成长路线 - 提炼未来几年都不会过时的前端硬技能 - 知识系统全面 - 打造全栈能力的知识体系 - 覆盖前端 - 掌握企业级项目全流程开发 - 超值福利：面试题指导 - 学习曲线平滑 - 更适合小白的学习方案 - 内容循序渐进 - 案例 + 项目驱动教学，学习不枯燥 - 安装包、源码、讲义文档 - 资深讲师授课，生动有趣 - 丰富练习/项目/测试 - 多种学习方式让学习更有效 - 小节课后联系，巩固所学 - 阶段测试，检验学习效果 - 实战项目作业，检验成果 - 无忧学习体验 - 有问题不用愁专业老师来解答 - 作业批复指导 ## 2大部分，4大阶段，从0到全栈，让前端不至于前端 - 2大部分 - 线上部分：理论与实践相结合，时间灵活，随时随地 - 线下部分：参与团队项目协作，模拟真实企业开发 - 4大阶段 - 入门阶段：夯实前端必备基础 - 熟悉网页布局 - 精通组件交互 - 提升阶段：高效开发及跨端开发 - 组件化思想 - 移动Web App - Uni-app跨平台 - 强化阶段：开拓服务端技能，更有就业竞争力 - 微信/支付宝/抖音小程序 - Vue3.2与服务端API开发 - MongoDB 数据库 - 拔高阶段：深耕大厂钟爱技术栈，拓宽视野 - TypeScript - React 17 - egg框架 # 教学内容安排 ### 阶段一：前端基础入门 第1周 HTML5基础语法与标签 #### 学习目标 本周是入门前端的第一步，学会IDE开发工具的安装和使用，掌握H5嵌套关系和基础标签的应用，学完本周内容可以进行简单的页面结构搭建。 #### 课程安排 1. 了解前端行业发展趋势、工作产出物 2. 了解HTML5对于网页的意义 3. 学习常用标签/属性，进行结构搭建 4. 掌握无序列表/有序列表/自定义列表 5. 学习表单标签/属性，能创建常见表单结构 6. 掌握标签嵌套规则/行内元素/块元素的使用 7. 学习HBuilder/VSCode开发工具使用，能创建简单网页 第2周 CSS3基础语法与盒模型 #### 学习目标 CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发 #### 课程安排 1. 掌握CSS3基本语法和使用 2. 掌握CSS3各类选择器/样式属性，快速进行样式设置 3. 学习常用标签/属性，进行结构搭建 4. 盒子模型核心知识讲解，深入理解原理 5. 掌握行内元素和块级元素设置与转换 第3周 CSS3浮动定位与背景样式 #### 学习目标 简单的样式开发还不够，通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。 #### 课程安排： 1. 浮动与定位核心知识，灵活运用实现网页布局 2. 常见布局方法归纳，解决布局常见问题 3. 如何绘制圆角边框/阴影框/图片边框等特殊图形 4. 掌握元素扭曲/移位/旋转/缩放，更自由的装饰按钮/输入框等控件 5. 了解CSS图形绘制，画出奥运吉祥物“冰墩墩” 第4周 CSS3动画与穷游首页开发实战 #### 学习目标 CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。 #### 课程安排： 1. 大项目：结合H5/CSS3，完成PC端仿穷游首页布局开发 2. 掌握不同布局结构与技巧 3. 掌握过渡的使用与缓动效果，实现常见小案例 4. 运用动画效果，实现炫酷动画效果 5. 大作业：家居网页布局开发 第5周 JS基础语法与表达式 #### 学习目标 JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操作符，学完本周内容可以进行简单的JS代码编写 #### 课程安排： 1. 掌握JS基本语法使用 2. 掌握JS变量声明与提升的机理 3. 掌握JS运算符操作与表达式 4. 学习基本数据类型和复杂数据类型使用 5. 深入理解数据类型转换与检测 6. 小案例：计算器和表达式综合运用 第6周 JS流程控制语句与数组 #### 学习目标 本周继续深入学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容可以用简洁的代码实现强大功能。 #### 课程安排： 1. 掌握if，if elseif，switch等条件分支语句使用 2. 掌握for、while、do while循环语句使用 3. 掌握数组基本使用和常用方法 4. break和continue语句的特点及应用 5. 运用数组知识，学习基本算法 6. 使用简单的逻辑实现复杂业务逻辑 7. 小案例：常见算法综合运用 第7周 JS函数与DOM #### 学习目标 如想实现更炫的动态效果，那么操控网页元素很重要，通过掌握函数编程、DOM操作、事件以及BOM对象，让你能实现典型的触发和动态交互效果。 #### 课程安排： 1. 掌握DOM操作和DOM事件 2. 掌握函数基础与函数高级应用 3. 掌握BOM浏览器对象模型，与浏览器 “对话” 4. 掌握函数封装，提升编码质量 5. 小案例：有趣的动画效果开发 第8周 面向对象 #### 学习目标 面向对象是开发中非常重要的思想，在本周我们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。 #### 课程安排： 1. 学习this规则与使用 2. 掌握构造函数概念以及创建、调用与使用 3. 理解原型和原型链的关系与运用 4. 闭包和作用域应用 5. 熟练使用面向对象思想进行DOM编程 6. 掌握JS模块化编程方式，编写高质量代码 7. 掌握模块化开发技巧，解决企业级编程协同问题 8. 小案例：电子宠物游戏开发 第9周 项目实战：仿穷游JS特效开发 #### 学习目标 实战出真知，本周综合运用H5、CSS3和JS所学知识，从0到1完成一个具备CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各类特效实现方案。 #### 课程安排： 1. 结合H5/CSS3/JS，完成PC端仿穷游首页特效开发 2. 项目动画效果分析，帮助更快梳理思路 3. 实现典型JS特效效果：Banner轮播图、返回顶部动画、垂直菜单 4. 学习正则表达式，完成常见手机号、邮箱、姓名等功能验证 5. 大作业：家居网页JS特效开发 ### 阶段二：组件化与移动WebApp开发 第10周 ES6基础入门 #### 学习目标 ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。 #### 课程安排： 1. ES6基本语法与使用 2. 掌握ES6中变量和常量的使用与ES5中的区别 3. 学习可以嵌入表达式的字符串字面量——模板字符串 4. 掌握箭头函数的特点与应用 5. 掌握如何自动解析数组或对象中的值 6. 了解对象字面量更加简洁与灵活的表达方式 7. 掌握参数默认值的使用 第11周 ES6语法扩展 #### 学习目标 本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。 #### 课程安排： 1. 剩余参数与展开运算符的对比进行学习 2. 了解如何实现减少逻辑或操作符的使用 3. 认识ES6中新增的数据结构 4. 了解ES6中新增的方法 5. 了解遍历原理，以及学习新的循环方式 第12周 ES6之Promise与Class类 #### 学习目标 Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。 #### 课程安排： 1. 学习如何高效解决回调地域问题 2. 了解如何运用ES6 Promise进行异步编程 3. 掌握Class基本语法的使用 4. 掌握更加清晰与便捷的对象继承方式 5. 掌握更高级的面向对象编程思想 第13周 ES6之Module模块与Babel编译 #### 学习目标 ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。 #### 课程安排： 1. 了解企业级的开发形式——模块化的使用 2. 学习将一个复杂的功能拆分，从而提高复用率 3. 了解如何更好的维护代码 4. 掌握babel转换器的使用，解决ES6的兼容问题 5. 学习如何将Webpack与配合Babel使用，完成更高效的开发 6. 掌握Webpack项目构建配置 第14-15周 HTTP 协议、存储、Ajax #### 学习目标 本周将开启前后端数据交互的学习，来理解前后端开发的区别，了解网络通信的相关概念，并对与后台通信、获取数据有一个初体验。概念比较抽象，先作为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。 #### 课程安排： 1. 了解如何区分前后端 2. 理解HTTP协议，熟悉网络通信相关概念 3. 学习本地存储的多种方式，了解数据缓存机制 4. 了解JSON数据的几种书写格式 5. 熟悉原生Ajax请求流程与细节 6. 掌握常见的跨域技巧 7. 学习如何自己封装Ajax 8. 了解基于promise的Ajax插件——Axios 第16周 项目实战：仿穷游组件化开发 #### 学习目标 组件化开发是一种高级编程思想，适用于团队协作开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发能够更好的促进团队协作，提高开发和调试效率，可维护性更高。 #### 课程安排： 1. 综合运用H5/CSS3/ES6等知识，使用“组件化的开发思想”重构旅游网首页 2. 了解项目组件化划分方式 3. 了解模块化与组件化区别 4. 采用模块化与组件化结合的开发方式 5. 使用Webpack构建项目 7. 真实的数据接口，实现前后台联动 8. 通过自己封装的Ajax向后端请求数据 9. 使用Class、Module模块完成轮播图的基类，实现模块化，提高复用率 第17周 移动基础 #### 学习目标 移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。通过移动端基础知识的学习，能够独立实现适配不同移动端终端的页面。 #### 课程安排： 课程安排： 1. 了解移动基础概念 2. 了解移动端屏幕、移动端浏览器、操作系统的不同 3. 掌握Flex布局的使用 4. 掌握移动端常用的rem和vw适配方案 5. 学习流体布局的使用 第18周 移动进阶之高效开发 #### 学习目标 移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。 #### 课程安排： 1. 掌握移动端常用的touch事件 2. 掌握Grid网格布局 3. 学习响应式布局 4. 移动端开发中常见的问题 5. 学习如何从HTML、CSS、JavaScript三方面优化性能 第19周 项目实战：仿穷游移动webapp开发 #### 学习目标 接下来的一周，我们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程 #### 课程安排： 1. 综合运用H5/CSS3/ES6/移动知识，重构旅游网WebAPP的首页、目的地页 2. 符合企业标准的开发流程，从项目分析、项目搭建、模块开发到数据对接 3. 采用模块化与组件化结合的开发方式 4. 使用Webpack构建项目 6. 完成 18 个典型组件开发（搜索、商品、导航等组件） 7. 运用Swiper高效移动端插件开发轮播图 8. 使用Ajax 处理与获取数据 9. 如何处理多次请求的解决方案 10. 如何运用组件化思维，拆分和复用组件 11. 完成各组件性能的优化 第20周 小程序基础与小程序实战 #### 学习目标 本周开始学习爆火的轻应用开发技术——小程序 。通过对小程序知识的学习，能够独立开发企业级小程序，拥有解决主流小程序功能需求的能力。 #### 课程安排： 1. 大项目：结合Flex/Template模板，开发小程序首页/活动页/热门排行页 2. 了解小程序注册流程/注册方式/注册主体 3. 小程序的全局生命周期和页面级生命周期 4. 小程序基础语法与常用API 5. 小程序开发工具的调试办法 6. 小程序多页面下的开发工作流及目录结构 第21-22周 Sass基础与Vue.js基础语法 #### 学习目标 Vue.js是企业开发另一热门框架，易用、灵活、高效，对于初学者很友好。本周通过对Vue.js基础和Sass布局技术的学习，为后续的全栈项目开发打下基础。 #### 课程安排： 1. 掌握Webpack项目构建配置 2. 掌握基础语法与常见API 3. 组件的使用及组件的生命周期 4. Axios网络请求及路由使用 5. Vuex的引入、应用场景及项目中的实现 6. 使用Vue.js技术栈进行项目开发的方式方法 7. 掌握Sass布局基础 第23周 项目实战：Vue.js仿乐刻运动全栈项目前端开发（上） #### 学习目标 从本周开始进入到电商全栈项目开发，首先使用Vue.js前端实战的第一部分首页和商家详情页，还原实际开发流程，综合运用所学知识，完成页面开发，掌握开发中常见问题解决技巧。 #### 课程安排： 1. 综合运用Sass和Vue.js完成登录页/注册页/首页/商家详情页 2. 使用vue-cli4.0创建开发环境 3. 使用axios发送Mock请求 4. 使用路由守卫实现基础登陆校验功能 5. 动态路由/异步路由与组件拆分复用 6. 首页/商家详情页数据渲染 7. Vue.js项目中常见问题的解决方案 第24-25周 项目实战：Vue.js仿乐刻运动全栈项目前端（下） #### 学习目标 Vue.js前端项目实战的第二部分，实现电商核心业务订单和地址管理模块，掌握开发中常见问题解决技巧，真实数据访问，开发完整的Vue.js电商前端项目。 #### 课程安排： 1. 综合运用Sass和Vue.js完成订单提交页/地址列表页/地址编辑/地址新建页 2. 使用axios发送Mock 请求 3. 动态路由/异步路由与组件拆分复用 4. 订单提交页/地址列表页数据渲染 5. Vue.js项目中常见问题的解决方案 6. 步骤大作业：完成订单列表页和购物车列表页开发 第26周 全栈必备基础Node.js #### 学习目标 学前端不止于前端，从本周开始学习服务端基础知识，掌握什么是服务端以及服务端必备node.js，夯实基础，迈进前端全栈开发。 #### 课程安排： 1. 案例：搭建node.js服务器及创建MongoDB数据库 2. 了解什么是服务端，服务端与前端的关系 3. 掌握commonjs模块化与npm插件使用 4. 掌握inspect调试方法 第27周 koa2中间件与MongoDB数据库 #### 学习目标 真实企业开发离不开数据库，Koa2框架有效的提高开发效率，本周掌握前端必备的前端全栈开发知识，为后面开发全栈项目蓄力。 #### 课程安排： 1. 了解koa2中间件与洋葱圈模型 2. 了解关系型数据库与MongoDB基础API详解 3. 掌握node.js操作MongoDB方法与mongoose规范数据模型 第28-29周 项目实战：node.js仿乐刻运动全栈项目后端开发 #### 学习目标 本周开始进入到电商全栈项目的后端开发，对标企业标准开发流程。从登录实现方案、项目需求分析、接口和数据结构设计到业务开发，帮你打通前后端任督二脉，突破全栈技术瓶颈，为就业加码。 #### 课程安排： 1. 综合运用Node.js+koa2+MongoDB，实现电商全栈项目的后端 2. 掌握企业的开发流程与技巧，从0到1一步步实现 3. 项目采用前后端分离开发模式 4. 核心业务的数据库设计与实现 5. 真实数据接口和设计与实现 6. Koa工作流程及常见Koa中间件使用 7. 掌握前后端数据联调技巧，打通前后的数据交互 8. 常见MongoDB与nodejs集成 9. 了解cookie 和session的关系 10. 大作业：订单和购物车列表页的数据库和接口设计 ### 阶段四：TS & ReactJS开发与工程化构建 第30周 TypeScript与React.js基础语法 #### 学习目标 TypeScript和React.js是企业开发热门框架之一 。通过对TypeScript和React.js基础的学习，为后续的旅游项目开发打下基础。 #### 课程安排： 1. 理解JSX 语法与编程思想React UI 渲染原理 2. 掌握模块化样式加载与事件处理 3. 了解TS编译流程及配置TS编译器 4. 掌握副作用钩子使用及其作用 5. 掌握类组件与高阶组件解决交叉问题 6. 了解并掌握类组件于函数式组件区别于应用 7. 掌握组件间数据传递及组件的生命周期 第31-32周 React旅游网开发与工程化 #### 学习目标 本周结合TypeScript和React.js基础知识，开发React旅游网，及最终实现git部署和gulp工程化，掌握构建企业级项目和解决核心业务问题的能力，快速接入企业项目。 #### 课程安排： 课程安排： 1. 综合运用TypeScript和React.js完成旅游项目的前端页面 2. 核心页面：首页/详情页/注册页/登录页/购物车 3. 设计网站开发指南、系统设计与项目初始化 4. 使用React封装项目中用到组件，实现复用 5. 如何运用React-Redux进行状态管理 6. Ant Design组件库进行项目开发 第33周 就业必备基础技术面试分析 面试是通往成功就业的关键一步，本周包含布局基础以及JS和ES6等常见考点和经典面试题分析，带你把知识串成线，掌握前端面试技巧，顺利通关基础技能面试。 课程安排： 1. H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧 2. 原型和原型链的5个原则与面试解题技巧 3. 变量类型/计算/构造函数的面试解题技巧 4. 作用域和闭包的执行上下文/this面试解题技巧 5. 异步和单线程/常见的内置对象面试解题技巧 6. DOM本质/节点操作/BOM操作面试解题技巧 7. AJAX与事件解面试题技巧 第34周 就业必备框架与全栈技术面试分析 框架、小程序以及全栈相关内容也是面试必考。本周带大家梳理的常见考点和经典面试题分析，理清面试解题方法论，完成最后一厘米的冲刺。 课程安排： 1. Vue.js原理/MVVM面试解题技巧 2. 组件生命周期/父子组件传值面试解题技巧 3. 组件异步加载/缓存/抽离公共逻辑面试解题技巧 4. vue-router/data监听面试解题技巧+5道Vue.js真题演练 5. React基础语法/事件面试解题技巧 6. React组件生命周期/父子组件通讯面试解题技巧 7. React函数组件与class组件区别面试解题技巧 8. Redux/react-router面试解题技巧 9. 简历制作指导、投递与面试流程与技巧