阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 03月21日

加入我們的第一個社群挑戰：前端挑戰

標題：加入我們的第一個社群挑戰：前端挑戰

發表：真實

標籤： frontendchallenge, devchallenge, css, javascript

封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfwaylumsyrf5t3upl4v.jpg

我們很高興推出我們的第一個官方開發挑戰賽：前端挑戰賽！

這項挑戰將持續到 3 月 31 日，這將是一個展示您的創造力、建立您的個人資料、贏得徽章的機會，總的來說，您將獲得很多樂趣。

對於第一個挑戰，我們有三個提示 -您可以只參加一個或全部三個。也歡迎在同一提示下多次提交，但請務必遵循我們的提交指南。

對於本次挑戰，每個提示都會有一名獲勝者。獲獎者將獲得專屬 DEV 榮譽徽章以及DEV 商店贈送的禮物。有效提交的參與者將獲得完成徽章。

繼續閱讀以了解每個提示以及如何參與！

提示

仔細閱讀這些提示，然後使用模板提交挑戰。

CSS 藝術挑戰賽🎨

把你最喜歡的零食變成 CSS 藝術作品，讓我們驚嘆不已。

您提交的內容不應使用任何 JavaScript ，並且應在 CSS 中發揮您的創造力，並且看起來應該很美味。您提交的內容將包括標記，可能包括 SVG 等，但主要應該展示您的 CSS 技能。

這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及官方挑戰頁面上的常見問題：

{% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20CSS%20Art%3A%20Favorite%20Snack._%0A%0A%23%3A%20Favorite%20Snack._%0A%0A%23%3pi%202323pi7%20A%3pi%C% 21--%20What%20snack%20are%20you%20highlighting%20today%3F%20--%3E%0A%0A%23%23%20Demo%0A%3C%21--%20Show%20us%20your%20CSS% 20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20（參見%20the%20FAQ%20section%20of%20the%20challenge%20page）%20%2000%20%20you 20an% 20image%20of%20your%20project%20and%20share%20a%20public%20link%20to%20the%20code.%20--%3E%0A%0A%23%23%20Journey%0A%3%21 %20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20proud%20of%2C%20what%20you%20hope%20to% %20etc.% 20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacredit 20by%20listing%20their% 20DEV%20usernames%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A%0A%3C%21--%20我們%20鼓勵%20you% 20to%20考慮%20加入%20a%20許可證%20for%20your%20code.%20--%3E%0A%0A%3C%21--%20Don%27t%20忘記%20to%20add%20a% 20cover%20image%20to%20your%20post%20(if% 20你%20想要）。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20參與！% 20--%3E %}

CSS 藝術挑戰提交模板

{% 結束%}

讓我的標記更迷人💅

使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。

您提交的內容應該比我們提供的 HTML 更有趣、更具互動性，而且也應該可用且易於存取。您不應該直接編輯提供的 HTML，除非它是在程式中透過 JavaScript 功能進行編輯的。最終結果應該可以改進現有的預期功能。我們期待風格和實質。

入門 HTML

<section id="camp-activities-inquiry">
    <h1>Camp Activities Inquiry</h1>
    <form action="/submit-form" method="POST">
        <label for="activity-select">Which camp activities are you most looking forward to?</label>
        <select id="activity-select" name="activity">
            <option value="">--Please choose an option--</option>
            <option value="hiking">Hiking</option>
            <option value="canoeing">Canoeing</option>
            <option value="fishing">Fishing</option>
            <option value="crafts">Crafts</option>
            <option value="archery">Archery</option>
        </select>

        <label for="food-allergies">Food Allergies (if any)</label>
        <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>

        <label for="additional-info">Additional things the counselor should know</label>
        <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>

        <button type="submit">Submit</button>
    </form>
</section>

這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及官方挑戰頁面上的常見問題：

{% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%2C%endchallenge%2C%20devchallenge%2C%20css%2C%20javascript%0A ---%0A%0A_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20Glam%20Up%20My%20Markup%3A%20Camp%20Activities_%A% 20I%20Built%0A%3C%21--%20告訴%20us%20什麼%20you%20built%20和%20what%20you%20是%20look%20to%20實現。%20--%3E%0A% 0A%23%23 %20Demo%0A%3C%21--%20Show%20us%20your%20project!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20postthe%20this%20post20( 20FAQ%20section%20from% 20%20挑戰%20頁)%20或%20you%20can%20share%20an%20image%20of%20your%20project%20和%20share%20a%20037% 20碼。%20--%3E%0A% 0A%23%23%20旅程%0A%3C%21--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C% 20anything%20you%20are%20specially%20proud%20of%2C% 20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C%21%20etc.%20--%3E%0A%0A%3C%21%200ams %3A%20Please%20pick%20one%20member%20to%20publish %20the%20submission%20and%20credit%20teammates%20by%20listing%20他們的%20DEV%20usernames%20直接7% 20post。%20--%3E%0A%0A%3C%21- -%20我們%20鼓勵%20you%20to%20考慮%20為%20您的%20程式碼加入%20a%20許可證%20 .%20--%3E%0A%0A%3C%21--%20不要%27t%20忘記%20to%20add %20a%20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20的參與！%20- -%3E%}

使我的標記提交模板更加迷人

{% 結束%}

一位元組解釋器✍️

用256 個或更少的字元解釋瀏覽器 API 或功能。

選擇任何瀏覽器 API（例如“fetch”、“DOM”、“Geolocation”）並簡要解釋它的作用，也許它是如何工作的，以及為什麼有人可能會使用它。您有 256 個字元（比一條推文還少）來表達您的觀點，因此挑戰在於保持簡單。

你無法用 256 個字元涵蓋所有細節，但你能挑出最重要的嗎？只要符合請求的精神，我們在這裡對API 或功能的定義是靈活的。

這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及官方挑戰頁面上的常見問題：

{% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20javascript%2C%endchallenge%2C%20devchallenge%2C%20javascript%2C%20webdev%0A ---%0A%0A_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20One%20Byte%20Explainer%3A%20Browser%20API%20Byte%20Explainer%3A%20Browser%20API%20or% 23%20解釋%0A%3C%21--%20解釋%20a%20瀏覽器%20API%20or%20feature%20in%20256%20字元%20或%20less。%20--%3E%0A%0A %23%23%20附加%20Context%0A%3C%21--%20請%20share%20any%20additional%20context%20you%20think%20the%20judges%20should%20take%20into%20sideity% %20to%20your%20One%20Byte %20解釋者。%20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish% 20the%20submission%20and%20credit%20teammates%20by% 20列出%20他們的%20DEV%20用戶名%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A% 0A%3C%21--%20Don%27t%20forget%20to%20add%20a %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A% 0A%0A%3C%21--%20感謝%20%20的參與！%20--% 3E%}

一字節解釋提交模板

{% 結束%}