10 个绝佳的 Web 开发学习项目创意

学习 Web 开发的最佳方法是找到一个能让你不断进步的项目。Tony Mastrorio 写了一篇很棒的文章，教你如何摆脱“教程炼狱”。他在文章里说的每句话都切中要害。

……如果你只是为了学习而学习，而不是为了完成你正在进行的大型项目，那么你学到的东西可能比你想象的要少得多。

托尼·马斯特罗里奥

教程有什么问题？

教程简洁明了，条理清晰。如果你找到一个好的教程，一切都会按部就班地进行。它们就像一条温暖的毯子，让人倍感舒适。你知道只要按照步骤来，就能轻松完成。但这并非网页开发的现实。它纷繁复杂，你必须做出妥协，舍弃一些功能，甚至需要想方设法才能完成。没有哪个客户会给你一步一步的指导，告诉你如何完成他们的任务。如果他们能做到，他们就不需要你了。教程让你感觉自己正在取得进步，但实际上，你并没有学到大多数在实际工作中会用到的技能。项目则截然不同。它们的定义比较宽泛。没有人做过和你完全相同的事情，所以没有现成的脚本。一旦你通过书籍和教程掌握了基础知识，就该真正动手实践，开始一个项目了。

哪些类型的项目效果最佳？

最好的项目创意往往能解决你自身的问题（比如，我总是叫不醒，我需要更好的办法），或者满足你自身的愿望（比如，我想找个地方和其他收集电子游戏攻略的人一起玩）。有时候，你可能想着手一个让你灵感迸发的想法，但却还不确定具体是什么。这份清单能帮你激发创意。

10 个绝妙的项目创意

把这些看作是写作提示。借鉴这些想法，尽情发挥创意，创造出属于你自己的精彩作品。如果你真的想，当然可以按照这里的描述来创作，但那样你就偏离了重点。你的作品应该是独一无二的。

股票情况如何

一个只收录奇特或独特照片的图片网站。哭泣的小丑、废弃的商场、巨大的藤椅……诸如此类。

促销俱乐部

这是一个社交网络，用户可以在这里提交自己创作的内容，例如撰写的文章、发布的产品或 YouTube 视频。你可以浏览列表，并在自己的社交媒体账号上推广喜欢的内容。推广他人内容越多，你的帖子在网站上的排名就越高。

探索迷雾

一款游戏化的GPS探索应用。你会看到一张真实世界的地图，但大部分区域都被迷雾笼罩。（游戏玩家会认出这是即时战略游戏中常见的“战争迷雾”，在你探索某个区域之前，迷雾就会显现。）随着你在现实世界中的探索，地图会逐渐显现。用户可以定义一个区域，并查看自己已探索该区域的百分比。

留言板阅读器

有人用过 Pinboard 吗？它是一款很棒的社交书签应用，在 del.icio.us 关闭后接手了它的业务。它有个很酷的“待读”功能，你可以收藏文章并标记稍后阅读。Pinboard Reader 是一款类似 Instapaper/Pocket 的应用，它接入了 Pinboard 的 API。

错综复杂的网

这是一个博客平台，可以自动链接用户发布的文章。它会匹配文章中常见的词语和短语，优先匹配较长的词语。例如，如果这段项目描述是该平台上的一篇文章，那么“博客平台”这个词组可能会自动链接到另一位用户在2018年热门博客平台上发布的文章。链接会随时间变化。

家族

好吧，这些名字并非个个都妙极了。😉 你用过Miitomo吗？就是任天堂的社交网络？我很​​喜欢它用提示来激发朋友间互动的方式。The Fam也为家庭用户提供了类似的功能，通过巧妙而有趣的提示，促进家庭成员之间的沟通、了解彼此，并增进感情。

永恒

这是一个只允许每个用户每年发帖一次的社交网络。最好把它做好！

笔记日志

一款笔记应用，每条笔记可以包含多个条目。用户启动应用后，选择一条笔记，即可自动为该笔记添加一条新条目，并自动标记当前日期、时间和地点。条目可以根据这些元数据进行排序和筛选。非常适合解决复杂问题和追踪工作记录。

退出策略

这是一种会在用户准备离开页面时弹出模态框的小部件或插件。（你可能以前见过这种东西。当你即将关闭页面时，会弹出一个模态框，提供某种“最终优惠”来挽留你。）它的特别之处在于，模态框的内容可以根据用户在页面上停留的时间进行自定义。

