🌟⚒️ 如何在 2024 年学习 Web 开发并更快找到工作（初学者指南及免费资源）

1. 问题——陷入教程地狱

我记得学习编程的时候，我从 Sololearn 和 YouTube 教程中学习了 Web 开发的基础知识，包括 HTML、CSS、JavaScript、PHP、SQL 和 WordPress。尽管如此，我还是很难用这些技能创建实际项目。我停滞了很长时间（差不多两年），只是学习编程，却在项目开发方面没有任何实质性的进展。我知道大多数初学者都会遇到这种困境（你学会了编程，但无法真正运用你的技能开发出有意义的东西）。在这种情况下，你很难从事自由职业项目，甚至很难找到工作，因为你的项目经验往往很薄弱。

2. 打破障碍

当我意识到适可而止时，我打破了这个障碍，开始着手实际的项目，比如用 HTML、CSS 和 JavaScript 从零开始编写一个作品集网站，或者用 PHP 和 SQL 创建一个博客网站。几个月后，我意识到自己在理解网络工作原理方面取得了巨大的进步。我还意识到，如果我在编程生涯早期就开始创建项目，我的学习进度可能会更快。

为了更快地突破障碍，你需要选择基于项目的学习路径。通过这种方式，你可以快速学习基础知识（例如参加速成课程），然后立即开始着手项目。当然，最初的几个项目会比较难，但绝对值得。你可以先按照教程开始你的第一个项目，但对于后续的相关项目，你可以尝试独立完成，遇到困难时可以借助谷歌的帮助。例如，如果你从教程中学习了如何使用 HTML 和 CSS 创建网站登录页面，那么在完成之后，可以尝试使用 HTML 和 CSS 自己创建一个设计略有不同的登录页面。Frontend Mentor（https://www.frontendmentor.io/）有很多免费的设计可供你尝试实现。

看看我是如何将登陆页面设计从头开始转换为像素完美的 HTM 和 CSS 网站的。

使用 HTML 和 CSS 构建完整的响应式网站 | Frontend Mentor - Fylo 深色主题登陆页面

创建落地页后，现在尝试在项目中添加一些 JavaScript 代码。例如，使用 JavaScript 打开和关闭侧边导航栏、使用 JavaScript 创建推荐/图片幻灯片、使用 JavaScript 添加倒计时器等等。

如果你能够在没有完整教程的情况下编写一个网站登录页面，并且能够在其中融入一些 JavaScript，那么恭喜你🎉，你已经突破了障碍。现在，你可以构思一个漂亮的作品集网站设计，并使用 HTML、CSS 和 JavaScript 从头开始​​编写代码。它不必完美无缺，但只要你完全独立完成，就能让你更熟练地掌握这些技术，并对自己的技能更有信心。

此时，您甚至可以开始寻找自由职业项目，将设计转换为 HTML 和 CSS 网站。

我知道仅凭 HTML 和 CSS 技能是有可能获得项目的，因为我以前就做过。以下是我最初只用 HTML 和 CSS 完成的一些项目。

3. 创建至少 3 个小型 JavaScript 项目

在这里，我假设你在开始构建项目之前已经学习过 JavaScript 基础知识。如果你对 JavaScript 一无所知，那么你可以从下面的速成课程开始学习。

Traversy Media 的《JavaScript 初学者速成课程》

熟悉 JavaScript 比熟悉 HTML 和 CSS 要难一些，所以我建议至少完成 3 个 JavaScript 项目。你可能需要更多项目才能不断进步，但 3 个左右的项目就能让你对 JavaScript 的本质以及如何操作 DOM 有一个大致的了解。

有些人可能会建议做数百个这样的小型 JavaScript 项目，但我认为这只会让你停滞不前，我们的方法是通过几个项目快速建立足够的技能，然后继续构建一个解决现实世界问题的大项目。

@florinpop17有一个关于 JavaScript 项目的视频，非常精彩。我建议你至少选择其中三个项目，并编写代码来练习 JavaScript。视频如下 👇

10 小时完成 10 个 JavaScript 项目 - 编码挑战🔥

4. 构建你的第一个全栈项目

在这里，您可以选择自己喜欢的框架，但如果您是初学者，决定使用哪些框架往往比较棘手。如果您不知道在全栈项目中使用什么，我建议您使用 MERN 堆栈或 Next.js（一个流行的 React 框架）。MERN 堆栈包含前端的 React.js 和后端的 Node.js。Next.js 可以在前端使用，后端使用 Node.js，但它也是一个全栈框架，这意味着您也可以使用 Next.js 编写后端代码。

在开始构建项目之前，你显然需要一些知识，因此我建议在开始项目之前参加一些速成课程。参加React、Node和 的速成课程express。Express 本质上是一个 Node.js 框架，它使 API 的创建更加容易。如果你决定使用 Next.js，那么你还需要参加 最新版本 的速成课程Next.js。目前，参加 Next.js 13 及以上版本的速成课程就可以了。

React 完整课程免费⚛️（2024）作者：Bro Code

30 分钟内学习 Node 基础知识！作者：codeSTACKr

Web Dev Simplified 的 35 分钟内学习 Express JS

我的 1 小时 Next.js 13 教程很不错。详情请见下方👇

速成课程旨在帮助您快速学习，它们通常不会涵盖有关语言或框架的所有内容，但它们肯定会为您提供足够的知识来入门。

