前端挑战

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用!

我最喜欢的提升前端开发技能的方法是实际操作。 实际上是 构建网站。 如果你能为其赚钱,那就更好了,你应该这么做。 如果你所构建的网站能帮助你自己或你关心的任何人,那也很好。 除此之外,你也可以仅仅为了构建而构建东西,这样你仍然可以提升技能。 这当然比仅仅阅读相关内容要好!

以下是一些资源,如果你愿意,可以鼓励你通过构建东西来提升技能。

前端导师

看起来这个网站最近上线了,它就是这篇文章的灵感来源。 给人们提供前端工作来做的想法已经足够建立一个企业了!其中一些是免费的,一些则不是。

HackerRank

其他企业也围绕这个理念发展起来。 HackerRank专注于求职和招聘,因此他们有非常强大的目标,但他们实现目标的方式之一就是让你参加这些技能测试(解决挑战),这些测试旨在评估你,但你当然也可以从中学到东西。

还有其他类似的网站:CodewarsChallengeRocketCodesignalTopcoder(天哪,风险投资人一定很喜欢这个想法。)

Coderbyte

Coderbyte 也有付费计划,旨在通过挑战来提升你的面试技能。

典型的情况:有时网站就是产品,你是客户,有时招聘公司就是客户,你是产品。

构建 Dribbble 作品

这是经典之举:在 Dribbble 上找到你喜欢的东西,然后重建它。 @keyframers 经常这样做。 Tim Evko 的 练习 网站过去会为你选择一个作品(以及随机的 GitHub 问题和随机的编码挑战),但 Dribbble 部分现在看起来坏了。 其他东西仍然可以正常使用!

Matt Delac 过去会 做一系列 类似的内容。 Indrek Lasn 也在 Medium 文章 中这样做。

前端挑战俱乐部

Andy Bell 曾经举办过一个前端挑战俱乐部,虽然我认为它现在处于暂停状态,但你可以 查看存档.

CodePen 挑战

CodePen 挑战 每周都会发布,提供构建任何你喜欢的东西的提示(以及想法和资源)。 非常低调。

100 天 CSS 挑战

Matthias Martin 创建了 100 天 CSS 挑战。 它们都可以在那里查看,包括其他人的参赛作品——当然,重点是让你自己尝试一下。

每日 UI

每日 UI 挑战每天都会给你一个新的挑战,从你注册的那天开始(而且是免费的)。 很多人通过 代码 完成了这项挑战。

Frontloops

Frontloops 收费 19 美元,包含 30 个挑战,其中包括信息、建议、资产和解决方案。

CSSBattle

如果你认为用尽可能少的字节代码来模仿设计是一项有趣的挑战,那么 CSSBattle 会吸引你。

以尽可能简洁的方式编写代码通常被称为“代码高尔夫”,而且 也有一个专门的挑战网站

Ace Front End

Ace Front End 提供的挑战专门针对原生 HTML、CSS 和 JavaScript。

我正好注意到第一个挑战是一个下拉导航菜单,它没有处理诸如 aria-expanded 之类的东西。 我并不确定这有多大问题,我不想挑 Ace Front End 的毛病——这只是提醒你,这些挑战中可能存在问题。 但这并不意味着你无法从中学到东西。

Codier

Codier 提供公开的挑战,包括其他用户发布的解决方案。

与 Cassidy 相约

Cassidy 的每周时事通讯 每期都会包含一个挑战。



Rina Diane Caballar 引用 Tim Carry 在 扩展 CSS 的极限 中的言论

Carry 建议从一个现实世界的物体开始,例如游戏控制台或计算器的界面,然后尝试只用 CSS 来重新创建它。“用一种语言突破界限的最佳方法,就是用它来做一些它本来不打算做的事情,”他说道。