1. 2020年Web前端自学之路指南
今天小编要跟大家分享的文章是关于2020年Web前端自学之路指南。许多人可能跟着网络上的各种教程就入了前端这行的门，但大多数都只是机械的学习着资料中的内容。俗话说，选择要比努力重要。那么学习开发，首先应该要有一个清晰的学习路线。希望这篇文章，能为大家在选择未来的发展方向时提供一些参考和帮助。下面来和小编一起看一看吧！
1、基础学习
●HTML+CSS基础：
HTML进阶、CSS进阶、div+css布局、排版、html+css整站开发，样式美化和浏览器兼容
●JavaScript基础：
掌握Js基本语法、条件、语句和循环、js内置对象常用方法、ECMAscript、DOM、BOM、定时器和焦点图，并学习增强逻辑的常用算法，实现木马、拖放、放大镜等常见的网络特效。
●JavaScript高级特性：
正则表达式与JSON、正则表达式案例、JavaScript原理与库封装、闭包、函数节流、作用域链、面向对象基础、事件与运动框架封装
●JQuery基础使用：
DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件的基本使用，开发复杂的交互功能和效果，并能熟悉JQuery的插件开发机制。
2、HTML5+CSS3和移动Web开发
●HTML5：
HTML5新语义标签、HTML5表单、音频和告早视频、离线和本地存储、SVG、WebSocket
●CSS3：
CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作
●图像学：
Canvas、Canvas游戏、数据可视化、Heighcharts.js
●Bootstrap：
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用扰友乎模板、LESS和SASS
●移动Web开发：
跨终端WEB和主流设备简介、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、商城页面、滚屏
3、HTTP服务和AJAX编程
●WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍
●PHP基础：
PHP基础语法，使用PHP处理简单的GET/POST请求
●AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用
●AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI用法、使用Ajax实现瀑布流案例
4、面向对象进阶
●面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器
●面向对象三大特征：
继承性、多态性、封装性、接口
●设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程
5、封装一个属于自己的框架
●框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架
●框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装
●框架封装高级和补充：
JQuery框架雏形、可扩展性、模缓悉块化
6、模块化组件开发
●面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序
●面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS、CommonJS、ES6Moles
7、工程化&构建、主流的框架
●Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、项目驱动
8、Node.js全栈开发
●快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OS
X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试;掌握node.js全栈的解决方案和在服务器端JS高效开发
●核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO
●Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
●快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
●数据库：
mongoose/mongoDB、MYSQL
●Node.js开发电子商务实战：
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块
9、微信系列
●微信公众号
JS-SDK配置、定制菜单、回调、定制分享内容、扫一扫、地理位置、微信音频、图像、语音识别功能、服务器端curl
库、支付、卡券、微店、微信开发模式与公众号分析、统计分析
●微信小程序
小程序项目、uni-app、mpvue
10、移动APP(Web/Native/Hybrid)
●ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API
●Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)
11、其他
●职业素养
沟通表达、团队合作、目标管理、时间管理、心态管理
●就业指导
简历&投递技巧、面试&笔试技巧
12、推荐一些编程学习网站
01、哔哩哔哩
这个网站如果让我评价，可谓是上边的视频都是非常高质量的，你可以去搜索看一下。
02、菜鸟教程
这个网站虽然不是视频网站，一听名字就知道适合菜鸟的，但是基础的知识写的非常详细，很清晰易懂，非常适合刚开始学习编程的小伙伴。
03、W3School
之前刚开始学WEB开发时，经常在该网站，就是结合w3school学习前端，开发时，如果遇到记不清的标签，就去w3school搜索，平常有时间，就来慕课看前端视频。
类似这样的学习网站还有很多，该开始入门的话上面的网站足矣。其他的网站推荐还有腾讯课堂、实验楼、果壳MOOC学院等、知乎、掘金......
以上就是小编今天为大家分享的关于2020年Web前端自学之路指南的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
文章来源：原创前端猿前端猿指北
2. 零基础学web前端，应该先学啥
随着互联网的迅速发展，前端开发工程师成为市场上非常抢手的人才。很多对于IT完全零基础的同学都想学习前端。前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！
那么前端开发到底需要学什么？应该怎么学？接下来小编带你从零基础学习前端。
一、前端开发入门
如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料
在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。
在这个阶段你需要学习：
1、HTML+CSS基础
掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。
2、JavaScript基础
掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。
3、常用的前端工具
比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。
这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。
二、前端初级开发
在接下来的这一个阶段，我们的目标是达到前端开发行业的基本要求，让自己有底气出去找一份月薪8000以上的工作！
这个阶段我们要重点掌握这两方面的能力：
1、利用jQuery、Bootstrap等框架开发复杂的交互功能与效果；
2、利用HTML5、CSS3、Canvas进行移动端开发。
针对第一方面的能力，你需要学习：
1、JavaScript基本特效
能够实现图片轮播、拖拽、放大镜等常见网页特效。
2、jQuery基础
掌握jQuery常用API的使用方法，并且能够熟悉jQuery的插件开发机制。
3、Bootstrap响应式
掌握原生响应式实现机制，能够使用Bootstrap中的栅格式布局和响应式布局进行复杂页面的布局开发。
4、AJAX基础
充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。
5、UI流行框架
掌握jQueryUI的使用，快速高效实现页面的效果呈现。
学会了这些技能，你就能够独立制作电商类、企业类网站，实现常见JS动态效果，并且能够基于jQuery、Bootstrap等框架实现炫酷的效果和复杂的功能啦！
针对第二个方面的移动端开发，你需要学习：
1、HTML5、CSS3新特性
掌握HTML5、CSS3在移动端的使用技巧。
2、Canvas基础
掌握Canvas的基本画图API，做到能实现Canvas在报表和广告展示效果方面的应用，并且能够实现炫酷的展示效果。
3、移动Web框架
能够基于jQuery Mobile/Zepto等框架进行移动端JS功能开发。
掌握这两大方面的技能，你就能达到市场上对前端工程师的基本要求了。根据市场反馈数据看，薪资普遍在8000-13000元/月，赶快加油学习吧！
三、前端进阶开发
小编就知道你是一个有理想、有抱负的人，不会满足于做一个初级的前端开发工程师。在接下来的这个阶段，我们将走上前端的进阶之路，将自己的能力再往上提高一个等级。同样，薪资也会往上升一个等级！
但是，如果你是一个前端菜鸟，接下来可能会出现一些你没有用过或者没有听过的知识点。不要着急，你可以先收藏下来，在慢慢理解。
言归正传，在这个阶段，我们要重点掌握以下两个方面的能力：
1、在实现功能的同时，考虑代码的优雅性，注重代码的性能和重用性；
2、深入理解前端框架实现原理，并且能够开发和重构通用的前端组件。
在这个阶段你需要学习以下知识：
1、面向对象开发思维
2、JavaScript面向对象
3、JavaScript闭包、作用域链、原型链等高级特性
4、常用的设计模式
5、使用原生JavaScript的原理实现框架封装
6、jQuery框架封装原理
7、jQuery插件的实现原理
掌握jQuery插件的实现原理，深刻理解插件的两种扩展方式的实现机制。
8. 组件化和模块化开发：SeaJS、RequireJS
如果你熟练掌握以上技能，就能够具备解决复杂问题和技术难点的能力，并且能够独立设计开发复杂的功能模块。如果你达到这个水平，恭喜你已经能满足前端行业的中级需求，根据市场反馈数据看，薪资普遍在 13000-20000元/月！
四、前端开发高级
写到这里，连小编自己也激动了，因为在接下来的这个阶段，我们的目标是：进军全栈开发工程师！全栈开发工程师就是那种既精前端，又通后台，遇到问题能快速定位问题、解决问题的一类大牛！据职友集数据统计，北京全栈开发工程师月薪在20K-50K之间的占比高达60%，而且人才非常缺乏！
要晋级为全栈开发工程师，我们在这个阶段得做这些事情：
1、能从前端的全局角度认识流行框架的原理与实现模式；
2、深刻理解移动App的开发模式和技术选型；
3、熟悉Node.js的全栈式解决方案；
4、了解主流的后台技术和前后端协作方式，能从全局角度理解项目的整个生命周期。
相应的，你需要学习以下这些内容：
1、Web开发工作流框架：Yeoman/Grunt/Gulp/Bower等
掌握流行的前端工作流工具，可以让前端开发更方便更高效！
2、MVC/MVVM框架：AngularJS等
掌握前端MVC/MVVM框架实现机制，通过AngularJS的实践深刻理解MVC的开发模式，理解双向数据绑定等相关概念。
3、HTML5响应式框架
4、UI流行框架：jQueryUI、EasyUI、ExtJS等
掌握常见UI框架的封装原理，通过源码分析，深入理解组件化开发思想。
5、VUE.js
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
6、Ionic、Angular
掌握移动端混合开发模式，通过Ionic、Angular的结合，理解使用HTML5、CSS3、JS实现App开发的整体流程和实现机制。
7、React Native
掌握移动端ReactNative的开发模式。
8、HTML5 Plus
9、Node.js全栈式开发
掌握Node.js全栈式解决方案，实现JS在服务器端的高效开发。
如果你能熟练掌握以上四个阶段的知识技能，你就可以满足前端与移动开发行业的高级需求啦！
3. web前端开发需要掌握的几个必备技术
Web前端开发需要掌握的几个必备技术是：
HTML +_CSS核心、JavaScript、VUE框架
前端的应用非常广泛，基本网站、APP、HTML5小程序等都需要前端开发，所以只要是互联网产品基本都需要前端。
前端程序猿切页面写页面，Web上、H5上的炫酷效果，是前端开发大展身手的地方。最常见的用于前端开发的技术组合是：
HTML+CSS+JavaScript。
web前端是在开发人员中最直接面向产品、面向用户的设计人员，一个开发团队的成果是要靠web前端去展现，因为用户不会去关心后台的处理有多么强大。
后端开发是写后台，各种业务逻辑、数据处理、模块接口、客户端接口等等。后端开发者通常精通于一种Web编程语言和一个数据库管理系统。电商平台点击筛选条件下面为你筛选出来的宝贝的功能以及付款人数数据的变化等都是由后台来实现提供的。
目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端去做。
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
前端开发需要学习的技术
1 掌握基本web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3 必须学会运用各种web前端开发与测试工具进行辅助开发
4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
web前端有广阔的发展空间，app、小程序、移动端、pc端等都网站是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。
Web前端招聘岗位
• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师...
4. web前端技术包括哪些
web前端技术包括哪些内容？分享一份web前端的学习路线，包含每个阶段需要掌握的知识点，可以参考下
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前端一般在2万左右，4-6个月左右的时间。应该根据自己的实际需求去实仿碰地看一下，先好好试听之后，再选择适合自己的。只要努力学到真东西，前途自然不会差。
5. 零基础学习前端的顺序是什么
下面小编给大家分享一下前端开发的学习路线
一、HTML5+CSS3：HTML5和CSS3是通往Web工程师路上必须学会的基本内容，包括HTML5语法及使用技巧、HTML5常用标签、CSS语法及使用技巧、DIV+CSS布局方式、常见网页布局模式等等。
二、JS交互设计：JS交互技术可以赋予页面一个动态的效果展示，提升用户的浏览体验，包括JavaScript基本语法、DOM的各种操作、DOM编程、JavaScript常见兼容性方案、jQuery等等。
三、Node开发：Node.js不仅仅是一个框架，它是一个完整的JavaScript环境，配备了开发人员可能需要的开发工具。所以学好Node是在打通前后端开发中需要掌握的技术。这部分需要学习ES6的语法、兼容性、前端模块化开发、Webpack模块打包器、Node.js、JavaScript异步编程模型、模块化编程方式、Ajax数据交互等等。
四、前端框架：前端框架是Web开发人员需要熟练掌握的技能，并且在实际开发中是会被广泛应用的，需要学习Vue、React、Angular等框架、D3.js、Vue技术栈进行项目开发;掌握React技术栈、Webpack项目构建配置流程、Web项目的部署与发布等等。
五、小程序与APP开发：现在移动应用越来越受欢迎，掌握了小程序和APP开发技术可以增强自身竞争力，学习内容包括Canvas、小程序开发框架mpvue、ReactNative等 。
6. 如何从头做一个复杂的可拖拽前端页面编辑器界面，求思路
这种软件应该叫做组态软件，比如微软的Viso，而且微软也提供了Viso的开发SDK以供开发之用， 除此，Visual Studio也还提供了一个扩展控件，DSL专门提供这样的开发接口。 如果这些都不能满足你的要求的话，在C#中也有用WPF的画布（Canvas)来实现的
7. 想做web前端的工作，应该先学什么
一个专业的前端开发工程师是必须掌握前端开发三大基本基石HTML、CSS，JavaScript。光会这些还不够，有了这些语言还需要各种工具的支撑，比较常见的有Dreamweaver，Sublime，HBuilder。还有FontelloFontello、Secureheaders、Visual Studio CodeVisual Studio Code。
工具只能解决一些特定问题，要解决更加全面的问题就要接触到框架，三大基本框架有Angular、React、Vue，当然，以后还会接触到更多Bootstrap、Fbootstrapp、BootMetro、Gumby、IVORY、Kube这样的框架。另外，一个优秀的前端开发工程师可能还要掌握SEO、DOM、BOM、Ajax等技能，甚至，网站性能优化和服务器端的相关基础知识也是需要了解的。
学会这些还不够，前端开发是一门发展的学科，不是学好了就可以停止学习，后面还会接触到更多新的内容。
由此可见，要想学好前端，绝对不简单，前端开发的广度和深度是其他行业所不能比拟的，你必须付出不懈的努力，才能收获这份果实。
