作者| 刘晓登
编辑| 杜明
2013年大专毕业以来，我走过很多弯路，在餐厅当服务员，在工厂流水线上干过，在客服干过，在电话营销干过。可以说我的经历非常“丰富”。
最后，凑巧的是，我不是计算机专业，没有受过教育，所以自学编程对我来说并不容易，但幸运的是我坚持了下来。
我现在的工作还算顺利，收入在现在的城市也不高也不低，继续过着还算不错的生活，希望以后会更好。
从2016年下半年开始认真做前端到现在已经两年多了。起初我没有语言基础，连“对象”都看不懂，更别说封装、继承、多态这些晦涩难懂的东西了。
我当时不知道从哪里开始，但是我该怎么办呢？因此，当我遇到困难时，我毫不犹豫地向资深专家请教、研究资料，很多时候又不好意思向别人请教，生怕丢面子。
但是，作为一个有经验的人，我想告诉大家，寻求资深专家的建议是非常重要的。不要害怕尴尬或丢面子。价值？学习真正的技能是最重要的。没有技术就真的没有面子。当然，在向别人请教的时候，一定要掌握好“分寸”，避免干扰别人的工作。
我现在非常感谢我的导师和在网上撰写博客和分享文章的专家，为自学的初学者提供了如此多的信息、经验和见解。我从中受益匪浅。
我开始写博客是因为我想向优秀的前辈学习，帮助像我这样不擅长学习、从零开始、热爱技术的志同道合的人。
我知道我的技术还不是很高，离精通还很远，我也知道自己的无能为力。我希望这篇文章能帮助您了解更多。 “它包括对从头开始学习前端的学生的指导。他们并不像我最初感觉的那样盲目。即使有一点帮助就足够了。” ”
话虽如此，让我们言归正传吧。这些是我平时学习和收集的资料。我们期待着帮助您。
前言
首先我要说的是，自学是极其困难的，学习本身就是一个客观的过程，更何况是在一个新的领域从零开始独自奋斗。这并不是要让你泄气。请结合自身环境和条件慎重考虑。否则，如果中途放弃，不仅会浪费时间，还会浪费精力和金钱。如果你已经下定了决心，决定去做一件事，哪怕你是像我这样的渣男，只要你毫不犹豫地坚持下去，也能成功。相信你自己。兴趣是最好的老师。许多人非常反对这个词被强行带入他们的生活。谈论兴趣是愚蠢的。其实，问问自己是否对技术感兴趣。只要做自己喜欢、感兴趣的事情，就能走得更远。有一天我也会明白这一点。当时我就很喜欢，觉得工资高，因为离用户最近。结局很好。说实话，当今社会，科技发展如此之快，如果你认为学习技术就能长久，那么我建议你还是这么做。参加公务员考试可能更适合你（我并不是说你不需要学习公务员，只是自己尝试一下）。没有必要觉得为时已晚。如果你采取行动并坚持下去，你可以杀死80% 的人。自学的人很多，但坚持下来的人却很少。正如郭德纲所说，我的相声有多好并不重要，重要的是我活了下来。著名营销人“小马松”毕业后打拼多年，却因对广告营销感兴趣而辞去工作，白手起家，如今已是著名的营销大师。如果您认为它不适合您或您无法坚持下去，而不是将您的时间浪费在学习或不学习的斗争中，我建议您改变您的轨迹并专注于一件事。增加您成功的机会。工具
想要做好工作，首先需要磨练你的工具，所以在开始之前选择一个合适且易于使用的编辑器非常重要。工具不多，只是简单易用。如果您是编辑，您还必须学习其他东西。工具可以帮助您更快地学习。
1.网络风暴
不用说，这是前端最强大的编辑器，尤其是无与伦比的智能提示，但是项目太多很多人都会遇到延迟。
WebStorm官网下载地址：https://www.jetbrains.com/webstorm/。 WebStorm有什么特别之处？(https://www.zhihu.com/question/20936155)激活WebStorm2018(https://blog.csdn.net/qq_32135281/article/details/82696280) 2. Visual Studio Code
微软的开源、免费产品受到许多技术人员的喜爱，基本上已经成为前端开发人员必备的编辑器，让您可以灵活地使用强大的插件扩展来创建自己喜欢的风格。我们将向您发送常用插件列表，因此请随时携带它们。
Visual Studio Code官网下载地址：https://code.visualstudio.com/。 VSCode 扩展推荐：https://github.com/varHarrie/varharrie.github.io/issues/10 使用顶级VSCode 扩展加快开发速度JavaScript：https://www.html.cn/archives/9507vscode 插件推荐：https://segmentfault.com/a/11900000066972193.原子
它也是一款免费开源的编辑器，受到很多人的喜爱，但我自己用的不多，所以不推荐插件。请根据您的兴趣爱好进行搜索。
4. 访问科学互联网
每个程序员都应该拥有工具和能力。有很多事情是不可以做的。具体怎么做我就不多说了，大家可以自己查资料。此外，下面推荐的许多资源都需要科学的互联网访问才能访问它们，因此请务必研究它们。
5.谷歌
在使用“谷歌”之前，您需要学会如何科学上网。否则，学习如何使用搜索可以解决很多问题。为了跟上不断变化的形势，百度经常重复内容，但最重要的是，你可以在这里轻松找到在百度上找不到的答案。 - 有一个搜索。
6. GitHub
全球最大的“同性恋”开源交流社区。如果您没有帐户，请立即注册。这里有很多很棒的资源项目和很多不同的伟人。观察好的代码是我们学习的好方法。此外，开发过程通常任务繁重且时间有限，因此应避免重新发明轮子。您可以在这里找到所需的工具和代码。
7. 堆栈溢出
海外著名技术问答交流社区。您将找到开发过程中遇到的许多问题的答案。
8. 段故障
还有相应的国内版本的技术问答交流社区。即使你英语不好，也可以在这里找到答案。
9. 降价
Markdown 是一种轻量级标记语言，具有简洁的语法，使作者能够专注于自己的内容，而无需复杂的格式，这使其成为任何人，尤其是经常思考博客的人的必备掌握。想象一下，如果你使用world，每次写完一篇文章都必须花费大量时间进行格式化。
Markdown 中文文档：https://markdown-zh.readthedocs.io/en/latest/HTML
一旦你掌握了一些东西，让我们开始学习HTML。
HTML被称为“超文本标记语言”，是页面整体结构的基础。
1. 基础知识
w3school在线教程（http://www.w3school.com.cn/h.asp）：内容非常基础，适合初学者初步了解HTML。 freeCodeCamp（https://www.freecodecamp.cn/）：一个非常好的入门学习网站，对于准备自学的朋友来说非常有趣，类似于游戏中打怪和升级。我想尝试一下。 2. 对于高级用户
MDN HTML (https://developer.mozilla.org/zh-CN/docs/Web/HTML)：这里的内容质量更高，错误更少，更全面。 HTML 和CSS 编码指南(https://codeguide.bootcss.com/)：掌握编码技能并编写更好、更高质量的代码。 CSS 文章
HTML 传达了页面的内容，但它有时会有点单调和“丑陋”。就像美丽的女人需要一件漂亮的外套才能更加美丽一样，CSS的作用就是为这个内容添加样式。 “衣服胜于马鞍”，你的网页内容也应该有一件漂亮的外衣来吸引用户。这个装饰是用CSS完成的。
1. 基础知识
学习CSS布局（http://zh.learnlayout.com/）：分步指导完成CSS学习。 CSS 参考手册(https://css.doyoe.com/)：提供CSS 的全面介绍。 w3school CSS参考手册（http://www.w3school.com.cn/cssref/index.asp）：与上面相同的非常基础的知识，适合入门。 2. 对于高级用户
书：
《CSS揭秘》（https://book.douban.com/subject/26745943/）：强烈推荐的CSS书籍，可以学到很多鲜为人知的技术。
线上系列：
MDN CSS (https://developer.mozilla.org/zh-CN/docs/Web/CSS)：和HTML 是有质量保证的MDN 社区文档。 HTML 和CSS 编码指南(https://codeguide.bootcss.com/)：掌握编码技能并编写更好、更高质量的代码。大墨老师的CSS系列（https://www.w3cplus.com/CSS3）：大墨老师对CSS有非常深刻的理解和丰富的实践经验，是《图解CSS3：核心技术与案例实战》的作者。大墨老师的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大墨老师的SASS文章系列。 SASS中文网（https://www.sasscss.com/）：成熟、稳定、功能强大的CSS扩展语言解析器。它允许您使用变量、条件语句等创建CSS。 Stylus官网（https://stylus.bootcss.com/）：这也是一个CSS预编译器，但它省略了一些符号，使得编写CSS更加简洁干净。 HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：HTML5和CSS3的详细解释。知识点：
不要说你了解CSS相对单位（http://wuyuying.com/blog/archives/css-in-Depth-relative-units/）：请详细了解CSS相对单位rem和em之间的区别。 CSS高级内容（https://github.com/coconilu/Blog/issues/29）：深入了解常见知识点。 Flex布局教程：语法（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老师讲解的Flex。 Flex布局教程：实例（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老师讲解的Flex。 《CSS相关》目录存档（https://www.zhangxinxu.com/wordpress/category/css/）：张鑫旭的CSS系列文章。用简单的术语解释一下。作者《CSS世界》。 40 个用CSS 绘制的形状和图形(http://www.open-open.com/lib/view/open1476240478941.html)：用CSS 绘制的40 个不同的图形形状。 CSS-big Frontend（http://www.daqianduan.com/tag/css）：CSS知识点。 JavaScript
有了HTML和CSS，网页也有了内容和风格，但缺少了用户交互，所有的内容都静静地坐着，毫无生气。就像一个漂亮的女人穿着漂亮的衣服，在我面前不动是没有吸引力的，但是当她唱歌、跳舞、对我眨眼的时候，我真的受不了了。 JavaScript 将这种“行为”添加到网页中。
JavaScript概述（https://blog.csdn.net/qq_32135281/article/details/81667714）：轻松了解JavaScript开发的起源。
1. 基础知识
书
《JavaScript权威指南 （第6版）》（https://book.douban.com/subject/10549733/）：俗称“犀牛书”，JS经典，提高JS技能必备。现在我已经学会了JS 的所有基础知识。刚开始读起来可能有点困难，但只要你有耐心，你就会收获很多。《JavaScript高级程序设计（第3版）》（https://book.douban.com/subject/10546125/）：JavaScript超级畅销书，俗称“小红书”。本书涵盖了JavaScript语言实现、ECMAScript、DOM、BOM、事件、面向对象等等。随时拿出来看看，了解更多关于JS的知识。线上系列
除了书籍之外，还有许多很棒的在线教程可以帮助您提高学习水平。
最新Javascript教程（https://zh.javascript.info/）：非常全面的JavaScript学习教程，从基础到高级非常详细，所以你一定会喜欢它。廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。 JavaScript标准参考教程（Alpha）（https://javascript.ruanyifeng.com/）：阮一峰老师的系列教程，通俗易懂，实例丰富。 2. 对于高级用户
JavaScript语言精髓（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts .md) )：揭示JavaScript 的精华。 JavaScript秘密花园（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：整理并讲解了JS的核心知识点，如this、闭包/作用域、构造函数、原型等。面试所需的所有知识点。 ECMAScript 6 简介（http://es6.ruanyifeng.com/）：阮一峰老师的这篇ES6 简介，全面介绍了ECMAScript 6 中引入的新语法特性。 JavaScript 使用技巧（http://www.jstips.co/zh_CN/）：学习一些以前从未发表过的技巧。详解JavaScript原型与闭包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：详细了解原型和闭包。读完本文后，您将对原型和闭包有一个完整的了解。大墨老师的JavaScript系列文章（https://www.w3cplus.com/JavaScript）：大墨老师的JavaScript系列文章。 JavaScript 算法和数据结构(https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md)：享受学习基于JavaScript 的算法和数据结构的乐趣。 JavaScript 中的正则表达式（https://blog.csdn.net/qq_32135281/article/details/78274563）：希望我关于正则表达式的文章对您有用。 30 分钟掌握ES6/ES2015 核心内容（第1 部分） (https://segmentfault.com/a/1190000004365693) 30 分钟掌握ES6/ES2015 核心内容（第2 部分）(https://segmentfault.com/a/1190000004368132)：本节介绍。常用的ES6知识点。学习JavaScript设计模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：了解JavaScript编程语言的经典和现代设计模式。你不懂JS（丛书）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）面试图（https://yu Chengkai.cn/docs/frontend/#%E5%86% 85) %E7 %BD%AE%E7%B1%BB%E5%9E%8B)：收集了很多知识点，包括JS、浏览器、性能等等。 30秒JavaScript代码片段（https://www.html.cn/30-seconds-of-code/）：深入了解一些有用的JS代码片段。打字稿
有人说ES6 的超集扩展和严格的数据类型提高了可维护性，使其适合开发大型项目。想了解一下吗？
TypeScript中文手册（https://typescript.bootcss.com/）：官网翻译版。 TypeScript 手册（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。 RxJS中文文档（https://cn.rx.js.org/）：中文官方网站。 30天掌握RxJS（01）：认识RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁体中文读起来可能不太流畅。 J查询
尽管我们正处于单页应用程序时代，有React、Vue等强大框架可用，但仍然有一些旧项目需要维护。也希望能够在学习的早期阶段使用它。通过创建两个简单的应用程序，您将能够相对了解基本用法，并且能够更好、更方便地操作DOM。但不推荐深度学习。
《锋利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本非常好的Jquery学习书籍。 jQuery API中文文档（https://www.jquery123.com/）：JQuery中文教程。阿贾克斯
一旦掌握了HTML、CSS 和JavaScript，您将自己运行一些项目，并且项目内始终会进行数据交换。这就是Ajax 发挥作用的地方。
廖雪峰AJAX (https://www.liaoxuefeng.com/wiki/00143446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc60): 廖雪峰的博客知识。 XMLHttpRequest对象(https://wangdoc.com/javascript/bom/xmlhttprequest.html)：阮一峰老师对AJAX的详细讲解。 JSON风格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：因为前端和后端交互的数据一般都是JSON格式的，需要JSON。 NodeJS 和模块化
NodeJ的出现将前端开发带入了一个新的领域，并催生了专业的Node工程师。不仅如此，Node 在前端模块化和工程化方面发挥着非常重要的作用，所以有兴趣的话一定要了解一下。你可以更深入地学习，成长为一名全栈工程师。
Javascript模块化编程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：如何写模块Javascript模块化编程（二）：AMD规范Javascript模块化编程（三）：require.js用法： Front History of End Modular Development (https://github.com/seajs/seajs/issues/588)：了解前端模块化开发。 Node.js官方（https://nodejs.org/zh-cn/）郎叔：如何正确学习Node.js（https://github.com/i5ting/How-to-learn-node-Correly）：郎叔我有。世界，010 - 30000 位作者。成为全栈工程师之路- Node.js (http://i5ting.github.io/nodejs-fullstack/) 框架
随着用户需求越来越复杂，系统越来越复杂，传统的开发模式越来越难以满足，三大框架帮助您专注于各层运营。重复查看操作。
框架能力现在已经成为前端开发者必备的技能之一，三大框架的“终极目标”意味着开发者不用再苦苦思考选择哪一个。您可以选择其中两个。如果您刚刚入门，我们建议从Vue 开始，它相对简单且灵活。
MVC、MVP、MVVM图（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在学习框架之前，需要了解MVVM的设计思想。框架原理（https://yu Chengkai.cn/docs/frontend/framework.html）：了解框架的一些基本原理。 1.有角的
Angular（https://angular.cn/）：Angular 官方社区。 Angular Developer (http://www.ngfans.net/)：由中国Angular 布道者大莫琼秋管理的网站。 NG-ZORRO (https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83)：阿里巴巴库创建的Angular UI 组件。 2. 查看
Vue（https://cn.vuejs.org/index.html）：官方网站，最好的学习资料。我的Vue进展之路（https://blog.csdn.net/qq_32135281/column/info/29689）使用Vue全家桶创建博客网站（https://www.cnblogs.com/xiaohuochai/p/9228543.html）Elements（http://element-cn.eleme） .io/#/zh-CN)：高质量的Vue UI组件库。饿了么前端团队制作。
Vue 项目里戳中你痛点的问题及解决办法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做项目难免回去到坑，这里你或许可以找到答案。3. React React我了解不多，所以就没什么好推荐的了，大家可自行学习。 React官网（https://www.reactjscn.com/）图形可视化 随着日益增长的数据，如何利用高效的利用数据，是每个企业都考虑的问题，而人的眼睛看到的东西要胜过阅读的问题，俗话说「一图胜千言」就是这个道理，所以数据的可视化就会格外的重要，以下都是我常看的一些技术，书籍，和关注的可视化开源库。 《HTML5 Canvas核心技术》（https://book.douban.com/subject/24533314/）：学习 Canvas 比较好的一本书籍。Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老师的 Canvas 系列。Echarts（https://www.echartsjs.com/index.html）D3（https://d3js.org/）Highcharts（https://www.highcharts.com.cn/）AntV（https://antv.alipay.com/zh-cn/index.html）Mapv（https://mapv.baidu.com/）工程化与版本控制篇 1. Git 版本控制工具，很多新手往往把 git 与 github 傻傻分不清楚，二者是不同的东西，一定要去区分清楚。 Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老师的教程。Learn Git Branching（https://learngitbranching.js.org/）：一种有趣的学习 Git 的方式。GitHub 漫游指南（https://github.com/phodal/github）：作者是一个极客。git - 简易指南：http://www.bootcss.com/p/git-guide/2. Gulp 自动化构建工具，项目打包部署前的压缩合并，节省时间，提高开发效率。 Gulp 中文网（https://www.gulpjs.com.cn/）：官方教程。gulp详细入门教程（http://www.ydcss.com/archives/18）：非常详细的实现步骤。3. Webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。 Webpack中文文档：https://www.webpackjs.com/webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615Webpack揭秘——走向高阶前端的必经之路：https://juejin.im/post/5badd0c5e51d450e4437f07aWebpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007webpack 热加载原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/4. Babel JavaScript代码编译器，可以让ES6及以上语法转换成浏览器支持的语法，一般会在框架的脚手架中自行配置。 Babel（https://babel.bootcss.com/）：官网教程。5. 代码质量 ESLint（https://eslint.bootcss.com/）：javascript代码检测工具帮助我们写出更规范的代码。浏览器与HTTP 浏览器的常见知识点（https://yuchengkai.cn/docs/frontend/browser.html）：需要我们了解的常见知识。网站安全（https://yuchengkai.cn/docs/frontend/safety.html）：几种常见安全问题。同源限制（https://wangdoc.com/javascript/bom/same-origin.html）从URL输入到页面展现到底发生什么？（https://github.com/ljianshu/Blog/issues/24）深入理解浏览器的缓存机制（https://github.com/ljianshu/Blog/issues/23）网页性能管理详解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）关于Http协议，你必须要知道的（https://github.com/ljianshu/Blog/issues/22）HTTP 协议（https://github.com/coconilu/Blog/issues/135）HTTP2 协议（https://github.com/coconilu/Blog/issues/134）浏览器同源政策及其规避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）跨域资源共享 CORS 详解（http://www.ruanyifeng.com/blog/2016/04/cors.html）总结 XSS 与 CSRF 两种跨站攻击（https://segmentfault.com/a/1190000004623125）性能优化 性能优化（https://yuchengkai.cn/docs/frontend/performance.html）：常见性能优化。前端性能优化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）延迟加载(Lazyload)三种实现方式（https://zhuanlan.zhihu.com/p/25455672）详解懒加载和预加载（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）前端优化带来的思考，浅谈前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）推荐几本与Web性能优化有关的书籍（https://w3ctech.com/topic/108）vue + webpack 前端性能优化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）SEO SEO优化实战（https://imweb.io/topic/5682938b57d7a6c47914fc00）博客系列 1. 个人 现在是一个信息爆炸的时代，网上有很多优秀的博客文章，每个人的精力都是有限的，不可能关注到所有的博客，每个人关注点可能不太一样，所以关注的个人博客也会不同，这些推荐几个我比较常看的几个高质量博客。而且是持续更新的。 阮一峰的个人网站（http://www.ruanyifeng.com/home.html）：阮一峰老师江湖地位不必多说，博客不止有技术，现在阿里任职。廖雪峰的官方网站（https://www.liaoxuefeng.com/）：廖雪峰老师写过很多优秀的系列教程，值得去学习。张鑫旭（https://www.zhangxinxu.com/）：专注前端技术的大牛之一，出版《css世界》一书。W3cplus（https://www.w3cplus.com/）：大漠老师在手淘任职，CSS，HTML 有着丰富的经验。前端入门和进阶学习笔记（https://github.com/qianguyihao/Web）：从零开始自学，然后进入京东，记录作者一路走来的学习笔记。六小登登（https://blog.csdn.net/qq_32135281）：我自己的个人博客，记录自己的一些学习总结，个人成长，认识思维，虽然自己还是个菜鸟，但一直在路上。2. 团队 奇舞周刊（https://weekly.75team.com/）：收集每周前端精华文章。美团技术团队（https://tech.meituan.com/）：分享一些美团的技术路线。JavaScript Weekly（https://javascriptweekly.com/）：每周都会分享一些 JavaScript 优质内容。印记中文周刊（https://weekly.docschina.org/）：如果你对英文有阅读障碍的话，印记帮你翻译。凹凸实验室（https://aotu.io/index.html）：京东团队。淘宝前端团队FED（http://taobaofed.org/）：淘宝前端团队，不必多说了。网易FEG前端团队（http://feg.netease.com/）：网易的前端团队，网易的产品一直都是我最喜欢的。IMWeb前端博客（https://www.imweb.io/）：腾讯公司前端团队，负责QQ的相关业务你就知道了，都是亿级别。tutorialzine（https://tutorialzine.com/）：高质量教程和文章库。项目资源 前端技能汇总（http://html5ify.com/fks/）：一个前端工程师需要的技能点和学习资料。You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一个CSS的优质项目，纯 CSS 实现我们项目中很多常用，不常用的样式。JavaScript libraries（https://www.javascripting.com/）：一些优秀的JavaScript 开源库。awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端经典学习书单。前端 TOP 100（https://www.awesomes.cn/rank）：基本涵盖了所有前端在用的开源项目，我觉得收藏这一个就够了。常用工具 CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧图的在线制作工具。Lorem Picsum（https://picsum.photos/）：好用的图片临时占位符。Md2All（http://md.aclickall.com/）：优秀的现在 Markdown 编辑器。优波设计（https://ubuuk.com/）：优秀的设计导航网站，帮助你更好的寻找资料。搬书匠（http://www.banshujiang.cn/）：书籍搜索下载。史莱姆导航（http://www.slimegps.cn/）：资源搜索。codePen（https://codepen.io/）：在线代码编辑工具。Iconfont（https://www.iconfont.cn/）：阿里的字体图标库，支持多种格式，下载图片，在线使用，SVG等等。Can I use（https://www.caniuse.com/）：可以查看浏览器兼容 CSS 情况。在线工具（https://tool.lu/）：工具资源导航。最后 以上是我这两年多一路走来收藏的一些资料，整理这份资料也花了我好几天的时间，希望能够在自学的道路上帮到你。 再次声明，我并不是什么大神，我自认为技术也没有到达这个层级，但是我会一直坚持学下去，另外一定不要误会这里面的知识我全部都会，这些都是我学习的一些资料想整理出来，免去小白的一些不知道如何查阅资料。 这里的资源可能并不适合每一个人，你也不一定全部都需要，只需要挑选自己想要的部分就行，任何事情并不是越多越好。 作者：六小登登，个人公众号：六小登登（ID：liuxiaodengdeng）。目前在某创业公司任职前端开发工作，近 3 年前端开发经验，爱技术、爱写作、爱分享。 声明：本文为作者投稿，版权归其个人所有。 版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除