前端资源分享——学习篇

前端资源分享——学习篇📚︎

学习前端最开始是从b站看视频，入门之后，发现了前端社区，关注了不少优秀作者，学习到了很多东西。总之，很感谢在前端社区一直默默奉献的Coders。

在此，对学习前端过程中看过的一些不错的书籍和在线学习资源分享一下。

一、CSS

1. 书籍

• 《css世界》与《css新世界》

• 《css揭秘》

• 《精通css》

2. 在线资源

付费

既然在掘金，那就必须分享一下掘金小册了（真的很不错）

• CSS 技术揭秘与实战通关 - Chokcoco - 掘金小册 (juejin.cn)

• 现代 CSS - 大漠_w3cpluscom - 掘金小册 (juejin.cn)

• 现代 Web 布局 - 大漠_w3cpluscom - 掘金小册 (juejin.cn)

免费

• MDN

  自不必多说，查就完了

• What is this? - 100 Days CSS Challenge

  看你能否完成100个css挑战，实现这些绝妙的css效果

• CodePen

  可以在线编辑代码，并且可以看看其他人使用css和js可以实现哪些效果

• 3731 UI elements: CSS & Tailwind (uiverse.io)

  和codepen类似，不过不能使用js，主要包含了button、CheckBoxes、Cards、Loaders、Inputs等案例的分享。

二、Javascript与TypeScript

1. 书籍

• 《JavaScript高级程序设计》（红宝书）
• 《ES6 标准入门》
• 《你不知道的JavaScript》

2. 在线资源

• TypeScript 教程 - 网道 (wangdoc.com)
• MDN
• 现代 JavaScript 教程

三、浏览器 & 网络协议

1. 书籍

• 《图解 HTTP》

2. 在线资源

付费

• 浏览器工作原理与实践 -极客时间

四、前端工程化

1. 书籍

• 《深入浅出Vue.js》
• 《Vue.js设计与实现》
• 《重构 改善既有代码的设计》

2. 在线资源

付费

深入浅出 Vite - 神三元 - 掘金小册 (juejin.cn)

免费

• Vue.js 挑战 | 一个 Vue.js 在线挑战平台 (cn-vuejs-challenges.netlify.app)

五、算法、数据结构及设计模式

1. 书籍

• 《大话数据结构》
• 《剑指Offer数据结构与算法名企面试题精讲》
• 《JavaScript设计模式与开发实战》

2. 在线资源

付费

• JavaScript 设计模式核心原理与应用实践 - 修言 - 掘金小册 (juejin.cn)

免费

• 力扣（LeetCode

• Hello 算法 (hello-algo.com)

  动画图解、一键运行的数据结构与算法教程

• Patterns.dev

  在线学习设计模式

• 图解算法数据结构 - LeetBook

  Hello算法作者又一力作

五、必备技能（正则、Git）

1. 书籍

• 《Pro Git 》

2. 在线资源

• Learn Git Branching

  以闯关游戏的方式来学Git命令

• Regex Learn - 正则表达式交互式课程