以下整理的资料，都是之前我学前端时用过且觉得不错的资源，带有强烈的个人偏好，但用着确实都不错。此文权作记录与归纳，如果有不愿公开的作者，请联系我删除～
一、UI与灵感
Element : https://element.eleme.cn/#/zh-CN （做项目时可用）
Layui : https://www.layui.com （同上）
风格清新统一的创意404页面：https://www.kapwing.com/404-illustrations （不多，但是很可爱）
免费图库：https://pixabay.com/zh/ （高清大图，可以用来做博客）
https://www.stockio.com（有一些创意图标）
https://www.freepik.com （同上）
阿里巴巴图标库（现在有插画了）： https://www.iconfont.cn （里面很多图标萌化了，还有系列作品，支持换色支持svg等多种格式下载）
在线颜色表：https://www.materialui.co/colors （直观取色，打开时小心眼睛）
二、HTML与CSS
慕课网免费课程 “HTML+CSS入门课” ：https://www.imooc.com/learn/9（简单易懂的入门课，边学边做上手极快。）
HTML Crash Course [2021] : https://www.youtube.com/watch?v=qz0aGYrrlhU (油管上的，虽然才1小时，但讲了很多知识点，有条件的建议抽时间看看，同时练习。)
书籍：《精通CSS3》（这本书其实很好懂，不要被标题吓到），《HTML5权威指南》+《CSS5权威指南》（放手上参考，不必急于通读）
总结：初期这部分知识不需要面面俱到，大概有个了结，等做项目时用到一些不常用的，再搜就是。
三、JavaScript
JS基础：https://www.imooc.com/learn/36 + https://www.imooc.com/learn/10 （两个课程内容都很浅显，快速掌握就好）
廖雪峰JavaScript教程：https://www.liaoxuefeng.com/wiki/1022910821149312 （不必全都学，只学自己不太理解的部分）
Learn JavaScript in 1 Hour：https://www.youtube.com/watch?v=W6NZfCO5SIk（也是油管的，非常直观的课程）
书籍：《DOM编程艺术》，《JavaScript语言精粹》，《JS高级程序设计》，《你不知道的JS》，《ES6标准入门》（其中个人最喜欢的就是《你不知道的JS》，读来有种醍醐灌顶的感觉）
总结：JS时前端学习的重中之重，一定要打好基础，后续框架学习会轻松很多。
四、Vue
官方文档：https://cn.vuejs.org/v2/guide/ （一定要看，官方文档很友好的，其实很多网课也就是看文档讲）
视频课：https://www.bilibili.com/video/BV15741177Eh （B站课很多，这只是自己最喜欢的老师）
剖析 Vue.js 内部运行机制 ：https://juejin.im/book/5a36661851882538e2259c0f （可帮助理解用，但不是免费的）
五、小程序
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ （可以直接看这个上手）
视频课：https://www.bilibili.com/video/BV1Kt411V7rg （不必全听，有点慢了，可以听听不好懂的部分）
ColorUI组件库（这个直接小程序里搜索，做小程序可用）
六、浏览器
浏览器工作原理与实践 ： https://time.geekbang.org/column/intro/216 （非必须，小贵，当时搞活动入的）
浏览器证书原理： https://cjting.me/2016/09/05/build-a-https-site-from-scratch/ （很短，可以简单看看）
七、代码规范
CSS命名方法（仅供参考）：https://segmentfault.com/a/1190000000391762
八、博客搭建
1.Hexo+Github：https://godweiyang.com/2018/04/13/hexo-blog/ （不要买域名，0花费就能搭建博客，缺点是打开会慢点甚至有时候挂了？）
2.Vps+Hexo ：https://zhuanlan.zhihu.com/p/136234800 （有兴趣可以试试，学生机的话很便宜的，顺便练习下Linux操作。国内的服务器打开很快，缺点是麻烦，还要买域名、备案等等，事情很多就不多吐槽了，还有就是个人真的不建议长期使用这个，费用是一回事，域名信息太透明了也让人没有安全感）
九、社区和博客
问题社区StackOverFlow：https://stackoverflow.com （有找工作板块）
掘金：https://juejin.cn （技术分享，有免费和付费作品）
V2EX：https://www.v2ex.com （讨论技术）
阮一峰的网络日志：http://www.ruanyifeng.com/blog/ （推一下他的科技周刊，真的很有趣）
十、可能用到的工具
VSCode：https://code.visualstudio.com/Download （很好用的编辑器，推荐安装Live Server插件，方便调试页面，插件具体参考油管视频 Top 10 Best VS Code Extensions https://www.youtube.com/watch?v=c5GAS_PMXDs）
ForkLift：https://binarynights.com （Mac上非常好用的文件传输工具，好看又免费，主要是免费hh，下载了选择免费试用就行，富婆可以直接买）
Termius：https://www.termius.com （Windows和Mac版都有，简洁又免费，可以管理多个远程服务器）
Charles：https://www.charlesproxy.com （抓包工具，可一直免费试用）
The Unarchiver：https://www.theunarchiver.com （Mac好用的解压软件不多，这个就挺不错的）
Markdown 编辑阅读器: https://www.zybuluo.com/mdeditor (网页上的，可以边学边练习)
Markdown 编辑器Typora：https://typora.io （Windows和Mac都有，可以拿来写博客）
正则可视化工具Regexper：https://regexper.com （前期不懂没关系，用的时候再搜也不迟。）
正则检测工具Regexpal：https://www.regexpal.com （有常用的正则表达式范例）
360字体版权查看网站：http://fonts.safe.360.cn （可以看看自己拥有的字体是什么授权）
十一、一些有用网站
代码仓库Github：https://github.com
参考教程MDN：https://developer.mozilla.org/en-US/docs/Learn （英文版较全，有些页面没翻译。我也有参与翻译hh）
力扣：https://leetcode-cn.com/problemset/all/ （刷题用，这是题目页，不是首页）
Vim资料：https://vim-china.org
欢迎大家补充～
- 本文作者： Baili
- 本文链接： https://baili90.github.io/2021/05/31/2021-05-31-fornt_end/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！