自学前端的时间是无上限的，关键还是要看你自己是否适合自学？
你是否能耐得住性子？学习web前端接触得最多就是各种繁复的字母代码，需要你耐得住性子安安静静地坐下来研究技术。如果你做事经常三分钟热度，容易半途而废、或是性格急躁急于求成，编程可能不太适合你。
2. 你是否有持之以恒的毅力？
web前端不仅知识点多，而且前端发展得快，新的框架和思想被不断的提出，对于新手来会有不小的心理压力，过快的节奏让新手学起来比较吃力，想要学习web前端就要做好做好长期学习，更新自己知识库的准备，持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来。
3. 是否具备基本的逻辑思维？
选择工科专业的人一般逻辑思维能力一般要强于文科生，web前端需要用逻辑思维处理问题的能力。针对甲方用代码实现，首先要自己理解透彻，编写出来的程序才能拒绝bug。
如果以上提到问题，你都能从容攻克，那么你是适合学习web前端的。
至于学哪些内容，你可以参考一下这个学习路线：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
希望对你有用！
很高兴能回答你的问题：零基础学习前端，要学习多久？学习哪些内容？
首先一个系统的学习课程，学完大概在6个月左右，当然这个需要看你用什么样的方式去学习，还有就是自己的学习能力和努力程度也是有关的，如果是自学的话，时间肯定会长一点，对于自己在学习中遇到的问题，不能及时地解决，很多时间就会花费在这解决问题上面，还有就是需要自己去找相关的视频和资料，也是比较浪费时间的，
目前企业招聘前端工程师的基本需求：
1.精通DIV+CSS网页框架布局的HTML代码编写，熟悉W3C标准；
2.使用HTML5/CSS3熟练地进行页面开发；
3.具备良好的前端架构分析能力与设计能力，与开发团队保持良好沟通；
4.精通各主流浏览器（IE6+、Firefox、Chrome、Safari）间的差异性，能快速定位和解决各种兼容难题；
5.熟悉JavaScript、Ajax、Flash、JQuery、ExtJS等各种Web前端开发技术，具备一定的跨浏览器开发经验；
6.熟悉Vue，react
以上就是必须掌握的技术，如果你想找到一份web前端开发的工作，上述相关技术必须熟练掌握并且应用到项目中
点此链接:领取自己总结录制的前端学习视频
那么对于想自学web前端的应该如何掌握上述相关技术？
一：首先，有这样的一种情况很常见，对于想自学web前端的人来说，他们大多数都是非常盲目的，不知道自己该该如何入手，很多人在网上找一些视频，然后疯狂的过视频，很快就把一块内容都学完，他们理解的学完了就是视频看完了，但是让他们动手去做东西却做不出来，而我的理解学完了就是自己能写出东西，所以对于初学者来说一定不能盲目，要有自己的规划，不然就是浪费时间白忙活。
二：既然是学习专业技术，我个人的建议是，一定要有一个能指导你的人，不能都靠自己闭门造车，这样的行为并不聪明，结识一位这方面的人才，时不时去问问人家问题，不然你可能会发现一个小问题能困扰你一天，最后还不知道是什么原因。
三：学习web前端技术，不能跟学数学语文一样对待，比较刚接触代码是不容易记住的，所以要掌握上述的技术，你还要知道学习web前端技术有哪些“坑”。对于学习方法这块是尤为重要的，怎么学才能让你学完了能记住之前学的那些，不至于学完了就忘，这个问题值得你学习之前去思考的。
四：根据我多年的学习情况来看，你平时一定要养成好的学习习惯，就说我自己吧！我就喜欢把自己曾经遇到的问题整理在电脑的日记本上，然后我会搜集一下博客相关的技术文章，一些我认为比较有用的网站，以后都能用得上，这是我个人的学习习惯，相信我，如果你想走得更远，一定要养成习惯。
最后是详细的学习安排路线：
基础：HTML+CSS页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发
核心：web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery。
高级：html5+高级JavaScript开发，大数据可视化，webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。
框架：bootstrap、vue、react、angular、sass企业开发应用。
以上就是我的分享，希望对你有所帮助，
阶段1.前端核心基础
HTML +_CSS核心、zhiJavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架dao
阶段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
前端学什么
这个就是学习前端的学习内容图，你可以按照顺序从上到下依次学习，现在学习的方法有很多，不管是你自学还是去参加培训班这个学习的顺序都是可以的，在学习方法上就是3多，“多思考、多问、多敲”，学习的本质就是不断的重复，熟能生巧，你可以去网上看看视频，现在有些机构的视频还是不错的，希望可以帮到你！
自学看个人自制力，少则半年，多则就说不好了。具体看个人进度。
至于要学哪些内容，分享一份千锋的前端学习路线图，希望给你个参考。
