经过一年的自学，我如何在两周内找到了一份初级前端开发的工作

大家好，我是 Ulyana，一位自学成才的前端开发者，正在从房地产分析师转行到科技行业。2020 年 8 月，我仅面试了两周就收到了录用通知。在 Twitter #100DaysOfCode 社区分享了这个好消息后，很多人问我学习的过程，所以我决定写一篇帖子来分享一下。

读这篇文章时，请不要试图把我和你比较，我这样做的唯一目的是分享我使用的资源，描述我的学习习惯，并讲述我的故事，或许能给你一些启发。我拥有一个难得的机会，一年多的时间不用工作，可以尽情地学习。此外，就业市场因地而异。我住在莫斯科，那里的市场发展迅速，竞争也相对缓和，即使是新移民也能获得很多就业机会。所以我相信，能够在这么短的时间内找到工作，与其说是技能和知识的功劳，不如说是市场因素的功劳。

我是如何开始的？

2018年，我因为丈夫的工作原因搬到了中国。我不得不辞去莫斯科房地产分析师的工作，在深圳当起了家庭主妇。大学毕业后，我已经连续工作了八年，从未有机会重新思考自己的职业道路。突然间，我有了大把的空闲时间，开始考虑不同的选择。

2019年春天，我回莫斯科和家人待了一段时间，妈妈告诉我她正在开设一个关于个人理财和投资的在线课程。回到中国后，我心想，既然连我妈妈都在开设在线课程，为什么我还对在线教育如此怀疑呢？我之前一直在考虑科技行业，但不知道该如何入手，也不知道应该学什么编程语言。

幸运的是，我记得前段时间我收藏了一篇关于如何从零开始成为 Web 开发者的文章。我已经读过好几遍了。我喜欢它提供了一个循序渐进的 5 个月计划，并且还有免费的在线资源！我内心深处突然灵光一闪，决定尝试一下。感谢 Andrei Neagoie 分享这份路线图。真的！它改变了我的人生！说实话，我花了 10 个月才完成这个计划。

深度工作

基本上，在我决定学习Web开发的同时，我也读完了卡尔·纽波特（Cal Newport）的一本很棒的书《深度工作》（Deep Work）。我强烈推荐这本书给大家，因为它让我重新思考自己的工作方式，让我更加重视自己在任务上花费的时间，以及自己的专注程度。

根据纽波特的定义，深度工作是指：

“在不受干扰的专注状态下进行的专业活动，能够将你的认知能力推向极限。这些努力能够创造新的价值，提升你的技能，并且难以复制。”

读完这本书后，我开始做的最实际的事情是提前规划深度工作的时间并跟踪我花在学习和项目上的时间。

为了安排好我的一天，我开始把时间分成几个时间段，并在前一天计划好每个时间段要花多少小时。这看起来挺吓人的，我现在已经不这么做了，但一开始，它帮助我养成了花足够时间学习的习惯。

另一个对我有帮助的方法是通过比较几周的工作时间并标记已达成的成就来追踪深度工作时间，从而评估我的工作效率。我使用了一个简单的 Excel 表格，但其他任何便捷的方法也同样适用。我会用不同的颜色标记在不同任务上花费的时间，例如项目、FreeCodeCamp、教程等等。

5个月的计划变成了10个月的计划

所以从2019年5月开始，我开始遵循Andrei Neagoie的5个月指南。所有资源都可以在2020年更新版中找到。在这篇文章中，我想重点介绍对我来说最重要的事情。

每个月初，我都会浏览所有提供的资料，并试着估算完成每项任务大概需要的时间。正如你所见，我非常喜欢Excel表格，所以我又做了一个:) 完成每个教程后，我都会使用时间追踪器来记录我实际花费的时间。它帮助我把大目标分解成小部分，规划下个月，直观地记录我已经学到的内容，最重要的是，它能让我为取得的小成果感到满足。

基础知识

第一个月的课程重点学习了互联网的工作原理、HTML 和 CSS，以及计算机科学基础知识。对我来说，最精彩的部分是：

• 哈佛大学的CS50 计算机科学导论。Andrei 推荐 2017 年版，并且只听讲座，我听从了他的建议，但现在正在考虑在 EdX 上学习完整的课程。
• 当我开始时，我只了解一点 HTML，通过Dani Krossing 的这门课程，我了解了 HTML 和 CSS 如何协同工作，甚至建立了我的作品集的第一个版本。

JavaScript

从第二个月开始，真正的乐趣才真正开始：我开始学习 JavaScript！学校计算机课上的一些记忆立刻涌上心头，我回想起小时候学习 Visual Basic 和 Pascal 的情景（是的，我已经那么老了）。

