Join Our First Community Challenge: The Frontend Challenge

We are excited to launch our first official DEV Challenge: The Frontend Challenge!

Running through March 31, this challenge will be an opportunity to show off your creativity, build your profile, earn badges, and in general, have a lot of fun.

We have three prompts for this first challenge – you can participate in just one or all three. Multiple submissions under the same prompt are also welcome, but be sure to follow our submission guidelines.

For this challenge, each prompt will have one winner. Winners will receive an exclusive DEV badge of honor, and a gift from the DEV Shop. Participants with a valid submission will receive a completion badge.

Read on to learn about each prompt and how to participate!

The Prompts

Read these prompts carefully and then use the template to submit to the challenge.

CSS Art Challenge 🎨

Wow us by taking your favorite snack and turning it into CSS art.

Your submission should not use any JavaScript, should flex your creativity in CSS, and should look delicious. Your submission will include markup, may include SVG, etc. but should mostly show off your skills in CSS.

Here is the submission template for anyone that wants to jump right in, but please review all judging criteria, challenge rules, and our FAQ on the official challenge page before submitting:

CSS Art Challenge Submission Template

Glam Up My Markup 💅

Use CSS and JavaScript to make the below starter HTML markup beautiful, interactive, and useful.

Your submission should be more fun and interactive than the HTML we provide, but also be usable and accessible. You should not directly edit the HTML provided, unless it is via JavaScript functionality in your program while still f. The final result should improve the existing expected functionality. We expect style and substance.

For presentation purposes, you may wrap the code in an HTML page and include any necessary script, css, meta tags, and basic necessary boilerplate as long as you stay within the spirit of the challenge.

Starter 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>

Here is the submission template for anyone that wants to jump right in, but please review all judging criteria, challenge rules, and our FAQ on the official challenge page before submitting:

Glam Up My Markup Submission Template

One Byte Explainer ✍️

Explain a browser API or feature in 256 characters or less.

Pick any browser API (e.g. "fetch", "DOM", "Geolocation") and explain consisely what it does, perhaps how it works, and why someone might tap into using it. You have 256 characters — less than a tweet — to get your point across so the challenge is keeping it simple.

You can’t cover all the details in 256 characters, but can you pick out the most important ones? We are flexible about the definition of API or feature here as long as it is within the spirit of the request.

Here is the submission template for anyone that wants to jump right in, but please review all judging criteria, challenge rules, and our FAQ on the official challenge page before submitting:

One Byte Explainer Submission Template

How To Participate

In order to participate, you will need to publish a post using the submission template for your prompt.

You can find all judging criteria, official challenge rules (i.e. eligibility), our FAQ, and more on the official challenge page, so please be sure to read it thoroughly.

Official Challenge Page

Important Dates

• March 20th: Frontend Challenge v24.03.20 begins!
• March 31st: Submission due at 11:59 PM PDT
• April 2nd: Winners Announced
• April 3rd: Stay tuned for our next challenge

We’re very excited to see who ends up with the bragging rights to our first challenge! Questions? Ask them below.

Good luck and happy coding!