重生之我会如何学前端

HTML, CSS & JavaScript #

在学习前端前，需要了解一些基本的知识，比如 HTML、 CSS 和 JavaScript。我在学习这些基础时，总想着把 YouTube 上所有的教程看完，因为觉得这个教程好，那个教程也好，我如果不全都看完可能会错过一些什么。但问题是：

1. 这些教程有 80%相似的内容
2. 在看完了几个教程后，我发现我还是不会写网页

于是在这里犯了第一个错误：教程地狱（Tutorial Hell）。看教程只是学习编程的第一步，看了教程学了基础，应该试着做项目来巩固理解学过的东西，而不是不停地看一个又一个教程。

所以每个技术应该只选择一个教程并把它看完，我的选择是：

• HTML Full Course for free 🌎 (2023)
• CSS Full Course for free 🎨 (2023)
• JavaScript Full Course for free 🌐 (2023)

看完教程后，可以阅读一些完整的在线文档来查缺补漏：

• HTML - W3Schools - HTML Tutorial
• CSS - W3Schools - CSS Tutorial
• JavaScript - MDN JavaScript

但是要注意不要困于基础（Stuck In Basics），不要认为必须知道所有的基础概念后才能开始做项目。看完教程后就可以练习一些简单的项目了，阅读文档只是为了补足知识的缺漏。学习前端（或编程）应该花最少的时间看，花最多的时间做。

完成了这些基础的学习后，可以用一些游戏测试自己对知识的掌握程度：

• CSS
  • CSS Diner: 一个餐桌游戏，通过 CSS 选择器来选中不同的盘子或食物。
  • Flexbox Froggy: 练习 Flexbox 的不同属性值，让青蛙回到对应的荷叶上。
  • Grid Garden: 练习 Grid 的不同属性值，给胡萝卜浇水。
• JavaScript
  • JavaScript Quiz
  • JS Robot

一些项目的推荐：

• 50project50days: 每天做一个小的网呀项目一共 50 天，一共 50 个项目。比如拓展卡片，隐藏和展开搜索框等。
• JavaScript30
• HTML CSS JavaScript projects for beginners 2023 - 12 js projects with source code
• Learn JavaScript by Building 7 Games - Full Course
• Build 15 JavaScript Projects - Vanilla JavaScript Course

CSS Framework #

到了这个阶段时，我们会发现 CSS 代码非常冗长以及难以维护，所以我们需要CSS 框架来帮助开发，简化流程。现在流行的 CSS 框架有 Bootstrap 和 Tailwind CSS。但是用 Bootstrap 写的网站大多千篇一律，Tailwind 提供了更强大的定制能力，可以写出更自定义的网站，所以我会学习Tailwind CSS。

Tailwind 有完整的文档可供学习，但是我会先看完一个 1 小时内的 Tailwind 教程再开始看文档，这样的学习心智负担会更小。

• Tailwind CSS Tutorial
• Tailwind CSS Docs

学习 Tailwind，不需要记住所有东西，只需要对 Tailwind 有大概的了解，知道它是如何起作用的就够了。

学完 Tailwind 基础概念后，可以练习怎么用 Tailwind 做一个 Instagram Story：

• Rebuilding the Instagram Stories UI with Tailwind CSS

如果在做项目的过程中遇到了不懂或不熟悉的概念，就在 Tailwind 文档中找到它再看一次，Learn By Doing。

JavaScript Framework #

学完 Tailwind CSS 后，可以开始学习 JavaScript 框架。现在流行的 JavaScript 框架有 React, Vue, Angular。我选择学习React。

在学习 React 之前必须保证有坚实的 JavaScrip 基础，可以翻阅一遍 JavaScript Info再开始学习 React：

• React Tutorial for Beginners
• React Docs

Build Project #

在对 Tailwind 和 React 有了一定的理解后，可以用它们做一些网站克隆项目:

• React & Tailwind CSS Image Gallery
• 🔴 Let’s build LinkedIn with REACT.JS! (with Redux & Firebase)
• React JS Crash Course for Beginners - Build 4 Apps in 12 Hours (Redux, Firebase, Auth + More) [2023]

接下来可以试着用Next.js来做项目，Next.js 是进阶版 React。

• 🔴 Let’s build Facebook 2.0 with REACT.JS! (Next.js, Tailwind CSS, Image Uploading, Facebook Login)
• 🔴 Let’s build Hulu 2.0 with REACT.JS! (Next.js, Tailwind CSS, Responsive)

Portfolio #

学了这么多技术后，我们需要一个作品集网站来展示我们的作品，作品可以是：

1. 日常会使用的一些流行网站的克隆
2. 根据自己的生活需求创建的工具

谨慎地选择我们要做的项目，因为我们会回来为这些前端项目加上后端的功能。

Node.js, Express.js & MongoDB #

Node.js是可以在服务器上运行的 JavaScript 环境， Express.js是针对 Node.js 的框架。 MongoDB是数据库，用于存储网页上用户提供的数据。

• Node.js App From Scratch | Express, MongoDB & Google OAuth

因为我们从做项目中学习，如果在任何概念上卡住了，就善用搜索引擎。在工作中，任何程序员都不是所有概念都准备好了才开始做项目的。

Bring Frontend and Backend Together #

• 🔴 Build a Whatsapp Clone with MERN Stack (MongoDB, Express, React, Node JS)

做完这个项目后，就可以回到自己的 Portfolio 项目中，添加一些后端的功能。