我参加了为期三周的前端导师挑战赛，以下是我的心得体会。

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

大家好！距离我上次发帖已经有一段时间了。过去三周我一直在忙着完成前端导师的挑战，希望能提高我的前端开发技能。

如果您是第一次听说 Frontend Mentor，那么让我来为您介绍一下。Frontend Mentor 是一个平台，开发者可以在这里与其他开发者一起学习和提升前端开发技能，并通过解决各种挑战来实现目标。任何人都可以成为导师、学生，或者两者兼具。他们提供的挑战分为五个难度级别：

1. 新手
2. 初级
3. 中间的
4. 先进的
5. 古鲁

很多挑战都是免费的，但也有一些高级挑战需要付费才能参与。我目前还没有购买专业会员（👀），所以到目前为止我参与的都是免费挑战。

我之前做过一年半的网页开发（离高级甚至中级都差得远），除了查询和检索数据，我还要不停地修复和调整前端，所以可以说我对这方面并不完全陌生。尽管如此，我还是得从头开始：从新手的挑战做起。以下是我学到的东西：

1. 布局

这些新手挑战主要由 HTML 和 CSS 问题组成，旨在测试你的布局技能。这些项目规模较小，通常只有几个卡片组件，每个组件包含几个部分。听起来很简单，但我解决的前几个挑战确实考验了我使用 Flexbox 和 Grid 进行布局的能力，尤其是在考虑响应式布局的情况下。

其中有一个问题真的把我难住了，直到我向社区求助才解决。这个常见问题解答中的手风琴挑战要求将三张不同的图片上下堆叠，并且它们必须以某种方式“粘”在一起或相互关联（例如，当其中一张图片移动时，其他图片也会随之移动）。这真是一个很有趣的挑战，我很庆幸自己完成了它。

2. 移动优先方法

是的，没错。在参加前端导师挑战赛之前，我其实并不关心移动端设计（我知道，我应该感到羞愧），主要是因为我之前的工作中我们没有专门的设计师，我们都是凭感觉摸索，而这种方法的弊端在于，凭感觉摸索根本行不通。

所以，当我第一次看到前端导师的挑战，看到桌面版和移动版的设计时，我想：“哇，真棒。我不用考虑移动端的显示效果了。” 紧接着我又想：“等等，我终于可以做移动优先了。” 于是我就这么做了。

我得承认，一开始我以为移动优先设计方法有什么特别的秘诀，但其实它只是先针对小屏幕进行设计，然后再适配大屏幕而已。不过，这仍然很巧妙。

3. 萨斯

啊，没错。著名的 CSS 预处理器 Sass。其实在加入 Frontend Mentor 之前我就计划学习它了，但我当时想先把 CSS 代码整理好，因为虽然我觉得自己 CSS 还不错，但还是不够自信，不敢贸然学习 Sass。所以在完成了 4 个新手挑战，并帮助其他开发者解决了他们的难题之后，我觉得或许我已经准备好学习 Sass 了。

我真庆幸自己决定学习 Sass。一切都变得容易多了。不过说实话，如果我当初没有先努力掌握 CSS，或者至少精通 CSS，我可能不会像现在这样喜欢 Sass。

4. 可访问性

与移动优先策略不同，无障碍设计实际上是我在上一份开发工作中非常重视的一个方面。但不得不承认，无障碍设计是那种我永远无法一次、两次甚至三次就做到完美的事情。而且，要找到一个适用于所有无障碍问题的万能解决方案也相当困难，有时你必须亲自使用不同的屏幕阅读器和浏览器组合进行测试。

幸运的是，Frontend Mentor 上还有其他志同道合的开发者，他们和我一样重视无障碍设计。事实上，如果你浏览我的个人资料，你会发现很多针对我解决方案的反馈都与无障碍设计有关，我对此感到非常高兴。能够学习到这些我原本可能永远无法接触到的无障碍设计知识，真是太好了。

结论

总的来说，我觉得我现在比三周前进步了很多。至少在前端开发的方法和实现方式上，我至少有几点改进了。最近解决的一些挑战中，我也通过客户端表单验证提升了一些 JavaScript 技能。

我还学到了其他一些东西，比如如何给其他开发者提供有用的反馈，如何帮助他们解决遇到的问题，以及Git 子模块——这是一个非常棒的功能，我用它来整理 GitHub 上与 Frontend Mentor 相关的代码库。说到代码库，你可以在这里找到我目前为止所有的线上网站解决方案。

展望未来

我计划继续挑战 Frontend Mentor 的题目，这次我会利用它们来学习一到两个 JavaScript UI 库或框架（Angular？React？Vue？🤔）。我还在考虑从哪个框架或库入手，所以如果你有什么建议，请在下方留言，并说服我为什么应该学习这个框架而不是其他框架！

如果你喜欢这篇文章，可以考虑请我喝杯咖啡。