前言：以下资源以我半路出家的实用角度出发，此次整理后经我前端工作经验丰富的程序员好姊妹审阅修订，感谢她多次的指导，也请大家择情选用哦～
此文权作记录与归纳，如果有不愿公开的作者，请联系我删除～
0.转码的思索与行业科普
0.1 计算机科普：
《计算机速成课》：https://www.bilibili.com/video/BV1EW411u7th?share_source=copy_web （在油管也有，简单好懂的视频，每一集很短，但集数有点多，看感兴趣的即可，帮助简单了解编程的运行原理，了解学习编程是要做什么。）
0.2 前端后端怎么选：
《程序员选什么方向好?前端还是后端?》 作者：CodeSheep 视频地址：https://www.bilibili.com/video/BV1Z4411Z7 （作者在国内从事后端开发）
2.《程序员小姐姐: 前端, 后端, 全栈分别是做什么的? 》 作者：SchelleyYuki 视频地址：https://www.bilibili.com/video/BV1DV411B7v5 （作者在美从事全栈开发，关于前后端职责有简洁好懂的描述，此外还有对转码者的说的话，推荐大家都看一看。）
注：这部分内容的讨论都多多少少有一些主观因素，请结合个人情况选择。
0.3 学习路线图：
《前端学习路线分享》作者：objtube的卢克儿 视频地址：https://www.bilibili.com/video/BV1ZZ4y1H7rU?share_source=copy_web （技术学习内容是有时效性的，但前端的大致内容不会变，尤其是基础。这个视频比较详细的解释了前端学习的步骤，包括前端三件套，框架，打包工具等。）
《前端开发手册》文章地址：https://dwqs.gitbooks.io/frontenddevhandbook/content/learning.html （贴的链接是《前端开发手册》中的学习部分，里面列出的信息很多，猛然一看可能会一头雾水，初学者只需看看学习顺序，了解大概要学什么。）
CodeSheep的自学编程指南：https://www.r2coding.com/#/ （B站和公众号都有他的教学内容，因作者是后端程序员，前端涉及相对少，但还是推荐看看自学通用的东西）
1.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等多种格式下载，尤其适合做小程序）
iconfont: https://www.icofont.com/ (也是一个图标库)
在线颜色表：https://www.materialui.co/colors （直观取色，打开时小心眼睛）
2.HTML与CSS
慕课网免费课程 “HTML+CSS入门课” ：https://www.imooc.com/learn/9 （简单易懂的入门课，边学边做上手极快。）
CodeCademy的HTML课：https://www.codecademy.com/learn/learn-html （性质和慕课网一样，但我没用过，别人推荐的，和慕课网2选1即可）
CodeCademy的CSS课：https://www.codecademy.com/learn/learn-css （同上）
HTML Crash Course [2021] : https://www.youtube.com/watch?v=qz0aGYrrlhU (油管上的，虽然才1小时，但讲了很多知识点，有条件的建议抽时间看看，同时练习。)
less/sass/stylus ： https://less.bootcss.com/#%E6%A6%82%E8%A7%88 （可以任选一种，学一种，三种都会了工作中会用到）
书籍：《精通CSS3》（这本书其实很好懂，不要被标题吓到），《HTML5权威指南》+《CSS5权威指南》（放手上参考，不必急于通读）
总结：新手阶段这部分知识不需要面面俱到，大概有个了结，等做项目时用到一些不常用的，再搜就是。
3.JavaScript
以下基础部分三选一即可，其余内容可以用作补充：
- 慕课网的JS基础：https://www.imooc.com/learn/36 + https://www.imooc.com/learn/10 （两个课程内容都很浅显，快速掌握就好）
- 廖雪峰JavaScript教程：https://www.liaoxuefeng.com/wiki/1022910821149312 （不必全都学，只学自己不太理解的部分）
- CodeCademy的JS课：https://www.codecademy.com/learn/introduction-to-javascript
Learn JavaScript in 1 Hour：https://www.youtube.com/watch?v=W6NZfCO5SIk （也是油管的，非常直观的课程）
个人推荐书籍：《DOM编程艺术》，《JavaScript语言精粹》，《JS高级程序设计》，《你不知道的JS》，《ES6标准入门》（其中个人最喜欢的就是《你不知道的JS》，读来有种醍醐灌顶的感觉）
补充书籍： 《JavaScript设计模式与开发实际》（据程序员姊妹说有很多面试题），《JavaScript权威指南》（有名的犀牛书，可以当字典查）
总结：JS时前端学习的重中之重，一定要打好基础，后续框架学习会轻松很多。
4.Vue
官方文档：https://cn.vuejs.org/v2/guide/ （一定要看，官方文档很友好的，其实很多网课也就是看文档讲）
视频课：https://www.bilibili.com/video/BV15741177Eh (B站课很多，这只是我最喜欢的老师）
剖析 Vue.js 内部运行机制 ： https://juejin.im/book/5a36661851882538e2259c0f （可帮助理解用，但不是免费的）
5.小程序
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ （可以直接看这个上手）
视频课：https://www.bilibili.com/video/BV1Kt411V7rg （不必全听，有点慢了，可以听听不太懂的部分）
ColorUI组件库（这个直接小程序里搜索，做小程序可用）
6.浏览器
浏览器工作原理与实践 ： https://time.geekbang.org/column/intro/216 （非必须，小贵，当时搞活动入的）
浏览器证书原理： https://cjting.me/2016/09/05/build-a-https-site-from-scratch/ （很短，可以简单看看）
7.代码规范
CSS命名方法：https://segmentfault.com/a/1190000000391762
前端代码命名规范： https://juejin.cn/post/7026254525023420429 （请重点看下驼峰命名法）
VSCode变量命名转换插件： https://juejin.cn/post/7025606247189577741
ESLint规范化标准：https://eslint.bootcss.com/docs/rules/ （东西有点多，请学有余力再看）
注：入职后公司会有自己的代码规范，学习的时候简单了解就好。
8.博客搭建
1.Hexo+Github：https://godweiyang.com/2018/04/13/hexo-blog/ （不要买域名，0花费就能搭建博客，缺点是打开会慢点甚至有时候挂了？）
2.Vps+Hexo ：https://zhuanlan.zhihu.com/p/136234800 （有兴趣可以试试，学生机的话很便宜的，顺便练习下Linux操作。国内的服务器打开很快，缺点是麻烦，还要买域名、备案等等，事情很多就不多吐槽了，还有就是个人真的不建议长期使用这个，费用是一回事，域名信息太透明了也让人没有安全感。当然，你也可以不备案，然后把服务器ip地址写在简历上。）
3.能直接拿来用的博客：https://lemonchann.github.io/ （把作者的仓库下载下来改改就好了，专注内容生产，适合时间紧张的姐妹）
4.Hexo官网：https://hexo.io/zh-cn/index.html
5.Hexo主题推荐：https://juejin.cn/post/7053744641383874574/ （自己总结的，有的华丽，有的简洁）
9.面试求职相关
FE-Interview前端进阶之路:http://interview.poetries.top/ (有很多常用的面试题，以前用的时候还没有要求关注gzh)
前端面试集锦：https://fe.padding.me/#/questions/ （个人感觉排版要差一点，不过也可以看看）
如何写简历：https://www.cnblogs.com/figure9/p/lean-technical-resume.html （挺老一篇文章了，不过可以看看）
牛客网：https://www.nowcoder.com （刷笔试面试题）
总结：面试题多总结，有些题频率很高。大家不要把时间花在一些冷门偏门的题上，尽早开始投简历面试，自然会逐渐掌握常见题型。
10.程序员社区和博客
阮一峰的网络日志：http://www.ruanyifeng.com/blog/ （推一下他的科技周刊，真的很有趣）
问题社区StackOverFlow：https://stackoverflow.com （检索问题很有用，还有找工作板块哦）
掘金：https://juejin.cn （技术分享，有免费和付费作品）
V2EX：https://www.v2ex.com （程序员论坛，有内推信息，但是被墙以后活跃度就没那么高了）
11.编程中可能用到的工具
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版都有，简洁又免费，可以管理多个远程服务器）
FinalShell：http://www.hostbuf.com/t/988.html （算是ForkLift和Termius的结合，可以只下这个）
Charles：https://www.charlesproxy.com （抓包工具，可一直免费试用）
The Unarchiver：https://www.theunarchiver.com （Mac好用的解压软件不多，这个还不错）
Markdown 编辑阅读器: https://www.zybuluo.com/mdeditor (网页上的，可以边学边练习)
Markdown 教程： https://markdown.com.cn/
Markdown 编辑器Typora：https://typora.io （Windows和Mac都有，可以拿来写博客，注意在官网下载的话，老版本是免费的，新版本付费但更稳定）
图床工具 iPic：https://toolinbox.net/iPic/ （提到Markdown就不得不说配套的图床工具，上传即可用）
正则可视化工具Regexper：https://regexper.com （前期不懂没关系，用的时候再搜也不迟。）
正则检测工具Regexpal：https://www.regexpal.com （有常用的正则表达式范例）
360字体版权查看网站：http://fonts.safe.360.cn （可以看看自己拥有的字体是什么授权，独立开发作品注意图文版本）
12.其它编程相关网站
代码仓库Github：https://github.com
代码展示Codeopen:https://codepen.io/trending （非首页，展示了最近流行的网页，能学习or拿来主义）
参考教程MDN：https://developer.mozilla.org/en-US/docs/Learn （英文版较全，有些页面没翻译，有时间的姐妹可以试着自己翻译些页面。）
力扣：https://leetcode-cn.com/problemset/all/ （刷题用，这是题目页，不是首页）
Vim资料：https://vim-china.org （其实最常用的命令只有几个）
- 本文作者： Baili
- 本文链接： https://baili90.github.io/2022/01/16/2022-01-16-fornt_end_new/
- 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！