我个人的情况是有1年web前端工作经验+半年的实习经验，2020年毕业，大一的时候学过C语言，所以一直对于编程感兴趣。我是从大三开学后正式开始自学web前端相关的知识，之所以选择前端方向，一方面是自己对于网页更加感兴趣，二是听我哥说目前web前端的发展趋势更好（我哥在网易做程序员），所以我就确立了前端方向为以后我就业的主要方向。从开始自学到大四的实习，我一共花了1年2个月时间，把前端主要的技术点和框架都过了一遍，自己做了三个Vue的项目实战。然后在2019年的10月份进入了杭州当地的一家公司实习半年，一直到2020年4月在这家公司转正，待遇是月薪12K*14薪+五险一金。目前算上实习的时间，我已经在这家公司工作一年半多的时间，我并不打算跳槽，我哥说的意思就是，尽量别因为工资高低的问题频繁跳槽，如果这家公司还有很多成长的空间，还能学到很多东西，就不要轻易跳槽。因为我在自学一年的过程中，我哥给了我很多的帮助，所以他的建议我是一定要听的，而且我觉得确实是这样的道理。因为我是刚毕业一年的，所以这篇文章主要也是写给在校的学弟们一些建议，希望能给大家带来帮助。

给大家总结我一年时间学了哪些前端技术：

说明：下面的内容就是我一年时间全部掌握的内容，为什么我会列得如此之细，重点就在这里，其实这些技术都是大家平时可以接触到的，我们在实际的开发工作中用的也都是这些技术，只不过不同的是大家掌握的程度不一样。我们学的技术名称可能是一样的，但是我们对于这门技术所理解的深度以及掌握的实际操作水平可能相差很多，这就是我一个二本学历为什么可以在毕业后第一份工作就拿到12K，我觉得是这个原因，就是因为我学得非常细，所以希望大家不要抱怨内容太多，你要是真想在前端这个领域成为技术大牛，这都是必须要做的。

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一、HTML/CSS3标签基础DTD与META语义化选择器权重与优先级匹配规则浮动与清除BFC类名组合规则SEO前端技巧定位叠加技巧伪类伪元素盒子模型代码规范性能优化渲染原理CSS Spritesiconfont字体图标布局思路布局定式css3动画css3选择器css3过渡flex布局背景渐变css3实用动效3D模块css3变量em/rem/vw企业内部多页面项目实战二、JavaScript

1、ECMAScript

语句语法数据类型运算符隐式转换运算规则控制流程作用域作用域链作用域解析js解释引擎字符串属性方法for of/for in数组属性方法对象广义对象概念对象特性存储机制深拷贝对象实际应用工厂模式构造函数原型原型链原型指向封装多种继承包装对象thisthis指向js数据处理垃圾GC闭包原理与应用debug方法论浏览器控制台工具应用面向对象开发函数式开发纯函数递归函数回调函数组合函数缓存函数柯里化函数偏函数函数防抖与节流高级函数IIFE函数模块化、数学对象高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等、高级对象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等this通过bind、call、apply指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

2、DOM/BOM

DOM对象与方法节点与遍历树DOM选择器DOM节点增删改查DOM样式操作DOM位置获取与偏移DOM对象与标签区别DOM虚拟化DOM事件Event对象定时器与监听器事件委托事件代理事件分流事件冒泡默认行为事件捕获防抖节流滚动键盘行为事件降频行为锁机制拖拽模组碰撞检测距离判断三角函数方向判断运动框架弹性运动重力加速度DOM树CSSOM树渲染解析加载回流重绘浏览器线程与阻塞BOM深入window对象NavigatorHistoryScreenLocationspa概念本地传参日期对象使用日期格式化封装随机封装DOM分片容器

3、JS业务应用扩展

JSON对象数据解析JSON方法模板渲染缓存懒加载正则表达式RegExp元字符修饰符正向预查贪婪模式replace方法分组与不分组test、match与exec正则库封装表单校验图片预存懒加载自定义封装滚动组件多重轮播（循环、视差、旋转木马）、选项卡切换、楼梯导航、吸顶导航、拖拽导航 、JavaScript编码风格指南console应用技巧

4、ECMAScript5 --- ECMAScript9扩展

