加入我们的第一个社区挑战：前端挑战

我们很高兴推出我们的第一个官方DEV 挑战：前端挑战！

本次挑战将持续到 3 月 31 日，这将是一个展示您的创造力、建立您的个人资料、赢取徽章以及享受很多乐趣的机会。

本次首场挑战赛共有三个主题——您可以选择参与其中一项，也可以全部参与。我们也欢迎您针对同一主题提交多份作品，但请务必遵循我们的提交指南。

本次挑战赛每道题目将产生一名获胜者。获胜者将获得一枚专属 DEV 荣誉徽章，以及DEV 商店的精美礼品。提交有效答案的参与者将获得一枚完成徽章。

继续阅读以了解每个提示以及如何参与！

提示

仔细阅读这些提示，然后使用模板接受挑战。

CSS 艺术挑战🎨

将您最喜欢的零食变成 CSS 艺术，让我们惊叹不已。

您的提交内容不应使用任何 JavaScript，而应充分展现您在 CSS 方面的创造力，并且外观精美。您的提交内容将包含标记，可能包含 SVG 等，但主要应展示您的 CSS 技能。

这是任何想要立即参与的人的提交模板，但请在提交之前查看所有评判标准、挑战规则以及官方挑战页面上的常见问题解答：

CSS 艺术挑战赛提交模板

美化我的标记💅

使用 CSS 和 JavaScript 使下面的起始 HTML 标记美观、交互且实用。

您提交的内容应比我们提供的 HTML 更具趣味性和互动性，同时还要易于使用且易于访问。您不应直接编辑提供的 HTML，除非通过程序中的 JavaScript 功能进行编辑。最终结果应改进现有的预期功能。我们期望您的作品风格和内容符合预期。

出于演示目的，您可以将代码包装在 HTML 页面中，并包含任何必要的脚本、css、元标记和基本必要的样板，只要您不违背挑战的精神。

入门 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>