无路可退

一款专为创业者打造的每日“锻炼”应用。它并非鼓励用户进行体能训练，而是引导他们每天完成一项活动，走出舒适区。这有助于培养创业者所需的冒险精神，并消除他们对被拒绝的恐惧。

我唯一的要求是，如果你开发出了这样的产品，请分享给我。我想成为你的早期用户之一。😜

我原以为这些是用于网页开发练习的。有些项目的描述里就直接写着“应用”。

“App”可以指网页应用，也可以指移动应用。即使是开发移动应用，你仍然可以使用与开发网页应用相同的技术。不妨了解一下React Native。

这些看起来很难。我觉得我知识不足，做不了。

有些比其他的更难。股票交易可能是列表中最简单的一项。

也就是说，选择个人项目的意义在于选择一些超越你当前技能水平的项目。这才是学习的动力。现在，你不再学习别人推荐你学的东西，也不再学习 Hacker News 上讨论最多的框架，而是学习那些能让你更接近个人项目目标的知识。

当你找到自己的项目后，先从你已有的知识能够完成的部分开始。一旦遇到障碍——也就是你目前还无法完成的部分——那就接下来学习这部分内容。

如果我知道该从哪里开始……

没有什么

现在，完全可以读一些书或者做一些教程。先去了解一下HTML和CSS的基础知识。学完之后再回到这里，开始做项目吧。

如果你喜欢互动式教程，Codecademy 的“学习 HTML”和“学习 CSS”课程相当不错。（免费课程就足够了，没必要花钱买专业版。）如果你更喜欢书籍，那么《Head First HTML & CSS》是个不错的选择。

HTML 和 CSS

只需掌握 HTML 和 CSS 知识，您就可以为这些项目构建用户界面。

以下这些项目，你只需掌握这些知识就能最接近完成：

• What the Stock – 你可以用 HTML 和 CSS 将其编写成一个静态网站，尽管图片付费可能比较困难。
• 大胆尝试——将其构建成一个简单的 HTML 网站，其中包含一系列练习。

前端 Javascript

如果你已经学习了前端 JavaScript，现在就可以开始添加一些交互元素了。

您也可以保存数据，但数据会保存在用户的浏览器中。这意味着，使用该浏览器的每个用户都会看到相同的数据。如果您以这种方式构建笔记日志，而我尝试在您的计算机上使用它，我将看到您的笔记而不是我的。我的笔记会保存在我自己电脑上的浏览器中。

到了这个阶段，你几乎可以完成所有这些项目。对于那些需要后端支持的项目，你可以使用像Firebase这样的后端即服务 (BaaS) 。

如果你懂HTML、CSS和Javascript，这些项目对你来说就是大获成功：

• Pinboard 阅读器– 由于它将使用Pinboard 的 API，因此即使您不知道如何构建后端也无关紧要。
• 笔记日志——只需少量 JavaScript 代码，您就可以创建一个仅在浏览器中保存笔记的版本，或者使用后端服务将笔记保存到服务器端。
• 另辟蹊径——现在，你可以随机展示练习内容，或者每天展示一个特定的练习。

React/React Native

掌握 React 后，您就可以通过 React Native 进行移动应用开发。现在正是尝试Fog of Explore 的好时机。

后端

后端允许你将数据保存到数据库中。社交网络和其他网络应用正是利用这一点，让你的设置和内容能够跟随你在该网站上的用户帐户而变化。如果你在任何一台电脑上登录 Facebook，你的好友列表始终不变。但如果其他人用你的电脑登录 Facebook，他们看到的将是他们的好友，而不是你的。数据库让这一切成为可能。

将网站所有数据集中存储在一个地方，就能向用户展示其他用户创建的内容。Facebook 就是这样向你展示好友发布的帖子。如果没有一个集中存储帖子的地方，Facebook 就无法做到这一点。

后端还允许你在服务器端而不是用户浏览器中进行计算。一旦你掌握了后端开发，你就能胜任任何这类项目，并且做得很好。

项目遇到困难时如何保持动力

项目对于保持学习过程中的高昂动力大有裨益，但我认为你还需要一些外部动力来推动你前进。一个引人入胜的人生目标，能在学习遇到困难时为你重燃斗志。

我制作了一个非常简短的电子邮件课程，教你如何找到你的远大目标，它能助你一臂之力。当你遇到困难时，它将是无比宝贵的工具。我今天取得的大部分成功都归功于它。