版本解读应用环境let、const解构赋值箭头函数对象解构reset参数解构ClassSetGetExtendsSuperStaticprivate实现symboPromiseproxy代理拦截async/await对象新增API数组新增API字符串新增API原型属性对象修饰代理拦截链式询问空值合并运算符泡泡龙面向对象游戏开发三、HTML5 / 移动端开发 部分

1、HTML5标签与API

HTML5概念定义新增特性DTD对比新增H5标签新增语义化H5标签H5表单H5拖拽事件VideoAudiofullScreenFileReader文件流Blob对象sessionStoragelocalStorage、网络状态页面生命周期网页状态监听地理信息与定位canvas画布worker多线程Notifications桌面通知播放器开发 canvas交互特效开发移动端适配/事件移动端适配概念尺寸与分辨率原理PPI与DPI计算DIP与DPR设备像素概念视口viewport概念布局视口视觉视口理想视口视口适配方案（Meta viewport）缩放设置screen窗口大小API媒体查询@mediarem适配vw vh适配移动端适配方案flexible rem方案vh vw方案复合方案高清适配方案移动端字体缩放解决1px边框问题解决半像素线图片高清适配image-setSrcsetjs拼接URL技巧IPhonex刘海屏适配安全区域fit与envMeta权限管理兼容优化IOS头部底部闪屏回退输入框问题输入法空格问题默认首字母大写问题滑动卡顿问题等终端样式美化与访问判断Touch事件组封装click延迟处理FastClick使用禁用缩放设置理想视口

2、常用类库/工具

jquery：元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用

zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

基础UI库：layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统iScroll、touchjs等移动端事件库使用

swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

art-template：模板引擎 模板语法、渲染方法、原生模板引擎实现

CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套vscode高级插件与配置 liveserver sass 模板化应用 、预处理应用

3、date-picker移动端原生组件开发

需求分析业务规则技术栈选型文件输出规则技术分析MVC模型概念与设计业务逻辑分类view层适配方案原型布局搭建模板化生成工具函数开发面向对象式业务设计能类日期对象开发交互业务封装模块对接优化设计面向对象高级程序设计四、Node与工程化开发

1、Node原生基础

Node基础概念NPM命令V8引擎概念JavaScript模块化 CMD AMD UMDEventLoop事件循环同步异步阻塞非阻塞任务队列宏任务微任务原生Node模块核心模块与requireModule触发器events与path模块fs模块Buffer对象URL模块HTTP模块stream流Node原生封装HTTP与文件服务器

2、Node框架

express框架使用中间件核心对象路由配置模板引擎数据脚本Router核心CORS配置错误处理校验封装PM2管理nodemoon管理MORGAN日志处理查询正则捕获中间件开发bodyParse等第三方中间件使用文件流上传下载文件流切分

3、webpack工程化构建

工程化概念工程化工具介绍webpack基础知识webpack配置与运行plugin插件loader使用入口出口配置模块modules依赖处理dev Servertarget文件切分build打包热处理package管理性能优化测试处理第三方插件使用babel等

4、前后端数据交互

HTTP通信交互原理请求响应MIMEURI地址报文解析端口报文流测试监听抓包TCP/IP握手机制网络业务模型代理缓存网关隧道等概念method与请求头分类基础XMLHTTPRequest对象方法属性方法ajax异步交互同源策略原理原生js封装ajax交互jquery的ajax封装交互jsonp跨域处理cors跨域处理携带cookie与跨域处理代理服务器跨域处理cookie验证与通信axios库的使用代理封装拦截合并二次封装通信加密策略数据对称加密数据非对称加密RSA加密实践MD5加密实践登录注册与鉴权机制Authenticity认证Token认证JWT认证session状态管理oauth认证

5、RESTful接口设计

RESTful设计原则状态码设计与规范服务器响应规则与格式前后端接口协议制定传统RESTful改进API设计规范资源定位JSON模式合约说明资源标识符缓存友好APIHTTP头管理文档定义松耦合原则一致性重用稳定性原则

6、数据库存储

MongoDB基础概念NoSQL与SQCAP定理RDBMSMongoDB语法指令监控与GUIMongoDb驱动Mongoose应用数据库创建集合增删改查文档增删改查数据库查询高级查询操作通道查询多条件查询反向筛选索引处理aggregate聚合管道validation验证population联表middleware中间件处理查询ERROR类二次封装五、Vue框架