这个月的主要资源是https://javascript.info/。我花了大约两个月的时间读完整个教程并解决了所有挑战。它对这门语言的解释相当深入，构成了我对它理解的基础。即使是第一次阅读，我也几乎理解了一半的理论。我仍然会回顾它，并且将来肯定会复习一些概念。我知道手写笔记并不适合所有人，但它确实帮助我理解、组织和记忆信息，而且我仍然每天都在使用这些笔记。

本教程分为两部分：JavaScript 语言和浏览器：文档、事件和接口。我已经读完了这两部分，强烈建议大家也读一遍。有些部分会比较难，有些部分则容易一些，但不要在难以理解的部分上花费太多时间，先理清头绪，然后继续学习。我尝试在每一章结束后解答所有挑战，其中一些挑战比较难，所以我查看了答案，并尝试第二天自己再解答一遍。

更多 JavaScript

在 2019 年版的 5 个月计划中，Andrei 推荐了他自己开发的 Udemy 课程《JavaScript：高级概念》。2020 年版中他删除了这门课程，可能是因为现在深入研究 JavaScript 的难点还为时过早，也可能是因为这是整个计划中唯一的付费课程。但我还是参加了，而且真的很享受，它帮助我理解了事件循环、闭包、类型强制转换、提升、this 关键字以及函数式编程与面向对象编程的比较。

此时，我决定将FreeCodeCamp课程纳入我的学习流程。我从 JavaScript 算法和数据结构入手。在阅读了整个 javascript.info 之后，我只花了 50 个小时（而不是宣称的 300 个小时）就完成了算法部分的任务和最终的 5 个项目。如果你正在学习 FreeCodeCamp 算法但遇到困难，我强烈建议你找一个适合你的深入学习字符串和数组方法的教程，读完之后尝试将新学到的知识运用到 FreeCodeCamp 的挑战中。

到 2019 年底，我对 JavaScript 的功能有了一定程度的了解。我能够解决基本的字符串和数组问题。我知道如何用 HTML 和 CSS 制作网页，但不确定如何在构建项目中运用所有这些知识，即使是非常小的项目。我知道 DOM 操作，但它感觉非常复杂且不直观。如果你关注任何 JS 教程制作者、影响者或励志演说家，他们都会告诉你，你应该“逃离教程地狱，开始做项目”。我完全迷失了方向，开始只用 React 自己做一些东西。别学我！我还没有这样做，但计划参加Wes Bos 的#JavaScript30挑战，以提高我的原生 JS 技能。

反应

2020 年初发生了几件非常重要的事情：我开始学习 React，开始了#100DaysofCode 推特挑战，并且 1 月底新冠疫情袭击了中国。

接下来的一大块是关于 React 的。设置开发环境对我来说有点费劲，这部分的所有课程都无法提供循序渐进的指导，Mosh Hamedani 的这个React YouTube 初学者教程给了我很大的帮助。之后，我在 Scrimba 上发现了 Bob Ziroll 写的很棒的初学者指南。完成这个教程后，我开始觉得我可以自己动手做一些东西，而不仅仅是照着教程做。那种感觉太棒了，我认为这是对老师才华的最好证明。感谢 Bob 的付出。后来我发现这个教程包含在 2020 年更新的 5 个月计划版本中。

于是我开始用一个小项目来练习 useEffect hook，我说的小是真的小！这个颜色应用渲染了四个相同的组件，并带有一个随机颜色的圆圈，然后计算其背景的补色。第一次在线部署东西的体验是难以忘怀的，我还记得当时用来告诉 Twitter我完成了第一个 GitHub 页面部署的动图 :D

我强烈建议的另一件事是，当你发现#100DaysofCode时就尽早开始。如果你从未听说过，每天至少写一小时代码并每天在推特上分享你的进步，这是一个挑战。我是在开始学习React时才开始这个挑战的，那时我已经写了六个月的代码，每天写三个多小时，但我感到非常孤独，只能向我的丈夫讲述我的挣扎和小小的胜利！非常感谢他倾听我并一直支持我！但是，拥有一个和你学习同样的东西并且可能面临同样问题的社区对我来说是一个改变游戏规则的机会。Twitter#100DaysofCode社区对我来说是灵感和动力的重要来源，对你来说也可能如此！

这时，我们开始从武汉收到关于“新型病毒”的可怕消息。通常这个时候，深圳几乎所有地方都会因为春节而关闭，但今年的封锁不仅持续了几天，而是持续了一个多月。虽然没有正式的封锁，但每个人都尽可能地待在家里。所以这对我来说是一个专注于学习的好机会，但我坚信，如果我到那时还没有养成学习的习惯，面对着层出不穷的坏消息和不确定的情绪，很难集中精力去做一些有意义的事情。我努力保持专注和积极的态度，编程给了我很大的帮助。

