title：恭喜我們的前端挑戰賽獲勝者！
發表：真實
簡介: 感謝大家的參與！我們希望您玩得開心，感受到挑戰，並可能為您的職業檔案加入一兩件事。
標籤： frontendchallenge、devchallenge、css、javascript
封面圖片：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yld68v14yeqhrbtttthm.png
不到兩週前，我們宣布了首個開發挑戰賽：前端挑戰賽。
我們歡迎大家參與一項或全部三項提示：
-
CSS Art：把你最喜歡的零食變成 CSS Art
-
Glam Up My Markup：採用我們提供的 HTML 並使其具有互動性
-
一位元組解釋器：用 256 個或更少的字元解釋瀏覽器 API 或功能
我們對結果感到震驚。每個提示實際上都會產生數十個可能獲勝的提交內容。當然，每個提示只能有一名獲勝者，如下所示。
我們真的非常希望每個提交的人都能回來參加下一個前端挑戰，因為這個組中肯定有很多未來的獲勝者。
恭喜…
@floscode 憑藉其精美的互動式 CSS 香蕉在CSS 藝術類別中名列前茅。哇！
{% codepen https://codepen.io/flos-code/pen/VwNWYON %}
這絕對是徹頭徹尾的創意。它擴展了挑戰的概念，同時也真正切入人心。對一些靈感來自何處的精彩解釋會加分。
{% 連結 https://dev.to/floscode/the-frontend-challenge-bananas-are-the-superior-fruit-42n3 %}
@rafajrg21 透過使我們的營地活動具有應有的互動性，贏得了Glam Up My Markup類別。
{% codepen https://codepen.io/Rafa-romero-dev/pen/GRLMdMd %}
該提交提供了一種易於存取、簡潔、互動的設計，在各種視窗尺寸下都很有用。
{% 嵌入 https://dev.to/rafajrg21/the-frontend-challenge-glammed-up-camp-activities-3j6j %}
@highflyer910 以對Intersection Observer API的有用且簡潔的解釋贏得了One Byte Expander的勝利。
Intersection Observer API追蹤元素何時在螢幕上可見。避免昂貴的事件處理程序。優化並保持對視口變化的反應。與傳統的滾動/調整大小事件處理程序相比，它更有效率，同時更易於實現。試一試！
本提交內容將所描述的 API 與該 API 所取代的流行替代方案進行了比較和對比。充分利用分配的空間。
{% 嵌入 https://dev.to/highflyer910/intersection-observer-api-one-byte-explainer-3f5i %}
除了吹牛的權利之外，我們的獲勝者還將在其 DEV 個人資料中獲得專屬獲勝者徽章，以及他們想要從 DEV 商店的DEV 挑戰系列中獲得的任何禮物。
所有參與者將於本週收到參與徽章。
下一步是什麼？
我們很快就會舉辦另一場前端挑戰賽！請務必關注我們的挑戰標籤，這樣您就不會錯過公告。請記住，您始終可以在以前專案的工作（尤其是學到的知識）的基礎上進行建置，因此並非一切都會丟失！
{% 標籤前端挑戰 %}
{% 標籤 devchallenge %}
感謝所有參與的人。 ❤️
我們希望您玩得開心，感受到挑戰，並可能為您的職業檔案加入一兩件事。
下次見！
原文出處：https://dev.to/devteam/congrats-to-our-frontend-challenge-winners-2h5f
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式