目錄
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

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1327
25
PHP教程
1273
29
C# 教程
1253
24
靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語:“靜態表單提供商”。你帶上html

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

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

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom 每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom Apr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

帶有HTML對話框元素的一些動手 帶有HTML對話框元素的一些動手 Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

'訂閱播客”鏈接應在哪裡? '訂閱播客”鏈接應在哪裡? Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭 它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭 Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分,但是其中所處的內容對於您的網站的成功也一樣重要

託管您自己的非JavaScript分析的選項 託管您自己的非JavaScript分析的選項 Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics(廣泛使用)

紙張形式 紙張形式 Apr 16, 2025 am 11:24 AM

購買或建造是技術的經典辯論。自己構建東西可能會感覺更便宜,因為您的信用卡賬單上沒有訂單項,但是

See all articles