下一个项目是一个随机食谱生成器，我用它来练习如何从 API 获取数据。它的灵感来自Florin Pop 的“100 天 - 100 个项目”挑战之一。如果你需要一个项目灵感，我推荐你看看这个列表。后来我添加了一些额外的功能。你可以在这里查看食谱生成器的最终版本。

学习完 React 的基础知识后，我决定再次参加 freeCodeCamp 的课程，很快拿到了第一个响应式 Web 设计证书，并进入了前端库的学习。复习完 React 的概念后，我开始构建项目。要获得这个证书，你必须完成 5 个项目并通过所有自动测试。对我来说，计算器和番茄钟是最难的，而构建鼓机则是我最喜欢的。

后端

程序的最后一部分涵盖了一些后端知识，我学习了如何构建 RESTful API 以及如何使用 MongoDB 和 Firebase。为了顺利完成，我还学习了一些其他教程，例如Dev Ed 的教程和Nick Karnik 的教程。

我有一个想法，想在食谱生成器项目中添加身份验证功能，以便用户将食谱添加到收藏夹。为了了解如何添加 Firebase 身份验证，我学习了 The Net Ninja 的这篇很棒的教程。从那时起，我学习的教程主要针对具体的项目构想和功能。

升级 Recipe Generator 后，我回到了 freeCodeCamp 并获得了 API 和微服务认证。

到2020年3月，我已经用10个月的时间完成了一个为期5个月的计划，增加了4个freeCodeCamp证书、额外的教程、几个小项目，以及2个相对可以添加到我的作品集的大型项目。说实话，在没有更多指导的情况下，我感到非常迷茫，所以决定自己制定一个严格的未来学习计划。

面试准备、大型项目构想和作品集

我学习前端的主要原因是为了找工作。起初，我计划找一份远程工作，后来我们决定回俄罗斯，我知道到夏天我应该就能准备好面试了。

我在莫斯科寻找初级开发人员的职位，但非常沮丧，他们期望我掌握的知识量大得令人难以置信。我开始列出一些出现频率较高的内容，例如数据结构、BEM 类表示法、Sass 和 Less 等 CSS 预处理器、CSS 动画/GSAP、Redux、TypeScript、Webpack，以及 Figma 或 Sketch 等设计工具。我把这些内容分成几个部分，并尝试制定计划，以便学习所有这些内容：

• 数据结构和算法，
• 技术面试问题，
• 设计和 CSS
• 文件夹，
• 高级 React

数据结构和算法

我决定开始阅读 Gayle Laakmann McDowell 的《Cracking Coding Interview》这本书，了解数据结构和算法。这本书提供的理论非常有限，但提供了大量的挑战和解决方案。我能够理解数组和字符串、链表、堆栈和队列的前几章，但对树和图完全一头雾水，所以决定以后再回头研究。我创建了一个GitHub 仓库，里面存放着我的任务和解决方案，如果你也在做这些挑战，可以看看。

虽然我觉得自己选了最难的那条路，但这本书适合经验丰富的开发者，或者至少适合那些接受过正规计算机科学教育的人。而且，它用的是 Java 语言，所以我必须弄清楚如何用 JS 实现这些示例。或许最好从一门算法和数据结构的 JavaScript 课程开始，Udemy 上有很多这类课程。

练习算法的另一个好方法是使用像Codewars这样的平台，将游戏化融入学习过程。我现在已经 5 级了，挑战对我来说已经非常难了。掌握算法和数据结构是我现在的首要任务之一。

技术面试问题

我的主要资源是这个热门的 GitHub 仓库，里面有关于 HTML、CSS、JS 和其他主题的面试题。我制作了一个简单的 Google 文档，里面有关于这些主题的答案，并在面试前查看过。我参加过几次技术面试，只用到了这些列表中的问题。所以强烈推荐大家看看这个！
另外，还附赠了另一份很棒的JS 问题清单，里面有很多比较棘手、大多是高级的问题。

CSS 和设计工具

那时，我对 CSS 的了解仅限于 freeCodeCamp 的响应式网页设计部分。为了进一步学习，我决定参加Jonas Schmedtmann 的高级 CSS 和 Sass课程，因为我在 Twitter 上看到了一些关于这门课程的好评，觉得这对我来说是个完美的选择。我开始使用 BEM 类符号、CSS 预处理器，学习了大量酷炫的 CSS 技巧和动画技术，也为我的作品集构思了很多灵感。