1、vue基础

工具与插件mvc mvp mvvm设计理念原生js实现MVVM核心框架vue设计模式生命周期命令与属性组件化数据驱动与双向绑定虚拟DOM概念原理模板语法条件与列表数组监测计算属性事件处理修饰与表单监听器过滤器methods watch computed filter对比组件化开发动态组件组件通信、高级组件通信插槽vue动画实例对象setGetnextTickvue插件

2、vue工程化

Babelwebpack配置vuevue单文件组件vue-cli工程平台处理postCssAnimateCoreSocketlodash工具vue-cli插件Preset静态资源处理环境变量与膜还是切换工程化部署工程构建

3、vue Router

vue路由概念嵌套路由路由视图动态路由路由匹配编程式导航Historyhash模式管理命名视图重定向与别名导航守卫路由元信息滚动与懒加载导航故障处理

4、vuex

vuex核心概念EventBus对比状态管理模式StorestateGetterMutationActionmoudulevuex辅助函数与API功能vuex环境选择vuex模块化处理规则与技巧对象风格提交方式模块重用等

如果学弟们可以掌握上述内容，我认为找到10K以上的工作没有任何问题。根据我的观察，目前网上很多机构的前端课程都是偷工减料，很多前端里面的知识点都是能删就删，400多课时的内容被压缩到180课时，所以就导致了现在很多人学习前端，但是很难找到工作的一个主要原因。如果不是我哥是做这方面的，我感觉自己应该会跟大多数人一样，学的内容都是欠缺很多，可能连工作都找不到，更不要说可以找到12K的前端开发工作。所以我觉得尽量要找一个身边的亲戚朋友做这方面的带带自己，不然一个人真的太容易走弯路。

看我分享的这些前端教程，绝对要比你在网上找的那些好很多倍：

因为链接不让发，想要获取教程的朋友，可以私信我“前端”

这套教程就是对应着我上面总结的前端技术栈，这是我目前看到最好的前端课程，要比网上大部分教程讲得要好，特点就是更加的细致，很多实际开发的问题都有讲到，很注意前端方面的规范问题，这在很多前端教程中都是没有的，所以我认为更加适合新手学习就业。

推荐的前端书籍：javascript编程精解javascriptDOM编程艺术javascript高级程序设计(3/4)你不知道的javascript(上中下)javascript权威指南javascript设计模式与实践应用

喜欢阅读文字的学弟们可以看看这些书籍，这都是我挑出来比较经典的JavaScript技术书籍。

前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。而很多同学不会学习，只是每天看视频，而不去写代码写项目实践，这样的学习状态是错误的。在整个学习过程中会出现很多问题，不懂就问，忘了就查，学习编程是一个漫长的过程，需要有足够的耐心和学习的决心。自我摸索自学的过程中会有很大的困难，最后能通过自我摸索自学成功的也是极少数。所以尽量要找一个比较有经验的人去带你，这样才不会走弯路。

如何找工作的问题？

在校的大学生一定不能错过大四的秋招，秋招是非常重要的，一般在秋招的时候都是一些比较好的公司，这个时候往往公司的数量也特别多，能走秋招就走秋招。如果秋招没有准备好，就等明年的春招，反正能通过校招进企业就通过校招进，一旦错过了校招，社招就会变得异常艰难。

还有IT圈一个非常重要的规则，就是通过熟人介绍，很多公司都有猎头，这些猎头就是发掘那些技术好的人才，通过各种方式进行挖人，所以通过关系进行内推也是找工作的主要方式，内推要更加容易就业。

再就是自己去投简历，这样找工作的方式就是海投，海投就会比较累，但是如果你技术能力强，也可以找到自己心仪的公司。如果是大学生，我建议一定要通过校招走，在学习的过程中，多认识一些关系，以后打算在这个圈子里面混，少不了认识一些公司的HR资源以及技术方面比较不错的大佬，我是打算干满三年，然后通过我哥在网易的关系把我内推到网易，网易的薪资就高了，去了后直接年薪30万起步，现在就是我积累的过程。