现在做网页前端的学习路线是什么
发布网友
共7个回答
热心网友
初学者必看干货web前端学习路线图，随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。
Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。除此之外，目前web前端工程师日均岗位缺口超50000，平均薪资10820元/月。
对于零基础的人而言，要怎么学习web前端呢？
1、前端页面重构。主要内容为PC端网站布局、Photoshop工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配PC端、移动端、平板设备等。
2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6到ES10新语法实践、jQuery应用及插件使用、设计模式及插件编写、封装JS工具库及WebAPIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC端全栈开发项目等。学习目标是可以掌握前端工程化工具，如git、gulp、webpack等，搭建项目及开发项目。
3、Node.js+前端框架。主要内容为Node.js全面进阶、Koa2+MongoDB搭建服务、Vue.js框架、React.js框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够完成前后台相关功能，胜任HTML5全栈开发工程师职位。
很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功。
热心网友
学习HTML5，可以了解HTML5课程大纲，分阶段学习，详细的阶段学习课程如下：
第一阶段：PCterminal
PC端页面重构
1、认知行业、岗位、部分专业术语，就业趋势与行业未来展望；
2、HTML5核心元素及布局应用；
3、CSS3核心属性及布局应用；
4、图形、图像软件的使用（PS,FW,AI）；
5、浏览器兼容及解决方案；
6、图片整合、滑动门及宽高自适应等高级应用技术；
7、初步接触JS。
PC端交互开发（原生JS）
1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法；
2、DOM操作和BOM操作；
3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构；
4、Ajax动态读取数据、异步操作、与DOM、JSON的结合使用；
5、各种主流浏览器兼容性处理；
6、单例、工厂、代理、观察者等设计模式；
7、ECMA6.0新特性介绍。
PC端交互开发 （JQuery）
1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念。
2、jQuery各种选择器的使用，及选择器的应用优化；
3、Dom节点操作、插入、删除、复制、移动节点等操作；
4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用；
5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题；
6、表单开发，设计可用性表单、表单验证、增强型表单；
7、Ajax、XMLHttpRequest 基础、jQuery Ajax、工具函数、缓存；
8、在jQuery中编写插件、插件扩展、插件应用、jQuery.pagination分页、jQuery.qtip信息提示、 jQuery.artDialog弹出层、jQuery.jscrollpane滚动条；
9、理解模块式开发，以及requirejs插件的使用。
PC项目实训
1、了解项目需求，项目流程；
2、了解项目管理，模块分配，项目时间预估；
3、了解产品周期，参与团队协作；
4、综合运用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技术，完成大型PC端项目开发。
第二阶段：Mobile terminal
HTML5+CSS3新添特性
1、HTML5概述，新增的元素和废除的元素、全局属性；
2、HTML5基础：新增文档结构元素（Article、section、nav）智能表单、文件API（FileList对象和File对象、FileReader接口）、拖放API；
3、CSS3基础：新增的后代选择器、伪类选择器、文本阴影、圆角、盒阴影、变形处理（transform）、动画（transitions）、帧定义（key-frames）、旋转（rotate）、 animation；
4、HTML5多媒体audio音频元素、Video视频元素、视频回调事件；
5、本地存储web storage、本地缓存；
6、定位基础知识以及原理，结合google（高德）地图定位；
7、响应式布局概念以及语法（@media）、web网页和mobile网页的区别、样式继承；
8、Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、创建动画。
WebAPP项目开发及实训
1、angular.js、backbone.js；
2、数据交互，ajax与DOM交互应用；
3、HTML5+CSS3在实际项目中的应用；
4、项目管理，模块分配，项目时间预估；
5、产品周期，团队协作；
6、微信场景开发；
7、微信平台互动开发。
第三阶段：混合应用开发及实训
混合应用开发及综合实训
1、混合开发原理；
2、APP与webAPP；
3、混合应用与HTML页面交互；
4、通过客户端传递数据；
5、项目的版本迭代；
6、项目打包与应用，生成APK。
热心网友
前端学习路线
阶段1.前端核心基础
阶段2.HTML5 + CSS3 + 移动端核心
阶段3.移动端
阶段4.服务器端
阶段5.JavaScript高级
阶段6.前端必备
阶段7.高级框架
阶段8.小程序
热心网友
分享一份完整的前端学习路线，包括每阶段需要掌握的知识点，可以参考下。
1、PC端页面制作与动画特效
学习HTML+CSS搭建网页、CSS动画特效、PhotoShop切图等基础知识，获得初级Web前端工程师技能，主要进行PC端网页制作与样式设计实现，能够配合UI设计师进行项目开发。
2、移动端页面制作与响应式实现
讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式进行移动端与PC端适配。
3、JavaScript与jQuery开发
同HTML5基础知识一样，JavaScript开发与jQuery开发是职业晋升必备的技能包，获得中级Web开发工程师技能，主要进行页面行为交互，实现网站常见特效，加轮播图，选项卡，拖拽效果等，并能配合UI和后端进行项目开发。
4、HTML5高级框架技术开发
常用的Vue框架开发，React框架开发，Angular框架开发，数据可视化技术。可获得中级Web前端工程师技能，主要适用框架开发企业项目，实现单页面应用开发。可以完成复杂的数据交互应用场景，具备开发项目能力。
5、全栈前后端技术开发
Node.JS技术，其他后端技术，如Java或PHP。可获得高级Web前端工程师技能，主要进行前后端全栈样式开发，能完成一个中小型项目的前后台，对于网站开发有着非常熟练的编程能力。
可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师、中级前端开发工程师、高级开发工程师等职位的要求。
当然对于有基础某个环节薄弱的同学，可以只学单独一个阶段，加深巩固。
热心网友
Web前端开发入门
- 了解HTML发展史，介绍前端开发涉及范畴
- 前端开发工具介绍（Dreamweaver、Notepad++、Sublime Text、WebStorm）
- 前端调试工具介绍（Chrome浏览器控制台、Charles抓包、Weinre）
- 本地开发环境搭建（PHP、Node）
- HTML基本标签（链接、图片、表格、表单、列表等）
- CSS基础属性（层叠、继承、盒模型、容器、溢出、图片精灵等）
移动Web开发
- HTML5新增元素与属性
- CSS3选择器、位移与变形、过渡动画、关键帧动画、弹性盒模型
- 媒体查询、响应式设计、iconfont字体使用
- 移动端页面设计规范与切图
- meta标签详解、flexbox详解、rem使用
- 移动端页面布局
原生JavaScript开发
- 基本语法、数据类型、变量复制
- 函数、闭包、匿名函数、参数传递
- BOM与DOM、事件类型、AJAX实现
- cookie存储、正则表达式
- 执行环境与作用域、内存泄露常见情况
- 面向对象基础
jQuery介绍与学习
- jQuery框架介绍、插件扩展原理及定制设计
- AJAX（全局ajax事件处理、辅助函数、底层接口）
- 属性、事件、表单、选择器、DOM操作
- 设置和获取元素的CSS相关属性
- 用于针对特定DOM关联任意数据
- 为页面添加动画效果（淡入淡出动画、滑动滑动）
- 常用特效学习（tab页面切换、滑动门、焦点轮播图、导航条菜单、瀑布流、弹出层、倒计时）
Bootstrap介绍与学习
- Bootstrap介绍、入门例子创建、全局CSS样式
- 栅格系统、表单、表格、按钮、图片
- 组件：字体图标、按钮式下拉菜单、导航、分页、警告框、进度条等等
- 插件：过渡效果、滚动监听、标签页、工具提示、弹框提示、折叠收缩等等
微场景与微信小程序开发
- SwiperJS在微信场景项目中的使用
- WeUI介绍、页面布局、交互与动画
- 微信服务号接口(JSSDK)开发
- 微信小程序介绍及分析
- 创建项目、小程序实例及页面
- 框架、组件、API及工具详解
- 微信小程序实战项目开发
新一代前端框架VueJS
- AngularJS，ReactJS，VueJS比较和介绍
- 数据双向绑定、事件处理、组件化开发
- 组件构造器、生命周期、数据绑定
- 使用脚手架工具进行组件化开发
- vue-router、vue-resource、Vuex插件使用
- 基于Vue的SPA开发
前端开发工具大杂烩
- Node, NPM, Grunt, Gulp, Webpack工具介绍
- Git, GitHub使用以及GitHub Pages搭建
- 实时浏览器同步测试工具Browsersync
- Markdown介绍
就业指导
- 职业规划与指导
- 简历的构思整理与制作
- 面试技巧
- 与HR面对面模拟面试
热心网友
随着Web2.0思想的日益普及，让企业都慢慢认识到前端的重要性。前端开发人员的地位也日益提高，相应的技术要求要是越来越高，那么现在想成为一名合格的Web前端工程师应该怎样学习呢
Web前端学习路线图，希望对初学者有帮助。
1.Javascript 语言
全栈开发中，用的编程语言就是 javascript
2.HTML5 标签和 DOM
这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。
3.CSS3
学习通过 css 开发网页和各种可视 UI 组件。
4.SASS
利用 sass 语言，开发复杂的页面 css
5.Node.js
掌握Node.js 核心 API ，具备后端开发能力。
6.Express 5.x 框架
掌握 Express 框架，从而具备快速开发后端程序的能力。
7.socket.io 库
让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。
8.Mongoose 框架
可以让程序具备文档数据储存能力
9.Git 命令与 github
可以对项目进行版本管理，从而能团队开发项目。
10.Gulp 构建工具实战
通过 gulp 工具，灵活对项目进行构建。
11.Webpack
可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。
12.Jasmine & Karma
可以利用 Jasmine & Karma 轻松实现，多种浏览器同时进行单元测试，而不必切换界面。
13.前端相关框架
JQuery / Bootstrap / Vue.js /React / Angular通过框架帮我我们快速开发程序
14.移动端与桌面程序开发工具
phonegap / react-native / electron / 微信小程序开发
这套工具，基本上只是打包工具，和提供了一些特定平台 API ，开发还是使用之前的 Web 技术。
如果通过这套学习路线图学完，那么就业是毫无压力的，但是做为有志向的码奴，我们还需要展望未来和扩展眼界。
其实，很多想学习技术的同学都一方面是兴趣使然一方面是想找一份满意的工作，如果你学的技术对企业没有实际价值，那么也白瞎，(除非你是理论计算机学家)，就目前在“互联网+”趋势的引导下，Web前端工程师的需求只会越来越大，小白找个靠谱的培训机构一般3-6个月就差不多了，一定要打好基础，多敲代码。
希望对您有所帮助！~
热心网友
学习，找到对的方向是很重要的，一个好的开始意味着你已经成功了一半。前端学习路线主要有三点，下面我将像你详细介绍下：
一、初级阶段：前端初体验，感受视觉冲击，提升学习兴趣，打消学习疑虑
PS入门（前端UI协同工具蓝湖与标你妹工具使用)
HTML5，cSS3(大量CSS3网页特效制作)
移动端布局基础(媒体查询、页面适配)，响应式页面布局。
二、中级阶段：夯实基础，打通任督二脉，杜绝做一个API的搬运工
JS入门，
DOM操作，BOM，H5常用新API，Jquery之DOM操作，Ajax ;
JS高阶，面向对象(OOP)，原型、原型链，执行上下文栈，作用域、作用域链，This，闭包，ES6/ES7.Jquery页面特效+插件封装;
服务器知识Node.js (Express4) , MongoDB(mongoose)/Mysql. Websocket.
三、高级阶段：通往前端实战之路，时下最新开发框架与使用技巧，杜绝过时技术炒剩饭
Vue全家桶(Vue2.x+Vue-Router3.x+Vuex3.x+ElementUl2.x+Axios0.9)
React全家桶(React16.x+React-Route-Dom5.x+Rex4.x+React-Rex+Rex-Thunk)
微信小程序（登录态+微信支付)
Webpack4.x
