我当初是毕业后3个月才正式学习前端的，当时校招签的工作在深圳的制造业工作了3个月，在深圳的郊区工厂一个月工资只有6000块，而且看不到任何晋升的希望，如果想要往上走，那背后就一定要有关系才行。而且制造业的的气氛是你干的多了，领导觉得你有野心，你干的不多，领导却觉得你这个人不错，并且同事都抱团搞小团体，我受不了根本融入不进去，我也不喜欢搞人情世故。我当时才22岁，实在的受不了这种工作氛围，情绪已经压制了很多久，一心想着要跳出来，却一直找不到合适的机会。因为大学的时候参加校园招聘会的时候就发现，计算机学院的学生找的工资很高，同样的学历，我付出的比他们还多，但是挣得比他们少，太不公平了。他们刚毕业就可以拿到十几，二十万的年薪，说心里话我是真的羡慕，这远超出了我的认知范围。所以经过我自己的考虑，java感觉太难，我就开始学习前端，一共学了大概6个多月的时间，在毕业的一年后在深圳找到了一份前端开发的工作，我包装了2年的工作经验，月薪12K五险一金，这算是成功上岸了。
在刚开始学习的时候我考虑过去线下培训班，但是我朋友不建议去，因为他就是培训出来的，他和我说去培训班几乎没作用，你去了之后会发现全程都是靠自己自学，老师上完课就走，不如自己看视频学有效率，如果再有一次机会，我绝对不会花2万多块钱去培训。因为朋友是过来人，他的建议我不得不听，而且我在网上查了一下，培训班的口碑似乎都不好，这就让我直接放弃了培训的想法。况且2万的多培训费用是我不吃不喝半年的工资，确实有点舍不得。
于是我开始自学，因为在深圳认识了个朋友是做这行的，所以自己在开始的时候少走了很多弯路，他给了我很好的建议，所以学习前端有个大佬带是尤为重要的。因为做软件研发的都有一个圈子，所以我建议那些还在学习前端的初学者，一定要多结识一些行业内的大佬，对于一个初学者来说可以获得非常多的帮助。而且学习的课程一定要实际有效的，我自己当时花了很高的价格找朋友买了机构的线下录播课，他是参加过两万多的培训，课程资料他电脑里有，说实话虽然贵，但是对我的学习起了很大的帮助，里面有全套的视频，笔记，作业，代码，我跟着练习就行了，怎么学习都是有阶段的。网上的免费视频都是很差的，免费的才是最贵的，我当时就明白这一点。
我的学习心得，我认为能不能转行前端成功的要素有3点。
第一点就是自身的问题，虽然想要转行学习前端的人很多，但是非常强烈的想要转行学好的人是小部分。而大部分人只是抱着试试的心态来学习前端，这是完全不可能的。所以能不能学成前端并且就业，最关键的一点就是自己的愿望是否强烈。我是属于非常强烈那种，因为忍受不了现在工作的氛围，以及羡慕别人可以刚毕业就拿十几万的年薪，这些因素都促使我非常拼命的学。在加上自身可以做到从下班就开始看视频自学，一直学到晚上2点的这股劲，所以才能在6个月的时间内达到就业的水平。
第二点就是有大佬带你，如果全程都靠自己摸索是非常难的，对于一个不是本专业的人来说从开始的时候就“无从下手”。更不要说在学习过程中遇到的无数bug问题很难得到解决，因为我们在学习过程中会遇到无数问题，有的时候一个小问题就能困扰我们几个小时的时间，会导致我们的学习效率很低，这种情况出现多了以后，信心就会受到打击，觉得自己不适合学编程，最终放弃。而当有一个大佬去给你解答后，你会很快得到答案，并且能理解为什么要这样做，到底是哪里出现了问题，学习效率会非常高。
第三点就是课程一定是要有效的，为什么，因为如果学的课程都不好，那么每天都是在浪费时间，我当时就浪费了两个月的时间，就是天天纠结网上哪个视频课程好，不知道哪个有效，学完这个学那个，可能明天看到个课感觉有用我就去那个了，所以后面就直接花钱找朋友买线下的录播课，虽然有点贵有点心疼，但是这不是花钱省时间吗，不然时间浪费了，之前学的时候都没用了，而且把机会都浪费了。
所以总结就是自身自觉主动学习在加上大佬全程带你以及学的课程好，其实学习就是这么简单的事情，无非就是这3个关键的要素，少了其中一个都很难成功。
学前端必须注意的问题：
1.代码规范
初学者一定要注意培养自己的代码规范，写代码都要注释，我之所以只学了6个月就能拿到12K的薪资，就是因为我代码规范很好。其实一个初学者在开始的时候能培养出好的代码规范很难，这源于在整个学习过程中有大佬带我的原因。
2.交流沟通
切记不要认为自己可以摸索自学成功，能达到一定高度的水平，一定离不开很多专业人的指导，所以多认识一些大佬尤为重要，圈子真的可以决定我们可以达到什么水平。如果大家找不到认识做前端的，我强烈建议大家可以咨询下云哥我都是过来人了。
3.效率：
能快尽量快，如果你已经决定要转行学习前端，就千万别拖泥带水，把大部分的精力都投入进来，如果你是那种三天打鱼两天晒网的情况，我劝你尽早的放弃不要浪费时间，有这个时间去锻炼锻炼身体不好吗？
4.学习心态
一定要抱着决心转行的心态来学，我当时就给了自己差不多一年的时间，6个月学习，6个月找工作，如何找不到这辈子就认命了，自身的意愿强度决定了你是否能转行成功。
给前端的初学者的学习建议：
1.了解如今的市场，都需要掌握哪些主要技术就可以快速就业，目前的企业都需要什么人才，这是你学习的方向和目标。
2.系统的学习规划：有一个整体学习大纲，要知道自己每天学习什么，做什么练习进行知识巩固，一个阶段学完后应该完成什么项目实战，进行循序渐进的学习，不可以盲目的瞎学。
3.一个大佬的指导：作为一个初学者一定要记得找大佬指导你，即使是花点钱也没关系，只要你能把技术学好就行。自己摸索基本都是弯路，很多人为什么学了一两个月就放弃了，因为他不知道路在哪里，整个人都是迷茫的，自然容易放弃。但如果你有了一个大佬带你，他就会给你做详细的学习计划，给你安排好一切，在整个学习过程中给你解答疑问，你学习起来就会思路清晰，简单效率。
4.前人的经验：我自己曾经经历过一整个前端自学到就业，所以后面我把录播课的视频从真实企业开发的角度精简过，并添加了一部分内容，而且总结了很多项目难点，还有前端找工作的知识库，包括怎么包装出真实简历，解决入职资料等问题。后面也帮助了我的朋友找到了前端工作，把这一套都教给他，带他转行前端成功，也从工厂里面跑出来了，因为是朋友虽然没怎么给我钱，但是请我吃了很多次大餐，买了很多东西，加起来也有大几千块钱了。我后面就把这一整套东西总结成了前端私教课，需要报名的可以咨询云哥。
前端主要的学习内容：
三大件学习
现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。
刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。
CSS & HTML
对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。
当然如果你愿意，建议你可以先仿一个网站的静态页面，有一些属性就可以了解他实际的实现场景。
当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。
关于 CSS(3) 你需要了解的一些知识点
盒模型（标准 & IE ）
flex、float、Normal Flow 等的理解
CSS 常用选择器
行内、内部、外部样式的区别
CSS 层叠规则
BFC 与 IFC 的了解
CSS3 的 transform、transition、animation 等属性的运用了解
响应式布局的理解
……
CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。
HTML(5) 你需要了解的一些知识点
说到 HTML 我想有很多人是div一把梭。因为div用的爽，不用担心默认样式。
有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢div一把梭。
HTML 语义化( 不是很理解为什么面试总会问 )
canvas
本地存储（ localStorage、sessionStorage、cookie 的理解 ）
video 和 audio 的使用
应用缓存( cache manifest )
……
JavaScript
JavaScript一直都是我们前端的基石，一定程度上JavaScript的理解深度决定了你的发展。所以一定要用心学习。
现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗
JavaScript的基础知识点确实很多，所以《JavaScript 高级程序设计》 写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。
JavaScript（ES6+） 你需要了解的一些知识点
类型转换
this
作用域（作用域链）
原型链以及继承
闭包的理解
动态作用域和词法作用域
JavaScript 执行机制
promise & async
……
上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。
我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。
我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。
前端框架（ MVVM ）的学习
当下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。
至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然）。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。
一些问题
响应式的基本原理是什么
发布订阅模式的理解
Virtual DOM 的理解
前端路由的实现原理
nextTick / setState 的实现原理
diff 算法
单页面应用（SPA）的原理和优缺点
……
我们对于框架的 API 使用没必要花太多时间，应该多研究他们背后的设计思想和实现原理。
Vue 相关资料
对于框架的一些学习资料我个人更倾向于推荐官方文档，有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之作）。
Vue 官网 & Vue Router 官网 & Vuex 官网
剖析 Vue.js 内部运行机制 掘金小册
vue 技术揭秘
浏览器 & 计算机基础
如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。
浏览器一直是 JavaScript 最重要的宿主环境，所以我们必须去了解 JavaScript 在浏览器中是如何执行的。
我们前端开发接触最多的应该就是浏览器了，记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关，所以我觉得了解浏览器工作原理是非常有必要的。
前端工程化
从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化，越来越复杂。
对于前端开发来说，现在前端要做的不只是切页面调接口这么简单，我们需要了解的技术无疑更加广泛。
模块化
JavaScript 模块化
CSS 模块化
资源模块化
组件化
从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
也就是将复杂页面按功能拆分成多个独立的组件。
规范化
编码规范
接口规范
git 使用规范
CodeReview
UI 元素规范
性能优化
提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：
从输入 URL 到页面加载完成的具体过程
因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。
性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。
以上就是初学者大概学习的内容，我是尽量站在初学者的角度来说的，没有写得特别复杂，怕初学者看不懂，没有实质性的帮助。所以我尽量用白话把话说的简单一些，给大家罗列出主要学习的前端知识点。