目錄
Frontend Mentor
HackerRank
Coderbyte
尝试复现 Dribbble 作品
Front-End Challenges Club
CodePen Challenges
100 Days of CSS Challenge
Daily UI
Frontloops
CSSBattle
Ace Front End
Codier
rendezvous with cassidoo
首頁 web前端 css教學 前端挑戰

前端挑戰

Apr 07, 2025 am 09:51 AM

Front-End Challenges

提升前端开发技能的最佳途径?那就是实践!动手构建网站,这是最有效的学习方法。如果能从中获得报酬,那就再好不过了;即使是为自身或亲友构建网站,也能显著提升技能。即使只是为了练习而创建项目,也能让你快速成长,这绝对比单纯阅读资料有效得多!

以下是一些资源,它们鼓励你通过构建项目来提升技能:

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 来重现它。“用一种语言突破界限的好方法是创造一些这种语言原本不应该做的事情,”他说。

以上是前端挑戰的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天,我發現了科里·金尼文(Corey Ginnivan)網站上的這一點,當您滾動時,彼此之間的卡片堆放集。

Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

我看到Google字體推出了新設計(Tweet)。與上一次大型重新設計相比,這感覺更加迭代。我幾乎無法分辨出區別

如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

如何通過CSS選擇第一個類名為item的子元素? 如何通過CSS選擇第一個類名為item的子元素? Apr 05, 2025 pm 11:24 PM

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? 在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? Apr 05, 2025 pm 10:21 PM

在前端開發中如何實現類似Windows...

See all articles