10+ 个免费且实惠的前端 Web 开发学习资源

各位 Codenewbies 大家好👋，

说到学习，你是哪种类型的？
你喜欢阅读、看教程，还是两者兼而有之？
我是两者兼而有之，但更偏向于视听。通过观看教程、边写代码边学习，我可以吸收更多信息。

在这篇文章中，我将分享一些推荐的编程学习资源，特别是前端开发学习资源。
这些资源的排名不分先后。
附言：点击链接即可访问网站。

📺 观看并学习

Udemy

Udemy 是一个付费在线学习平台。它经常推出 9.99 美元起的课程优惠。
如果课程不适合您，您可以在购买后 30 天内退款。
完成课程后，您将获得结业证书。

在 Udemy 上选择课程的提示：

• 花时间浏览课程。观看你感兴趣的课程预览，了解老师的教学风格。
• 看看这门课程的选课人数、课程评分以及授课老师。这些都能反映出这门课程的质量。

Udemy 上有很多优秀的讲师，但我最喜欢的是Colt Steele、Andrew Mead、Angela Yu和Andrei Neagoie。

YouTube

你可以在 YouTube 上找到很多教程和速成课程，尤其适合想要快速掌握某个主题的人。
我关注的一些前端开发者频道包括：
Traversy Media、Web Dev Simplified、The Net Ninja、Dev Ed、Kevin Powell和Code with Ania Kubów。

观看并编码

Watch And Code 是 Gordon Zhu 的课程。入门课程“编程基础”是免费的。Gordon
通过构建一个待办事项列表应用，精彩地带你了解编程和 JavaScript 的基础知识。
我个人只参加了入门课程，但从中受益匪浅。

之后，如果你愿意，可以通过入学考试后订阅其高级版本。

CSS网格

Wes Bos 的这个免费课程将通过 25 个教程视频指导您学习 CSS 网格。

JavaScript30

Javascript30 是 Wes Bos 的另一门免费课程。在本课程中，他将指导你用 30 天的时间用原生 JavaScript 构建 30 个项目。

📚 让我们一起阅读

MDN Web 文档

它是所有 Web 开发人员的首选资源。

CSS技巧

它提供与 CSS 和前端开发相关的文章、指南等。

Javascript信息

Javascript Info 是现代 Javascript 教程的开源。

前端导师

您是否想建立一个项目但没有任何想法？

Frontend Mentor 提供 30 多个免费项目挑战，供您从零开始构建。
挑战要求您构建的项目尽可能接近所提供的设计。
您可以使用框架或原生 CSS 和 JavaScript 来完成挑战。选择权在您手中。

使用高级版本，您可以解锁更多挑战和功能。

⌨ 互动式和游戏式学习

免费CodeCamp

freeCodeCamp 是一个免费的编程学习平台。
教程内容为阅读材料，并配备文本编辑器供您编写和运行代码。
每门课程结束后，您都可以通过完成五个必修项目获得证书。

要观看教程，您还可以订阅其 YouTube 频道。

斯克林巴

Scrimba 是一个在线前端开发学习平台。
该平台的独特之处在于其交互式编程学习工具。它允许你在课程中与讲师一起编程。
平台提供30 多门免费课程。
如果你选择“前端开发者职业之路”（付费版），还可以访问 Scrimba 的所有专业课程。

弹性盒青蛙

你喜欢游戏吗？或者，你对 CSS 中 Flexbox 的工作原理感到困惑吗？
那么你应该尝试一下 Flexbox Froggy。
这是一款免费的基于游戏的 Flexbox 学习教程。
你将通过编写正确的 Flexbox 语法，将青蛙移动到它们应该去的地方。

弹性框僵尸

Flexbox Zombies 是 Dave Geddes 的另一个免费游戏式教程，旨在帮助您学习 Flexbox。
在本教程中，您将使用正确的 Flexbox 语法引导僵尸猎人攻击僵尸。
更有趣的是，它还配有音效！

最后的话

你还有其他使用过并推荐的免费（或实惠）资源吗？
可以在下方评论区留言😊

感谢阅读！
最后，你也可以在Twitter上找到我，让我们一起交流吧！😄