提升前端開發技能的最佳途徑？那就是實踐！動手構建網站，這是最有效的學習方法。如果能從中獲得報酬，那就再好不過了；即使是為自身或親友構建網站，也能顯著提陞技能。即使只是為了練習而創建項目，也能讓你快速成長，這絕對比單純閱讀資料有效得多！

以下是一些資源，它們鼓勵你通過構建項目來提陞技能：

Frontend Mentor

這個平台最近才上線，也是本文寫作的靈感來源。為開發者提供前端項目，本身就是一個成功的商業模式！部分項目免費，部分項目收費。

HackerRank

許多公司也圍繞類似的模式構建業務。 HackerRank 主要專注於求職招聘，目標明確，但其提供的技能測試（挑戰題）不僅可以評估你的能力，也是寶貴的學習資源。

類似平台還有：Codewars、ChallengeRocket、Codesignal、Topcoder（風險投資家一定很喜歡這種模式）。

Coderbyte

Coderbyte 也提供付費計劃，旨在通過挑戰題提升你的面試技能。

典型的場景：有時網站是產品，你是客戶；有時招聘公司是客戶，你是產品。

嘗試復現 Dribbble 作品

經典方法：在 Dribbble 上找到你喜歡的作品，嘗試復現它。 @keyframers 經常這樣做。 Tim Evko 的練習網站過去會為你隨機選擇 Dribbble 作品（以及 GitHub 問題和編碼挑戰），但目前 Dribbble 部分似乎已失效，其他功能仍然可用！

Matt Delac 過去也做過類似的系列練習。 Indrek Lasn 也在 Medium 上分享過類似的文章。

Front-End Challenges Club

Andy Bell 曾運營過 Front-End Challenges Club，雖然目前處於暫停狀態，但你仍然可以查看其存檔。

CodePen Challenges

CodePen 每週都會推出挑戰賽，提供主題（以及想法和資源），你可以自由發揮。輕鬆愉快的挑戰。

100 Days of CSS Challenge

Matthias Martin 創建了 100 天 CSS 挑戰。所有挑戰和參賽作品都公開可見——當然，重點在於你自己嘗試完成挑戰。

Daily UI

Daily UI 挑戰每天都會提供一個新的挑戰（免費）。許多人用代碼完成這些挑戰。

Frontloops

Frontloops 收費 19 美元提供 30 個挑戰，包含信息、建議、素材和解決方案。

CSSBattle

如果你喜歡用盡可能少的代碼來模仿設計，那麼 CSSBattle 會非常適合你。

用盡可能簡潔的代碼編寫程序通常被稱為“代碼高爾夫”，也有專門的挑戰網站。

Ace Front End

Ace Front End 提供的挑戰專注於原生 HTML、CSS 和 JavaScript。

我注意到第一個挑戰是下拉導航菜單，但它沒有處理 aria-expanded 屬性。我不確定這有多大問題，也不是要批評 Ace Front End——這只是提醒你，任何挑戰都可能存在問題。但這並不意味著你不能從中學習。

Codier

Codier 提供公開的挑戰，包括其他用戶發布的解決方案。

rendezvous with cassidoo

Cassidy 的每週通訊會在每一期中包含一個挑戰。

Rina Diane Caballar 引用 Tim Carry 在《擴展 CSS 的極限》中的話：

Carry 建議從現實世界中的物體入手——例如游戲機的界面或計算器——並嘗試僅使用 CSS 來重現它。 “用一種語言突破界限的好方法是創造一些這種語言原本不應該做的事情，”他說。