在这里我以过来人的身份写下这篇文章，希望刚刚进入大学或者即将进入大学的学弟学妹们千万不要像我一样，等到快要毕业或者出去找工作的时候才知道知识技能的重要性。

我只有专科学历，专业学的是机械工程专业。大一的时候还老老实实地上上课，参加下学校的各种社团活动，感觉还挺充实。到了大二可能受身边同学的影响，天天沉迷于网吧，白天睡觉晚上通宵，玩得不亦乐乎。大学毕业就随便找了个物流公司实习。

上班后才知道社会多残酷，工资低开销大，很多地方都需要用到钱，工资月月光，更别说什么存款，心里其实挺慌的非计算机专业能学seo吗；偶然一次机会，了解到一个高中同学大学学的是计算机专业，现在从事前端开发的工作，薪资待遇挺好的。他和我说他身边也有很多同事也不是计算机专业出身，让我尝试自学一下前端。

于是我从去年9月份开始自学WEB前端，差不多用了8个月的时间吧，现在是在南京的一家软件公司做开发，技术部大约是30多人。薪资是12K，五险一金。我觉得自己挺幸运，大学荒废了那么多时间，毕业后还能找到一份月薪过万的工作。

根据我自学的经验给大家几点建议非计算机专业能学seo吗：

1.准备一份系统的视频教程。

我自学用的视频教程是我朋友给我的，他跟我说普通教程ajax前后端交互会在学完js后直接讲XMLHttp的API方法和使用, 跨域和封装也只限于前端代码部分的讲解和库的使用。而他给我找的这份教程，在这些基础上拓展了HTTP理论、交互通信原理、服务端http服务器搭建、MIME、报文端口、监听抓包、网络业务模型、代理缓存、cookie session 鉴权认证、安全加密、Token、JWT、oauth、session管理、RESTful接口设计、协商合约、资源标识等原理规则性知识，能够让我真正清楚整个交互的来龙去脉，而不只是单纯的抄方法、跟着教程写代码。我能找到12K的工作，很大一部分原因就是这份教程讲的内容够详细，技术学的扎实。

如果大家找不到一份系统的教程，可以用我当时自学的这份，只要关注我，私信“前端”二字即可获取。

2.学习过程中一定要多练习敲代码。

我刚开始自学那会，总感觉自己能看懂代码，但动手却写不出来。通过和我朋友沟通才发现，我的学习方式有问题。正常的学习方式应该是写代码的时间要比看视频的时间长。只有多敲代码，才能够理解运用。很多人学完之后，能够看懂代码但是不会写，或者是学了后面的忘了前面的，根本原因都是练得太少。假设每天学习前端的时间是6个小时，那么起码要拿出3个小时以上的时间练习敲代码。只看视频不敲代码，就是在浪费时间。

3.多和专业人士沟通交流，避免闭门造车

有人一起交流学习，真的是事半功倍，效率会提高非常多。身边没有能跟你探讨学习的朋友，可以加一些学习氛围不错的前端交流学习群，跟有经验的人交流可以学到很多好的学习方法和技巧，提高我们的学习效率。找不到好的学习群，可以私信我“前端”，加入我朋友创建的这个前端学习交流群。里面有好多已经工作的大佬，每天不忙的时候在群里解答问题。也有很多正在学习的人每天交流学习心得。气氛是非常好的，大家可以在群里一起监督学习。我能自学找到12K的工作，离不开群里这些大佬的帮助。

最后给大家分享一份系统的前端学习路线，我就是按照这份学习路线去学的，上面的知识点掌握了百分之七十就找了12K的工作，给我整理这份学习路线的大佬说，能够把这份学习路线上的知识点全部掌握，就可以准备大厂的面试了。

HTML/CSS3 以及工具部分非计算机专业能学seo吗：vscode开发工具使用markdown文档工具使用浏览器平台环境标签基础DTD与META语义化选择器权重与优先级匹配规则浮动与清除、BFC、类名组合规则SEO前端技巧定位叠加技巧伪类伪元素盒子模型代码规范性能优化渲染原理CSS Spritesiconfont字体图标、布局思路布局定式css3动画css3选择器css3过渡flex布局背景渐变css3实用动效3D模块css3变量em/rem/vw

学完这些可以完成一个企业内部多页面项目实战（非仿站）有完整PSD与切图

然后就是JavaScript 部分，你需要掌握以下知识点：

JavaScript概念

基础认知发展历史应用范围优缺点

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指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

DOM/BOM

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

JS业务应用扩展

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

ECMAScript5 --- ECMAScript9扩展

版本解读应用环境letconst解构赋值箭头函数对象解构reset参数解构classsetgetextendssuperstaticprivate实现symbolpromiseproxy代理拦截async/await对象新增API数组新增API字符串新增API原型属性对象修饰代理拦截链式询问空值合并运算符泡泡龙面向对象游戏开发

HTML5 / 移动端开发 部分

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使用禁用缩放设置理想视口

常用类库/工具

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

模板化应用 、预处理应用

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

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

Nodejs与工程化开发 部分

Node原生基础

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

Node框架

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

webpack工程化构建

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

前后端数据交互

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

RESTful接口设计

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

数据库存储

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

博客后台项目实战

数据库设计服务端路由搭建接口设计与API管理通信交互管道封装注册登录路由导航前端路由管理权限管理用户管理分类管理标签管理文章管理模块化功能封装校验库封装promise链式行为封装异步模块处理SPA单页面应用初级实现原生集中行为控制器模板化+模块化+预处理+工程化实现前端页面

组件化封装

组件化基础概念组件设计原则组件封装组件耦合与解耦工程化+模板化+模块化实现原生组件化功能

vue框架部分

vue基础

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

vue工程化

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

vue Router

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

vuex

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

vue项目实战

vue博客项目实战 PC + 移动端elementUIvantUIwebsocket聊天室虚拟人偶vueScrollstoreqsnprogresseditor文章分类词云效果spa单页面应用移动PC无缝切换完整注册登录vue加密鉴权http封装管理错误处理封装vuex核心状态管理本地存储状态更新令牌处理文章富文本编辑点赞收藏访问评论组件封装组件复用组件混合高级组件开发复合性组件通信vue中处理原生DOM行为vue常见错误处理重置vue数据响应个人信息修改头像上传通知组件封装postcss应用项目打包优化