我见过很多招聘信息都要求了解 Figma、Sketch 或 Photoshop，所以为了对它们有一个基本的了解，我用Figma 开始了我的一个项目，进行原型设计。它帮助我理解了什么是设计一致性，以及如何通过一个基本的设计系统来改善最终结果的整体感觉，稍后我会向你展示！

文件夹

在没有任何专业经验的情况下，我明白我的作品集应该体现我所掌握的所有技能，设计精良，而且引人注目。

当我读到最好包含几个大项目而不是很多小应用程序时，我决定我投资组合中包含的每个项目都应该专门针对某项技能。

因此我选择了Recipe Generator来展示 React 的基本知识和从 API 获取数据的能力。

那时，我还获得了 freeCodeCamp 的 API 和微服务证书，并将所有 5 个最终项目打包成一个，以展示 Node、Express 和 MongoDB 的基础知识。
但我也意识到我需要更复杂的东西。所以我决定用 React 和 Firebase 构建一个类似 Discogs 的音乐数据库。我记得我原本计划花一周时间完成这个项目，但我非常享受构建过程，所以最终花费了一个多月的时间。不过，我学到了很多！我完全自己设计了它，没有遵循任何教程，只是根据我遇到的问题搜索了特定的信息，直到现在，我仍然对最终的结果感到满意。

为了从作品集本身汲取灵感，我快速研究了一些网络代理网站。其中一个特别让我惊喜的是https://www.metalab.co/，我喜欢链接悬停时的图像过渡效果，于是自己动手实现了它，并将其应用到作品集主页的项目列表上。
我决定为每个项目创建一个页面，深入描述我使用的技术以及学到的知识。我还记得购买域名的那天：那种兴奋和快乐无比，光是那种感觉就值得我付出所有努力。这就是ulya.dev。

简历、求职信和辅导

2020年6月，我和丈夫、我们的猫在疫情期间搬到了另一个国家，回到了莫斯科。我有点担心回到以前的生活会让我重蹈覆辙，学习前端和找工作会缺乏动力。所以我决定不能浪费时间，尽快开始面试。所以，我们一到莫斯科，就被迫在家进行为期两周的严格隔离。在打扫房间、整理行李的间隙，我专门安排了一段时间来完成作品集和准备简历。

写简历是一件很棘手的事情。在阅读了大量相关文章后，我总结出几个关键点：

• 即使你没有新领域的专业经验，你也应该专注于你在学习期间建立的项目，选择每个工作清单所需的技能，并展示使用这些技术完成的项目

• 你仍然需要让读你简历的人了解你的背景，所以我提到了我最后做的三份工作，并尽可能简短地描述它们，只是为了让我大致了解我的技能

• 如果你要换工作，不要害怕简历的结构与平常略有不同，
  我采用的结构是：

  • 技能和成就：我所代表的项目证明了我的前端、后端和视觉设计技能
  • 经历：首先我描述了我没有工作的那段时间，以及为什么我开始学习前端，然后照例列出了之前的工作
  • 技术技能：我使用的技术
  • 继续教育：我学习前端的主要课程（我把这部分放在正式教育之前，因为它更相关）
  • 正规教育
  • 利益。

如果你的朋友在科技行业工作，我强烈建议你和他们聊聊，给他们看你的简历，征求他们的意见。我当时没人可以问，不过我找到了另一种方法。

对我来说，面试准备中至关重要的一部分是一场意想不到的精彩辅导，辅导老师是一位在莫斯科IT市场经验丰富的人力资源专家。我还找到了一个博客catwomenko.ru（可惜只有俄语版本），里面关于简历写作、求职以及科技行业工作流程的内容给我留下了深刻的印象，于是我决定给博客作者发个消息。我不太喜欢主动联系陌生人，但我还是决定这么做。我对在这个新市场找工作了解甚少，而这位博客作者似乎是合适的人选。她非常详细地审阅了我的简历，指出了我应该重点展现自我的地方，并审阅了我为特定职位撰写的几封求职信。但最重要的是，她向我保证，我已经准备好胜任初级职位了。

结论

正如我一开始所说，我找工作没花太长时间，面试后被拒了三次，还有十几家公司拒绝了我的简历。在我现在就职的那家公司的面试中，我的表现并不完美，但他们看到了我的潜力，似乎对他们的选择很满意。我花了一年多的时间才达到我想要的水平，而这仅仅是个开始。感谢您读到这里，希望我的故事能对您的求职之旅有所帮助！祝您好运，并拥有永不停歇的学习热情。