搜尋

前端挑戰

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
模擬鼠標運動模擬鼠標運動Apr 22, 2025 am 11:45 AM

如果您曾經在現場演講或課程中必須顯示一個互動動畫,那麼您可能知道它並不總是那麼容易與您的幻燈片進行互動

通過Astro Action和Fuse.js為搜索提供動力通過Astro Action和Fuse.js為搜索提供動力Apr 22, 2025 am 11:41 AM

對於Astro,我們可以在構建過程中生成大部分網站,但是有一小部分服務器端代碼可以使用Fuse.js之類的搜索功能來處理搜索功能。在此演示中,我們將使用保險絲搜索一組個人“書籤”

未定義:第三個布爾值未定義:第三個布爾值Apr 22, 2025 am 11:38 AM

我想在我的一個項目中實現一條通知消息,類似於您在保存文檔時在Google文檔中看到的信息。換句話說,一個

捍衛三元聲明捍衛三元聲明Apr 22, 2025 am 11:25 AM

幾個月前,我正在使用黑客新聞(就像一個人一樣),並且遇到了一篇(現已刪除的)文章,內容涉及不使用if語句。如果您是這個想法的新手(就像我

使用網絡語音API進行多語言翻譯使用網絡語音API進行多語言翻譯Apr 22, 2025 am 11:23 AM

自科幻小說以來,我們就幻想著與我們交談的機器。今天這很普遍。即便如此,製造的技術

JetPack Gutenberg塊JetPack Gutenberg塊Apr 22, 2025 am 11:20 AM

我記得當古騰堡被釋放到核心時,因為那天我在WordCamp我們。現在已經過去了幾個月,所以我想我們越來越多的人

在VUE中創建可重複使用的分頁組件在VUE中創建可重複使用的分頁組件Apr 22, 2025 am 11:17 AM

大多數Web應用程序背後的想法是從數據庫中獲取數據,並以最佳方式將其呈現給用戶。當我們處理數據時

使用'盒子陰影”和剪輯路徑一起使用'盒子陰影”和剪輯路徑一起Apr 22, 2025 am 11:13 AM

讓我們在一個情況下做一些似乎有意義的事情的情況下逐步進行一些逐步,但是您仍然可以用CSS欺騙來完成它。在這個

See all articles

熱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

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

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能