web前端自学要多久？ 自学前端WEB要多久
\u81ea\u5b66web\u524d\u7aef\u8fbe\u5230\u4e0a\u5c97\u8981\u6c42\u8981\u591a\u4e45\uff1f\u4e00\u822c\u4eba\u81ea\u5b66web\u524d\u7aef\u5927\u6982\u90fd\u9700\u8981\u534a\u5e74\u5de6\u53f3\u5427\uff0c\u4e0d\u8fc7\u5177\u4f53\u8fd8\u662f\u5f97\u56e0\u4eba\u800c\u5f02\u3002\u524d\u7aef\u662f\u4e00\u4e2a\u53c8\u7b80\u5355\u53c8\u590d\u6742\u7684\u9886\u57df\uff0c\u5165\u95e8\u4e0d\u96be\uff0c\u5b66\u7cbe\u6bd4\u8f83\u96be\uff0c\u800c\u4e14\u9700\u8981\u6bc5\u529b\u505a\u652f\u6491\u3002\u5982\u679c\u4f60\u60f3\u8981\u901f\u6210\uff0c\u53cd\u800c\u5efa\u8bae\u8fd8\u662f\u8ddf\u7740\u7cfb\u7edf\u5316\u7684\u8bfe\u7a0b\u5b66\uff0c\u4e0e\u5176\u96f6\u96f6\u6563\u6563\u7684\u81ea\u5df1\u6252\u8d44\u6e90\uff0c\u8fd8\u4e0d\u5982\u53bb\u6155\u8bfe\u7f51\u8fd9\u7c7b\u5e73\u53f0\u4e70\u4e2a\u6210\u4f53\u7cfb\u8bfe\u7a0b\u5b66\u4e00\u4e0b\uff0c\u8fd9\u6837\u65e2\u80fd\u66f4\u597d\u638c\u63e1\u6280\u672f\u77e5\u8bc6\uff0c\u4e5f\u80fd\u77e5\u9053\u5bf9\u5e94\u7684\u5de5\u4f5c\u5c97\u4f4d\u90fd\u8981\u6c42\u638c\u63e1\u54ea\u4e9b\u4e13\u4e1a\u80fd\u529b\uff0c\u5b66\u7684\u5185\u5bb9\u66f4\u5b9e\u7528\u4e9b\u3002
\u81ea\u5b66\u524d\u7aef\u7684\u65f6\u95f4\u8981\u6839\u636e\u81ea\u8eab\u57fa\u7840\u6765\u51b3\u5b9a\uff0c\u4f46\u662f\u4e00\u822c\u7684\u8bdd\u4e5f\u8981\u51e0\u4e2a\u6708\u624d\u80fd\u5b66\u4f1a\u3002
\u53ef\u4ee5\u770b\u770b\u57f9\u8bad\u73ed\u7684\u5b66\u4e60\u5185\u5bb9\u54e6\uff01\u6839\u636e\u8fd9\u6837\u7684\u5185\u5bb9\u6765\u5236\u5b9a\u81ea\u5df1\u7684\u5b66\u4e60\u65b9\u6cd5\u548c\u8ba1\u5212\u3002
\u524d\u7aef\u5b66\u4e60\u5185\u5bb9\u6709\uff1a
\u7b2c\u4e00\u9636\u6bb5\uff1aWeb\u7f51\u9875\u57fa\u7840
HTML\u5165\u95e8\u57fa\u672c\u5185\u5bb9\uff0cCSS+DIV\u7684\u57fa\u7840\u77e5\u8bc6\uff0c\u9009\u62e9\u5668\uff0c\u76d2\u5b50\u6a21\u578b\uff0c\u7f51\u9875\u5e03\u5c40\uff0cPhotoshop
\u7b2c\u4e8c\u9636\u6bb5\uff1aWeb\u7f16\u7a0b\u57fa\u7840
\u5b66\u4e60\u8def\u7ebf\uff1aJavaScript\u57fa\u7840\uff0cBOM\u548cDOM\u6a21\u578b\uff0c\u4e8b\u4ef6\u5904\u7406\uff0cjQuery\uff0c\u4ea4\u4e92\u53ca\u52a8\u753b\uff0cjQuery\u4f18\u8d28\u63d2\u4ef6\uff0c\u6587\u6863\u5904\u7406\uff0c\u6570\u7ec4\u548c\u5bf9\u8c61\u64cd\u4f5c
\u7b2c\u4e09\u9636\u6bb5\uff1aWeb\u7f16\u7a0b\u9ad8\u7ea7\u53ca\u5168\u6808\u5f00\u53d1
\u5b66\u4e60\u8def\u7ebf\uff1aJavaScript\u9ad8\u7ea7\u7f16\u7a0b\uff0c\u539f\u578b\u6a21\u5f0f\uff0cjQuery\u63d2\u4ef6\u5f00\u53d1\uff0c\u6a21\u5757\u5316\u7ec4\u4ef6\u5f00\uff0cAJAX\uff0cExpress(Node.js)\uff0cMongodb\uff0cRequireJS\uff0cMongoDB
\u7b2c\u56db\u9636\u6bb5\uff1a\u54cd\u5e94\u5f0f\u7f51\u7ad9\u5f00\u53d1
\u5b66\u4e60\u8def\u7ebf\uff1aHTML5/CSS3\uff0c\u54cd\u5e94\u5f0f\u539f\u7406\u53ca\u5e03\u5c40\uff0cBootstrap\uff0c\u524d\u7aef\u4f9d\u8d56\u7ba1\u7406\uff0cCSS\u9884\u5904\u7406\u8bed\u8a00\uff08Less+Sass\uff09\uff0cGrunt/Gulp\u81ea\u52a8\u5316\u6784\u5efa\u5de5\u5177\uff0cAngular4
\u7b2c\u4e94\u9636\u6bb5\uff1a\u6846\u67b6\u4e0e\u9879\u76ee\u7ba1\u7406
\u5b66\u4e60\u8def\u7ebf\uff1aGrunt/Gulp\uff0cWebpack\u6a21\u5757\u52a0\u8f7d\u5668&\u6253\u5305\u5de5\u5177\uff0cMVC\uff08backbone\uff09\u67b6\u6784\u524d\u7aef\uff0cVUE2\uff0cReact
\u7b2c\u516d\u9636\u6bb5\uff1a\u6df7\u5408\u5f0f\u79fb\u52a8\u53ca\u5fae\u4fe1\u5f00\u53d1
\u5b66\u4e60\u8def\u7ebf\uff1aReact Native\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff0c\u89c6\u56fe\u5c42\uff0c\u903b\u8f91\u5c42
主要看你之前是否有接触过前端，是否有些前端基础，另外还要看你的接受能力以及是否喜欢这个专业。
如果接受对力尚佳，或者有些前端基础，15天到1个月就差不多能够入门。如果慢一些的，三个月也差不多了。但是这只能说是一个基础部分，找工作是找不到的。
接下来就是需要再深入系统地学习，再学习一些前端自动化，一些流行的框架，还要稍微懂些node知识等，如果学习能力强并且自制力强的话，大概一共需要5个月的时间。当然这期间需要做大量的实践与练习，来巩固基础知识。
如果是零基础，并且自控力不强，还是建议报一个培训班，系统学习一下前端知识，把基础知识打扎实了，将来的学习会很简单。不管框架如何改变，都万变不离其宗的。如果基础知识不扎实，框架日新月异，会感到很吃力。
这个要看个人的实际情况决定；自学最注重个人的自制力和学习力，你要抵御各种诱惑，还要有详细的学习规划，才能保证正常的学习，徐徐渐进。下面的学习路线或许对你有帮助：
前端完整学习路线
第一阶段:
HTML CSS:HTML进阶、CSS进阶、div css布局、HTML css整站开发。
JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。
第二阶段:HTML5和移动Web开发
HTML5:HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。
CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
移动Web开发:跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段:HTTP服务和AJAX编程
WEB服务器基础:服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础:PHP基础语法、使用PHP处理简单的GET或者POST请求。
第四阶段:面向对象进阶
面向对象终极篇:从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征:继承性、多态性、封装性、接口。
设计模式:面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段:封装一个属于自己的框架
框架封装基础:事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级:运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充:JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段:模块化组件开发
面向组件编程:面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程:AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段:主流的流行框架
Web开发工作流:GIT/SVN、Yeoman脚手架、NPMer依赖管理工具、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、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
HTML5 :HTML5 中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5 开发和部署。
第九阶段: Node.js全栈开发:
快速入门:Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象:全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操做。
这个没有具体的时间，web前端自学要看您自己，web前端零基础学习是没有问题的，学习的时候一定找对方向，我这里有学习web前端的路线，你可以按照顺序学习。
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
绛旓細鎯冲濂Web鍓嶇锛屾庝箞灏戝緱浜嗕竴浠瀛︿範璺嚎锛熶笅闈㈠垎浜竴浠借嚜宸辨敹钘忕殑Web鍓嶇鐨勫涔犺矾绾匡紝甯屾湜鑳藉府鍒板ぇ瀹躲傚Web鍓嶇涓鑸湪2涓囧乏鍙筹紝4-6涓湀宸﹀彸鐨勬椂闂淬傚簲璇ユ牴鎹嚜宸辩殑瀹為檯闇姹傚幓瀛︽牎瀹炲湴鐪嬩竴涓嬶紝闈㈡巿鐨勶紝鍏堝ソ濂借瘯鍚箣鍚庯紝鍐嶉夋嫨閫傚悎鑷繁鐨勩傚彧瑕佸姫鍔涘鍒扮湡涓滆タ锛屽墠閫旇嚜鐒朵笉浼氬樊銆
绛旓細鑷web鍓嶇澶ф澶氫箙鑳借揪鍒板疄涔犵敓鐨勬按骞 杩欎釜涓嶄竴瀹氱殑锛岀湅浣犺嚜瀛︾殑鑳藉姏鍜岄熷害銆傝屼笖web鍓嶇鑷鐨勮瘽鏈濂借繕鏄鏈変汉甯︾潃瀛︿範鐨勪細姣旇緝蹇傝嚜宸辩爺绌剁殑璇濆緢鍙兘浼氬紕閿欐柟鍚戙傚闈㈢偣闇瑕佸涔鑳借揪鍒板彲浠ュ氨涓氾紵 鏄撳銆佹槗鎳傘佹槗灏变笟 闈㈢偣甯堝笀閫氬父闇瑕佸厛鍦ㄤ笓涓氱殑鐑归オ瀛︽牎瀛︿範骞堕氳繃鑰冩牳锛屼互淇濊瘉鍏峰鐩稿簲鐨勪笟鍔...
绛旓細瑕瀛鐨勫唴瀹逛富瑕佹湁锛氣憼璁＄畻鏈哄熀纭浠ュ強PS鍩虹 鈶鍓嶇寮鍙戝熀纭锛圚TML5寮鍙戙丣avaScript鍩虹鍒伴珮绾с乯Query缃戦〉鐗规晥銆丅ootstrap妗嗘灦锛夆憿绉诲姩寮鍙 鈶ｅ墠绔珮绾у紑鍙戯紙ECMAScript6銆乂eu.js妗嗘灦寮鍙戙webpack銆佸墠绔〉闈紭鍖栥丷eact妗嗘灦寮鍙戙丄ngularJS 2.0妗嗘灦寮鍙戠瓑锛夆懁灏忕▼搴忓紑鍙 鈶ュ叏鏍堝紑鍙戯紙MySQL鏁版嵁搴撱丳ython缂栫▼...
绛旓細闆跺熀纭瀛︿範web瑕佸涔 杩欎釜闂灏变笉濂界粺涓鏃堕棿浜嗐傝櫧璇瀛︿範web鍓嶇鐨勬柟寮忔湁寰堝绉嶏紝鍙互閫氳繃鑷锛岀湅涔︼紝缃戜笂鎵句竴浜涚浉鍏崇殑瑙嗛锛屾垨鑰呮槸杩涘煿璁彮銆備絾鏄涔犵殑鏃堕棿杩樻槸鏍规嵁姣忎釜浜虹殑鎺屾彙鎯呭喌鍚э紝鐜板湪甯傚満涓婃湁寰堝鐨勫煿璁満鏋勶紝澶ч儴鍒嗛兘鏄煿璁4涓湀鐨勶紝涔熸湁2-4涓湀鐨勶紝杩樻湁5-6涓湀鐨勶紝鏈変簺浜轰笉闇瑕4-6涓...
绛旓細杩欎釜闂锛屽氨涓嶅ソ缁熶竴鏃堕棿浜嗐傝櫧璇瀛︿範web鍓嶇鐨勬柟寮忔湁寰堝绉嶏紝鍙互閫氳繃鑷锛岀湅涔︼紝缃戜笂鎵句竴浜涚浉鍏崇殑瑙嗛锛屾垨鑰呮槸杩涘煿璁彮銆備絾鏄涔犵殑鏃堕棿杩樻槸鏍规嵁姣忎釜浜虹殑鎺屾彙鎯呭喌鍚э紝鐜板湪甯傚満涓婃湁寰堝鐨勫煿璁満鏋勶紝澶ч儴鍒嗛兘鏄煿璁4涓湀鐨勶紝涔熸湁2-4涓湀鐨勶紝杩樻湁5-6涓湀鐨勶紝鍦ㄨ繖閲屾垜璇村彞瀹炶瘽锛屾湁浜涗汉鐪熺殑涓闇瑕4-6...
绛旓細闇瑕佷簲涓樁娈碉細鍓嶇鐨勫涔犲樊涓嶅鐨勫氨鏄簲涓樁娈碉紝濡傛灉娌℃湁浠涔堢殑鍩虹鍒濆鑰咃紝槌曢奔涓镐篃宸笉澶氬闇瑕佸崐骞存墠鍙互鎺屾彙鐨勫伐浣滐紝褰撶劧杩欏叾涓繕蹇呴』鏈変竴瀹氱殑鍩虹鎵嶅彲浠ユ洿蹇湴鎺屾彙鍓嶇鐨勬妧鏈紝鍥犳瀛︿範鍓嶇鐨勫皬浼欎即鏍规湰灏变笉鐢ㄧ籂缁撳涔犵殑鏃堕棿闇瑕佸涔锛屾洿搴旇娉ㄦ剰鐨勫氨鏄涔犺川閲忓甫鍙互 瑙ｉ噴鍘熷洜锛氱涓闃舵灏辨槸鍓嶇...
绛旓細闆跺熀纭杞锛瀛︿範web瑕佸涔銆傞鍏堬紝web寮鍙戝垎涓轰袱鍧楋紝涓涓槸web鍓嶇寮鍙戯紝涓涓槸web鍚庣寮鍙戙傜悊璁轰笂鏄痺eb鍓嶇寮鍙戞瘮web鍚庣寮鍙戠殑鏃堕棿绋嶅井鐭竴浜涖傛墍浠ヤ綘棣栧厛闇瑕佺‘璁や綘鏄兂杞web鍓嶇寮鍙戣繕鏄兂杞web鍚庣寮鍙戞墠琛屻傜劧鍚庯紝闆跺熀纭杞鍏跺疄鎸洪毦锛屼細鏈夋瘮杈冮珮鐨勫涔犻棬妲涳紝鐞嗚涓婏紝濡傛灉鏄痺eb鍓嶇寮鍙戠殑璇...
绛旓細鍏充簬瀛﹀涔鐨勯棶棰橈紝杩欎釜灏辫鐪嬩綘鐢ㄤ粈涔堟牱鐨勬柟寮忓幓瀛︿範浜嗐傛瘮濡傜幇鍦ㄤ富瑕佺殑涓ょ瀛︿範鏂瑰紡锛屼竴鏄鑷浜屾槸鍙傚姞鎶ョ彮鍩硅銆備綔涓洪浂鍩虹杞锛屽鏋滀綘鎯冲揩閫熺殑瀛︿範濂web鍓嶇灏变笟鐨勮瘽锛岄偅涔堥夋嫨鎶ョ彮鍩硅鏃犵枒鏄瘮杈冨揩鎹风殑鏂瑰紡浜嗭紝涓鑸6涓湀灏卞彲浠ラ『鍒╁畬鎴愰浂闆跺熀纭杞瀛︿範鍒板氨涓氳浆鍙樸傚弽涔嬶紝濡傛灉閫夎嚜瀛︾殑璇濓紝鏃堕棿鎴樼嚎涓...
绛旓細0鍩虹瀛︿範鍓嶇鏄病鏈夐棶棰樼殑锛屽叧閿槸鎵惧埌闈犺氨鐨勫墠绔煿璁満鏋勶紝浣犲彲浠ユ繁搴︿簡瑙ｆ満鏋勭殑鍙ｇ鎯呭喌锛岄棶闂懆鍥寸煡閬撹繖瀹舵満鏋勭殑浜猴紝闄や簡鍙ｇ鍐嶄簡瑙ｆ満鏋勭殑浠ヤ笅鍑犳柟闈細1. 甯堣祫鍔涢噺闆勫帤 瑕佹兂鏈1+1>2鐨勫疄闄呮晥鏋滐紝寰堝叧閿殑涓鐐规槸甯堣祫闃熶紞锛屼綘鎺ヤ笅鏉ユ棤璁烘槸鎵句釜宸ヤ綔杩樻槸宸ヤ綔涓嚭浠诲摢浜涚殑浜虹墿瑙掕壊锛岄兘瓒婃潵瓒婄埍浣犳湰韬殑...
绛旓細鑷鏂规硶锛1銆佷綔涓轰竴涓垵瀛﹁咃紝浣犲繀椤绘槑纭郴缁熺殑瀛︿範鏂规锛屾垜寤鸿涓瀹氭湁涓涓寚瀵肩殑浜猴紝鍏ㄩ潬鑷繁瀛︼紝鏀惧純鐨勫嚑鐜囬潪甯稿ぇ锛屽湪浣犲浜web鍓嶇杩樻病鏈変换浣曟蹇电殑鏃跺欙紝闇瑕涓涓汉棰嗚繘闂紝涔嬪悗灏遍兘闈犺嚜宸遍捇鐮旓紝绗竴姝ュ氨鏄‘瀹歸eb鍓嶇閮介渶瑕佸摢浜涘唴瀹癸紝骞朵笖鍦澶氬皯鏃堕棿鍐呭瀹岋紝寤鸿鏃堕棿6涓湀淇濆簳銆2銆佽棰戜负涓伙紝涔...
