先说一下自学前端如何入门吧。
方法：
第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。
第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。
第三：注重动手实践能力的培养。学习前端开发一定要注重动手实践能力的培养，因为前端开发的细节比较多，所以只有多操作才能逐渐熟悉。
前端开发目前被称为“大前端”，整个前端开发也被赋予了更多的含义，包括Web前端开发、移动端开发、大数据呈现端开发以及部分后端开发任务等等。所以，想要在前端行业中走的更远，一定要注重知识结构的丰富性。
与其他编程语言相比，前端是公认的入行门槛较低的一门语言，但依然有很多人在学习之前会问零基础学习web前端难不难，要多久才能学会。学习的难易和时间当然是取决于学习的方式。
前端入门简单，但是深入学习之后，还是有一定学习难度的。如果你是零基础自学web前端的话，那么所花费的时间与精力是不可估计的。 如果系统学习5个月的时间可以帮助你快速成长为合格的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阶段：Node.js全栈开发(1周)
内容包括：(WebApp后端系统开发、一、Node.js基础与Node.js核心模块；二、Express；三、noSQL数据库)
至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！
第一阶段——HTML的学习
超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因 此，我们必须掌握HTML的基本结构和常用标记及属性。
HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!
在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。
于是进入第二个阶段——CSS的学习
CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。
“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。
为了完成这个任务，我们进入第三个阶段——JavaScript的学习
JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!有么有?
此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道
“这个效果在××浏览器下不兼容，重新搞……”
“不兼容?”瞬间石化了有木有?
“我X，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”
JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。
接下来我们进入第四个阶段——jQUery的学习
jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度。
Web前端的学习建议
最后给大家聊聊在学习Web前端中的一些建议和方法。
学习是需要持之以恒的，每天坚持不断学习提升自身的能力
别抱有三天打鱼两天晒网，如果你是这样的心态，作为过来人
劝你别入行为好。
在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。
“君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。
同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能!
随着移动互联网热潮的到来，移动开发越来越受到大家的追捧，响应式布局、微网站等需求量不断增加，也是我们Web前端未来的发展方向之一，学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地!
本回答被提问者采纳超文本标识表记标帜说话(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页仍是动态网页，终极前往到阅读器端的都是HTML代码，阅读器将HTML代码诠释衬着后出现给用户。因 此，我们必需把握HTML的根基构造和常用标识表记标帜及属性。
HTML 的进修是一个记忆和理解的过程，在进修过程中可以借助Dreamweaver的“拆分”视图辅助进修。在“设计”视图中看了局，在“代码”视图中学本质， 将各类视图的上风阐扬到极致，这种比力进修的编制填补了纯挚识记HTML标签和属性的死板乏味，想必对列位初学的小盆友们来说必定是极好的!
在进修了HTML之后，我们只是把握了各类“原质料”的建造编制，要想盖一幢楼房就还必要把这些“原质料”按照我们设计的方案组合构造在一起并停止一些款式的美化。
第二个阶段——CSS的进修
CSS是英文Cascading Style Sheets的缩写，叫做层叠款式表，是可以真正做到网页默示与内容分手的一种款式设计说话。相对付传统HTML的默示而言其款式是可以复用的，如许就极大地进步了我们开发的速度，降低了维护的本钱。
同时CSS中的盒子模子、相对构造、绝对构造等可以实现对网页中各工具的位置排版停止像素级的切确节制。经由过程此阶段的进修，我们就可以顺遂完成“一幢楼房”的拔擢。
“楼房”拔擢完成之后，我们可以交给用户使用，可是若是想让用户获得更佳的体验，我们还可以对“楼房”停止更深一步的“装修”，让它看起来更“奢华”一些。
第三个阶段——JavaScript的进修
JavaScript是一种在客户端遍及使用的脚步说话，在JavaScript傍边为我们供给了一些内置函数、工具和DOM把持，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么机械，屌丝霎时逆袭高富帅!有么有?
此时，大概你还沉醉在JavaScript给你带来的惊喜之中，但你的项目司理却俄然对你大吼道
“这个了局在××阅读器下不兼容，重新搞……”
“不兼容?”霎时石化了有木有?
“我擦，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”
JavaScript的兼容性和复杂性偶尔辰几乎让我们头疼，还好有“大神”帮我们做了封装。
第四个阶段——jQUery的进修
jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各类阅读器(jQuery2.0及后续版本抛却了对IE6/7/8阅读器的支撑)，同时如今 有良多基于jQuery的插件可供选择，如许在我们实现一些丰盛的动态了局时更便当快捷，大大节约了我们开发的时辰，进步了开发速度，这也充实浮现了其 write less,do more的焦点主旨。这个Feel倍儿爽!有么有?
“奢华大楼”至此拔地而起，可是天天如许日复一日，年复一年的盖楼，好繁琐!能不能将大楼里面每一个零丁部件模块化，当必要盖楼时就像聚积木一样组合在一起，如许岂不是爽歪歪?可以实现吗?谜底是必定的。
这种思惟在Web前端开发中也是合适的，于是乎就出现了各类前端框架，在这里保举给大师的是Bootstrap。
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支撑相应式构造。一经推出后颇受接待，不息是GitHub上的热点开源项目。
在项目开发过程中，我们可以借助Bootstrap供给的CSS款式、组件、JavaScript插件等快速的完成页面构造和款式设置，然后再有针对性的微调款式，如许基于框架停止开发大大缩短了开发周期。站在巨人的肩膀上就是爽!