前端学习体验

骑猪看日落 2022-05-17 02:53 142阅读 0赞

作者：尹光耀  
链接：[https://www.zhihu.com/question/48989656/answer/114454389][https_www.zhihu.com_question_48989656_answer_114454389]

从开始到自学前端半年，现在收获很多。

起源是大学前两年半都在混日子，C++挂过两次，java也是61分的水平飘过，c\#大项目完全靠抱大腿，我的代码水平可想而知了，后来大三下学期的时候（大概是2月中下）想到该找工作了，当时纠结于php和前端，因为我php有点儿基础，但是感觉前端写各种炫酷页面很有成就感QwQ

后来被一个百度的学长拉进了前端坑（老是被他喷基础差，理解力差，太笨，回家养猪吧，你毕业了最多拿4k工资，啊哈哈我现在实习工资就已经超过4k了），他告诉我能写出淘宝首页那种效果就可以进bat了，后来等我写出来时我才发现他是在骗我QwQ，不过我是科班出身，计算机方面还是有一些基础的，虽然混日子，但是耳闻目染多多少少会见识到一些东西，数据结构数据库计算机网络这些当时还是都有学过，只是前端基础没多少，我看过w3school上面的css和js，jquery教程，只知道用用$，getElementById这些东西，还是基本看过就忘的那种水平，不过还好的一点就是我自制力不错，计划性也比较强，比如规定三天之内高效的看完这本书，一周之内学完这个东西等等，嗯，我确实也做到了。当然还要感谢慕课网！！！慕课网视频真的很好，虽然很零碎，但是自己根据需求来看会比较有效，以后如果自己有成就了，一定要回头好好报答慕课网。

我先做的就是刷完w3school的所有前端方面的教程，对于菜鸟来说还是挺有帮助的（现在回头看还是不推荐w3school，因为在那里养成了不注意代码格式的坏习惯，强烈推荐MDN入门），看第一遍的时候对整体有个印象，可以将内容分成多少块，第二遍第三遍就要开始细看，一定要边看边跟着敲，等全部理解后差不多就可以试着模仿一下w3school的首页页面了。

然后js方面我看的最多的就是[JavaScript高级程序设计（第3版） (豆瓣)][JavaScript_3_]，这本书我当时很认真很认真的用了三周差不多看完了，当时那三周真的很辛苦，每天去跑很远去本部图书馆（因为信息学部图书馆一直没有修好），早八晚十，中午能不睡觉就不睡觉，谦虚的说就是每天至少八个小时coding，用adobe reader和onenote记了很多很多笔记，也经常百度，不过看完之后真的收获很大，对面向对象和DOM,BOM等等都有了初步的掌握，而且我现在还经常会回头看这本书，每次看完都有不同的收获，基本前14章全部都是重点，必看的（真心不建议直接看js权威指南）

之后我还看完了css权威指南，但是感觉对我提升不大，挺多东西在w3school已经看过了，真正对我帮助最大的还是慕课网上面张鑫旭老师的几个视频，后来我直接去他博客学习[首页 » 张鑫旭][Link 1]，张鑫旭老师

@张鑫旭

的css水平是真的很高，这些让我对css的理解上升了一个层次（其实很多东西我现在还是不理解）。

接下来就是css的实践了，对我帮助最大的就是百度ife的任务了[百度前端技术学院][Link 2]，提供了很多实战的机会，虽然我只写完了第一期和第二期的部分任务，但是着实让我的css得到了实践，好记性不如烂笔头，多敲多记才是最好的方法，总之，ife真的很良心。

接着我就觉得自己css还算可以了，就想综合的写个复杂页面嘛，于是我就模仿了联想官网首页，当时写了整整两天，写的挺累的，现在再回头看发现写的很烂，里面一堆乱七八糟的东西，组件化程度不够，但是模仿的几乎一模一样，这算是第一次进行综合练习，这里我要推荐一个chrome的插件CSSViewer，真的挺好用。

之后，我还在图书馆借了《响应式web设计》这本书，由于内容比较少，所以两天就看完了，结合写ife里面自适应布局的经验，于是我开始尝试着写一些响应式的网页。

不过因为是自学，没什么人指导（因为大家都很忙，才没人会管你呢），学到这个时候就很迷茫，不知道接下来该看什么了，感觉js水平完全不够，写的少，面向对象更是没怎么用过，但是后来无意中看到jquery插件开发教程[跟我一起学JQuery插件开发教程][JQuery]，感觉很有意思，就去试着写了写，后来我把在慕课网上学到的轮播图（这个代码写的我现在都不想看了）和全屏滚动分别写成了插件，这大概也算是接触组件化了吧。

这期间还有其他帮助很大的就是汤姆大叔的博客[JavaScript - 标签][JavaScript -]这些博客很详细的写了js里面的各种坑，以及一些设计模式，其中js的模块模式让我印象最深刻，让我见识到了闭包的各种巧妙用法，之间也看过阮一峰老师介绍mvvm，模块化，异步等等的博客。

之后就到了五月份，然后我想着这时候要开始找实习了（其实之前大家都开始各种找实习了，我知道自己的水平肯定不够，就一直淡定的自学着），我想简历上就一个这页面好像不大好，然后我就模仿慕课网上面的nodejs教程[node+mongodb 建站攻略(一期)-慕课网][node_mongodb _-]，写了一个响应式的个人博客系统，这也是我第一次接触node，第一次真正写ajax，第一次用NoSql数据库（mondoDB），第一次接触grunt，总之这个让我获益颇多，这个博客系统从设计ui（其实是直接抄袭了国外某位设计师官网的ui）到完成一共用了三周，现在感觉写的极其......丑陋，当然，后来也是凭借这两个艰难的找到了人生第一份实习QwQ

六月份是因为有期末考试，所以基本没有学习到什么，不过这期间我还是在慕课网上学习了一下sass和compass，也看了requireJS，但是我写的少（所以基本就等于没学），这个时候我还重新看了慕课网上面c++的视频，因为有js的基础了，所以学起来很快，而且结合c++里面的面向对象，指针之类的，也让自己学到很多（c++大法好！！），不过我c++还是挂了QwQ因为没去考试，直接得了0分，反正就是感觉这个月没怎么学东西。

到了七月份，我就愉快的去实习了，然后因为各种原因，我实习了一个月就跑路了=。=不过这次实习让我对完整的网站开发流程有了很多的认识，虽然那里比不上大公司，但是比自学好多了，我们是一家只有十几个人的创业公司，但是老大真的很厉害，虽然他是写php的，以前只会在node里面用jade模板来渲染，现在知道还可以用mv\*框架，当时我们用的是backbone.js，我也是第一次见到路由放到前端来写QwQ毕竟自己太渣了，之前用的是express的路由，见识太少了，莫见怪。

之后就又开始疯狂投简历了，虽然面了很多，也很多没有过，但是得到了很多面试经验，而且自从面了ruff后就感觉自己面试水平有了质的飞跃QwQ（面试官叔叔问的太详细了）

目前又拿到了杭州某家和武汉某家的实习offer，现在在朋友的鼓动下，决定只身一人去杭州（因为杭州实在没有认识的人，感觉会很孤单，参加校招也不方便，所以求个杭州的小伙伴带我飞QwQ），同时我也在准备九月份的校招，前两天刚看完了vue的官网文档[vue.js][] 和博客园一位大神的教程 [http://www.cnblogs.com/keepfool/category/845804.html][http_www.cnblogs.com_keepfool_category_845804.html] ，也看了一下jQuery的源码[http://www.cnblogs.com/aaronjs/p/3279314.html][http_www.cnblogs.com_aaronjs_p_3279314.html]，可惜马上去杭州后就要从头开始学react了。

之前那个学长天天喷我菜，让我回家养猪，现在表示我的进步太快了，让我继续好好努力，然后我说是因为我知道自己很笨，但是我真的比别人都努力啊（后悔前两年半荒废了学业，真的应该好好学习）

看到楼上的回答，我想起来这个学长也是图书馆专业的！！他把上课的时间全部用来自学了，后来拿到了百度的offer，他们当年创过业，和他一起的还有个同院的艾老师（不知道是不是图书馆专业）是零基础自学php的 [你是否懂得我的坚持][Link 3] 所以我很佩服他，可惜他不在知乎，没法邀请

接下来准备去实习（现在已经在实习了），然后好好学react，继续学习node，复习数据结构和计网（这个真的很重要，多少次面试都是跪在这俩上面），本来还想有机会就看看bootstrap源码，看看jquery源码，甚至去学学设计，现在来看都要校招后才能做到了，总之，这几个月的自学下来，感觉真的很累，把一天当两天过是多么辛苦，我想当时只有自己能理解，好几次感觉身体被掏空，而且随着学习的深入，发现自己很渣，需要学的东西还太多，找实习的时候好多次面试都是一面挂了，心疼自己QwQ不过面试的次数挺多了，总结就是，大公司对基础很重视，小公司更重视各种库和框架等技能。不能为了追求新技术而去学习各种框架，还是应该先把基础搞好，如果可以，jquery源码看一遍应该会提升很多。

最后，祝我好运！！！也祝题主好运！！！

对了，对于我这种英语渣来说，[SegmentFault][]真的很好用！！！里面的人都很热心（对比知乎）！！！有兴趣的同学可以加群：468273103 ，大家一起交流。

作为视频补充，这些是自己看过并且觉得很良心的慕课网课程：

1、深入理解css系列：

[CSS深入理解之margin][CSS_margin]

[CSS深入理解之line-height\_技术学习教程][CSS_line-height]

[CSS深入理解之z-index-慕课网][CSS_z-index-]

[CSS深入理解之relative\_技术学习教程][CSS_relative]

[CSS深入理解之absolute\_技术学习教程][CSS_absolute]

[CSS深入理解之float浮动][CSS_float]

[CSS深入理解之overflow\_技术学习教程][CSS_overflow]

2、css雪碧应用：

[CSS Sprite雪碧图应用][CSS Sprite]

[用字体在网页中画ICON图标][ICON]

3、sass:

[Sass入门篇\_Sass入门视频教程][Sass_Sass]

[sass进阶篇视频教程][sass]

[Sass和Compass必备技能之Sass篇][Sass_Compass_Sass]

[Sass和Compass必备技能之Compass-慕课网][Sass_Compass_Compass-]

[侧栏工具条开发][Link 4]

3、原生js系列：

[原生 JS 实现帧动画库][JS]

[焦点图轮播特效][Link 5]

[用JS实现放大镜特效][JS 1]

[JavaScript侧边栏信息展示效果][JavaScript]

4、jquery

[jQuery基础 (一)][jQuery_]

[jQuery基础(二)][jQuery]

[jQuery基础修炼圣典][jQuery 1]

[jQuery基础修炼圣典][jQuery 2]

5、组件

[全屏切换效果\_技术学习教程][Link 6]

[阿当大话西游之WEB组件][WEB]

[组件方式开发Web App全站-web app开发实战教程][Web App_-web app]

6、ajax

[Ajax全接触\_技术学习教程][Ajax]

7、响应式

[响应式开发教程][Link 7]

[Bootstrap响应式布局][Bootstrap]

8、移动web

[Hello，移动WEB\_移动web建站][Hello_WEB_web]

[移动优先的跨终端 Web-慕课网][Web-]

[移动端的WEB相册][WEB 1]

9、node

[进击Node.js基础（一）][Node.js]

[进击Node.js基础（二）][Node.js 1]

[mongoDB入门篇\_mongoDB入门视频教程][mongoDB_mongoDB]

[带你学习Jade模板引擎][Jade]

[node+mongodb 建站攻略（一期）][node_mongodb]

[node建站攻略(二期)——网站升级][node]

10、vue

[vuejs入门基础][vuejs]

11、react

[React入门视频教程][React]

[https_www.zhihu.com_question_48989656_answer_114454389]: https://www.zhihu.com/question/48989656/answer/114454389
[JavaScript_3_]: https://link.zhihu.com/?target=https%3A//book.douban.com/subject/10546125/
[Link 1]: https://link.zhihu.com/?target=http%3A//www.zhangxinxu.com/
[Link 2]: https://link.zhihu.com/?target=http%3A//ife.baidu.com/task/all
[JQuery]: https://link.zhihu.com/?target=http%3A//www.poluoluo.com/jzxy/201204/163035.html
[JavaScript -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/TomXu/tag/JavaScript/
[node_mongodb _-]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/75
[vue.js]: https://link.zhihu.com/?target=http%3A//cn.vuejs.org/
[http_www.cnblogs.com_keepfool_category_845804.html]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/keepfool/category/845804.html
[http_www.cnblogs.com_aaronjs_p_3279314.html]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/aaronjs/p/3279314.html
[Link 3]: https://link.zhihu.com/?target=http%3A//idoubi.cc/%3Fp%3D204
[SegmentFault]: https://link.zhihu.com/?target=https%3A//segmentfault.com/
[CSS_margin]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/680
[CSS_line-height]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/403
[CSS_z-index-]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/643
[CSS_relative]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/565
[CSS_absolute]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/192
[CSS_float]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/121
[CSS_overflow]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/256
[CSS Sprite]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/93
[ICON]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/243
[Sass_Sass]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/311
[sass]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/436
[Sass_Compass_Sass]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/364
[Sass_Compass_Compass-]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/371
[Link 4]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/425
[JS]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/659
[Link 5]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/18
[JS 1]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/32
[JavaScript]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/74
[jQuery_]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/418
[jQuery]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/530
[jQuery 1]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/429
[jQuery 2]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/430
[Link 6]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/374
[WEB]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/99
[Web App_-web app]: https://link.zhihu.com/?target=http%3A//coding.imooc.com/class/15.html
[Ajax]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/250
[Link 7]: https://link.zhihu.com/?target=http%3A//coding.imooc.com/class/50.html
[Bootstrap]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/41
[Hello_WEB_web]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/494
[Web-]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/43
[WEB 1]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/140
[Node.js]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/348
[Node.js 1]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/637
[mongoDB_mongoDB]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/295
[Jade]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/259
[node_mongodb]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/75
[node]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/197
[vuejs]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/694
[React]: https://link.zhihu.com/?target=http%3A//www.imooc.com/view/504