web前端开发环境搭建 Web前端自学之路指南

大家平时对前端开发都十分关注，今天为大家整理了web前端开发环境搭建 Web前端自学之路指南，下面就随我爱编程网小编一起来看一下吧。

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、ES6Modules


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前端工程师。


文章来源：原创前端猿前端猿指北

学web前端开发需要用哪些软件

1、Adobe Dreamweaver CS6

Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于Dreamweaver支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！

2、Adobe Edge

Adobe Edge是一个用HTML5、CSS、Java开发动态互动内容的设计工具。它的一个重要功能是web工具包界面，用于方便确保在不同浏览器中架构的一致性，此外，Adobe Edge还将整合TypeKit这样的字体服务。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器上。

3、DevExtreme

DevExtreme Complete Subion是性能最优的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建iOS，Android，Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件，并且提供源代码。目前，DevExtreme支持VS2010/2012/2013集成开发环境，兼容Android 4、iOS5、Windows 8、Window Phone 8、Tizen五大移动平台，是Visual Studio开发人员开发跨平台移动产品的首选工具。

4、JetBrains WebStorm

WebStorm 是jetbrains公司旗下一款JS开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

5、Sencha Architect

在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch3和Ext JS4 Java应用，并实时预览。

6、Initializr

Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。 我爱编程网

7、HTML5demos

想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。

8、HTML5 Tracker

想了解 HTML5的最新动向吗?使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。

9、HTML5 visual cheat sheet

想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。

10、Switch To HTML5

Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。

11、HTML5 Test

你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。

12、Lime JS

LimeJS 是一个 HTML5 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒的HTML5开发工具，一定要用用试试。

以上就是向大家推荐12款优秀的HTML5开发工具。希望能帮到大家。

web前端开发学习路线

第一阶段：

HTMLCSS:

HTML进阶、CSS进阶、divcss布局、HTMLcss整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：

HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5：

HTML5中国产业联盟、环境、HBuilder开发工具、MUI框架、H5开发和部署。

第九阶段：

Node.js全栈开发：

快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：

Express简介MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

希望对您有所帮助！~

以上就是今天分享给大家的内容了，想要了解更多前端开发资讯，敬请关注我爱编程网！