至此，你应该已经熟悉 HTML、CSS、JavaScript、React、Node.js 和 Express。下一步是构建你的第一个全栈项目。在你的第一个全栈项目中，可以按照教程学习所有内容的工作原理。我亲自创建了一些免费课程，可以帮助你快速上手。

如果您决定使用 MERN Stack，我推荐以下课程。

实时聊天应用完整课程（免费🔥）- React，ContextAPI，Node.js 和 Socket.io

本课程将教你如何实现身份验证、执行 CRUD 操作以及如何实现用于实时消息传递和通知的 Web 套接字。它还将巩固你对 React 和 Node.js 的理解。

如果您决定使用 Next.js，可以使用以下课程之一构建您的第一个全栈项目。这些项目将帮助您进一步了解 React、Next.js、如何创建和使用 API、如何处理图像、如何在 Stripe 中处理付款等等。

构建和部署全栈酒店预订 Web 应用程序：Next.js 14、React.js、TS、TailwindCSS、Prisma

构建和部署全栈电子商务：Next.js 13、React.js、Typescript、Tailwind、Prisma、Stripe

4. 构建你的第二个全栈项目

在编写并完成你的第一个全栈项目后，现在是时候开始你的第二个全栈项目了。你将使用与第一个项目相同的技术栈。这将使你能够轻松上手并最终完成项目。

这个项目现在对你来说将是独一无二的。在这里，我建议你解决一个现实世界的问题。找出你身边的一个问题，并专门为此创建一个项目。例如，你附近的人们在买房或租房方面遇到了麻烦，所以你创建一个项目来简化这个过程。你的项目会将人们与可供出租或购买的房产联系起来。这只是一个例子，想法是无限的。只需想出一个好主意，记录你的想法（回答一些问题，例如这个项目试图解决什么问题，构建这个项目需要多长时间等等），然后实施它。这样做的原因是，我希望你的项目背后有一个故事，我也希望你的项目对你来说是独一无二的、令人兴奋的。而不仅仅是另一个应用程序的随机克隆。你甚至可以免费为现实世界的商业创建一个项目。

当你遇到困难时，可以使用谷歌、文档、博客文章，你仍然可以参考一些教程，但在创建这个项目时，尽量不要过度依赖教程。你可以回顾一下第一个项目中的内容，并研究如何添加额外的功能。你也可以使用 ChatGPT 来调试问题，但不要复制粘贴代码。基本上，学习如何进行研究，这是你成长并能够开展自己项目的方式。

现在，这类项目可以添加到你的简历中，算作一次实际经验，因为你不是简单地照着教程来构建它。你可以在简历中提供一些关于它的具体信息，比如你试图解决的问题、你在创建项目过程中遇到的挑战、你学到的东西、你能够解释你的代码等等。在面试中，你实际上可以谈论你过去的项目以及你对它的兴奋之情。如果足够好，你甚至可以将这个项目转化为实际项目，但主要目标是获得实际项目的实践经验。

这就是我擅长创建项目的原因。大学毕业时，我要求用代码解决实际问题。我认为这仍然是最好的方法。采用这种方法，你将能够快速学习一门技术，并能够在项目中使用它，而不会陷入教程的困境。以下是我的第一个项目。虽然设计或功能并非最佳，但它确实帮助我建立了对编码的信心。

（仅用于激励）我的最后一年 React 项目 - 项目进度管理系统 🔥

如果你成功完成了项目，并将其发布到网上，并附上易于分享的链接，那么你就可以开始申请工作和项目了。你可以尝试像 Upwork、Fiverr 这样的自由职业网站，或者在社交媒体上宣传你的技能。你甚至可以在博客文章上教别人，提高你的知名度。

5. 结论

记住，所有这些都需要时间才能完成。每天至少编程2小时，持续至少9个月。投入的时间越多，你就越快实现自己创建全栈项目的目标。坚持不懈，不要放弃。到2024年底，你会为自己学到的知识和取得的成就感到欣慰。

现在，当您寻找工作和可付费项目时，请记住继续提高您的技能。继续学习 JavaScript。继续构建项目。考虑学习Data Structure and Algorithms。大多数技术面试都很难，学习数据结构和算法可以帮助您通过技术面试。但是您仍然可以在一些公司中获得职位，而无需在数据结构和算法上花费大量时间，尤其是前端职位。这就是为什么我建议尽早开始申请并在面试时学习更多知识。划分您的一天。花 50% 的时间学习，另外 50% 的时间寻找工作或项目。在面试期间，记得展示并提及您的第二个项目作为您的编码经验的一部分（不要说您没有经验，记住您用代码解决了现实世界的问题）。

凭借你的全栈技能，你可以决定专注于前端还是后端。你也可以成为一名全栈开发者。通常情况下，你现在能够承担更大的项目，并凭借你的技能和经验获得更高的收入。

下面是我在不到两周内完成的一个项目示例，将其收入与我在 HTML 和 CSS 部分向您展示的项目进行比较，可以看到巨大的进步

这些是我对如何加快进度的一些想法。你很容易在教程地狱里困上好几年，但通过创建项目，你可以避免这种情况。希望这些对你有帮助。请在下面的评论区留言，分享你的看法。

帮助我快速实现我的 YouTube 频道 10 万订阅者的目标： https://www.youtube.com/c/chaoocharles

我在 X： https://twitter.com/ChaooCharles