历经 4 个月的编程、研究、学习和一再质疑自己能否成功之后，我终于上线了自已设计的第一个网站。
这一路走来并不容易，但最后看来都是值得的。
本帖将分享我从构建黑人卓越音乐项目（纪念为艺术做出卓越贡献的黑人艺术家）中学到了什么。
我有能力构建吗？
图片来自 Unsplash，摄影师 Tachina Lee
2020 年 6 月，围绕乔治·弗洛伊德之死，各类活动频发，种族冲突问题呈现出前所未有的紧张态势。这一局势引发了有关各行各业中缺少多样性、少数群体缺乏代表性的讨论。
很多朋友与我联系，问询历史上和当代黑人作曲家的有关信息，期望他们的作品能够更广为演奏或传唱。
也因如此，我当时决定制作黑人卓越 YouTube 系列节目，以向大众介绍取得成功的黑人作曲家。
这个系列节目随之爆火，也让我产生了一个新的想法。
为什么不建立一个名为黑人卓越音乐项目的网站呢？
它可以是一个教育性的网站，内容可以包括人物资料，游戏，音乐，等等。
但我面临一个大大的问题：谁会来创建这个网站呢？
当时的我刚学了几周的编程，我根本不相信自己有能力去做那样一个项目。因此，我决定把这件事放一放，先继续学习一阵再说。
现在做或者永远不做
图片来自 Unsplash，摄影师 Kekai AhSam
几个月过去了，我开始围绕这个项目想得愈来愈多。我想到了一些备选的游戏、一些专题作曲家，还有一些炫酷的网站功能。
但我还是在犹豫要不要开始做，因为我总觉得自己还没有准备好。我当时只是略懂 HTML 和 CSS，对 JavaScript 也只是有一些初步了解。
但我后来意识到，要么就现在做，要么就永远不做。
带着恐惧和犹豫，我决心开始着手这个项目。
你好，Git 和 GitHub
2020 年 6 月，决心想要学习如何编程的我第一次打开了自己的 GitHub 个人主页。但在那之后一直到开始这一项目前期间这几个月，我在上面几乎啥也没干过。
我对 GitHub 的模糊理解是，这是一个你可以保存自己的代码而且别人可以查看这些代码的地方。
因此我就想，是时候真真正正地学学 GitHub 并开始敲击命令行了。
看完一些教程之后，我成功创建了我的第一个 repository，并将我的第一个 commit 推送到了 GitHub。
心想自己已经入门了，我感到很自豪，但现在我面临着另一个难题。
下一步干什么呢？
只管 HTML
虽然我脑子里有各种想法，但对于该从什么做起我却丝毫没有头绪。
我要先做一些游戏吗？
我要建立设计的模型吗？
很快，一切把我搞得焦头烂额，我真的不知道下一步该干点啥。就这样，我决定从一个简单的 HTML 页面开始做起，然后再向后面推进。
我想到，我可以先构建一些 HTML 网页来放作曲家的介绍，至于如何装饰这些页面，可以到后面再去考虑。
这样一来，我就安下了心，为项目开了个好头。
选择恰当的配色方案
我当时想选一个和主题比较搭的配色方案，就是那种表面很沉静但背后却又很有力量的配色。
经过一番研究，我敲定了紫色，紫色往往同王室和智慧相关联。
我想，就那些对艺术做出了重大贡献的黑人作曲家来说，这应该是个完美的选择。
我该如何创建游戏呢？
走到这一步，我手里有几张 HTML 网页和一些简单的网页装饰，现在是时候开始码一些游戏了。
我在想，如果能设计一些老少皆爱的游戏将是不错的选择。
我首先对游戏的运行做了一个整体规划，接着便开始一个一个去实现那些功能。
我做了很多研究，也犯了很多错，但最后还是做成了。
// this is for the tour and local gig functions
function performanceOutcomes() {
shuffle(gigResponses);
if (randomMsg === 'You were late to the gig and not allowed to perform.' || randomMsg === 'You were mugged outside after the gig and they took all of your money.') {
message.innerHTML = randomMsg;
money += 0;
earnings.innerHTML = `Total earnings: $ ${money}`;
} else {
message.innerHTML = randomMsg;
money += 5;
earnings.innerHTML = `Total earnings: $ ${money}`;
}
}
完成游戏的制作后，我决定“打扫一下卫生。”
我该怎么组织这一切呢？
网站上有很多需要移动的内容，所以我在管理这些文件时要动点脑筋。
为描述性文件和文件夹命名时，我专门留意选择一些简短的名称，以便可以轻松找到它们。
也有几次，我不得不将一些文件重新移动到不同的文件夹中。
例如，起初，我把作曲家知识测验放在了单个作曲家的文件夹中。但后来我意识到，最好专门建立一个名为“知识测验”的文件夹，并将所有测验文件保存在其中。
我还遇到了多个样式表的问题。由于我重复使用了许多相同的样式，因此建立一个主样式表然后将其链接到所有 HTML 页面会比较合适。
你能不能看到我的项目？
图片来自 Unsplash，摄影师 heylagostechie
到 2021 年 1 月底，我的网站终于可以供其他人查看了。
我便决定联系 Nicholas Carrigan，他是来自 freeCodeCamp 的开发人员兼社区管理员。他在 他的网站上提供了代码审查服务，我希望他能看看我的代码。
代码审查非常有价值，我学到了很多有关如何把我的网站做得更好的知识。
上线噩梦
图片来自 Unsplash，摄影师 Dev Asangbam
终于做好一切准备后，我决定上线我的网站。我用 Bluehost 注册了一个自定义的域名，然后阅读了如何将 GitHub 网页设置为实时站点的有关说明。
凌晨 4 点，我终于上线了网站。
但当我单击上线链接时，我被眼前的一切吓到了。
没有导航栏，没有脚注，没有层叠样式表。
这到底是怎么回事？我在本地测试的时候一切都没问题呀。
经过几小时的修护和研究，我最后选择向他人求助。我给 Nicholas 发了信息，向他说明了这个问题。
他看看我的代码解释说，我的文件路径有点问题，并告诉我如何去解决。
听到问题有办法解决，我如释重负，这才静下心来去做各种必要的修改。
<script src="landing-page-nav.js"></script>
<script src="landing-page-footer.js"></script>
<script src="index.js"></script>
终于，我做好了准备，把网站分享在了 freeCodeCamp 论坛 中，以寻求反馈。
这是一个好的开始，但请解决这个问题
在接下来的几天，我收到了很多关于如何改良网站的评论。
起初，我都是自己处理这些评论，还真有些应接不暇。
我还幻想，也许在某个虚幻的世界，人人都会喜欢我的网站，并觉得它是完美无瑕的。
但实际上，很多人给我指出了一些 bug，还有一些设计上的问题，这些问题让用户体验起来会感到有些无厘头。
我知道自己的强项并不在设计，或许这也是我想独自处理设计这块的原因。但我发现，有很多人在帮助我，而且他们的建议的确让网站看起来更好看了。
对新手的建议
图片来自 Unsplash，摄影师 Tudor Baciu
通过构建这个项目，我学到了很多。当然，这个过程中我遇到过顺利的时候，也遇到过糟心的时候。但最后的结果还是让我很开心的。
如果你也有做一个项目的想法，不要等着自己万事俱备了才动手。按自己知道的最好的方式去构建它，并将其上线。即使它并不完美或是仍需润色，也完全没有任何问题。
只要持续做和学就够了。
原文：What I Learned from Building My First Solo Project，作者：Jessica Wilkins