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

以下是一些資源，它們鼓勵你通過構(gòu)建項目來提升技能：

Frontend Mentor

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

HackerRank

許多公司也圍繞類似的模式構(gòu)建業(yè)務(wù)。HackerRank 主要專注于求職招聘，目標(biāo)明確，但其提供的技能測試（挑戰(zhàn)題）不僅可以評估你的能力，也是寶貴的學(xué)習(xí)資源。

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

Coderbyte

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

典型的場景：有時網(wǎng)站是產(chǎn)品，你是客戶；有時招聘公司是客戶，你是產(chǎn)品。

嘗試復(fù)現(xiàn) Dribbble 作品

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

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

Front-End Challenges Club

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

CodePen Challenges

CodePen 每周都會推出挑戰(zhàn)賽，提供主題（以及想法和資源），你可以自由發(fā)揮。輕松愉快的挑戰(zhàn)。

100 Days of CSS Challenge

Matthias Martin 創(chuàng)建了 100 天 CSS 挑戰(zhàn)。所有挑戰(zhàn)和參賽作品都公開可見——當(dāng)然，重點在于你自己嘗試完成挑戰(zhàn)。

Daily UI

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

Frontloops

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

CSSBattle

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

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

Ace Front End

Ace Front End 提供的挑戰(zhàn)專注于原生 HTML、CSS 和 JavaScript。

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

Codier

Codier 提供公開的挑戰(zhàn)，包括其他用戶發(fā)布的解決方案。

rendezvous with cassidoo

Cassidy 的每周通訊會在每一期中包含一個挑戰(zhàn)。

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

Carry 建議從現(xiàn)實世界中的物體入手——例如游戲機(jī)的界面或計算器——并嘗試僅使用 CSS 來重現(xiàn)它?！坝靡环N語言突破界限的好方法是創(chuàng)造一些這種語言原本不應(yīng)該做的事情，”他說。

以上是前端挑戰(zhàn)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！