DEV Community

Cover image for Join Our First Community Challenge: The Frontend Challenge
dev.to staff for The DEV Team

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (72)

Collapse
 
ben profile image
Ben Halpern

Woot woot.

I'll be submitting early and encourage other folks to not wait until the deadline.

Remember you can submit to all the prompts, so getting one in early is just a good idea.

Collapse
 
cbid2 profile image
Christine Belzie

Can we work with partners for this challenge @ben?

Collapse
 
jess profile image
Jess Lee

Yes! Up to four people --- details are in the FAQ section for when you're ready to submit: dev.to/challenges/frontend

Thread Thread
 
uzondu9 profile image
Uzondu

Why can't i edit the HTML

Collapse
 
ben profile image
Ben Halpern

Yup! We have info about that in the page with all the rules

Collapse
 
uzondu9 profile image
Uzondu

Where do i write the code for "Glam up my Markup";
.Codepen
.VS Code

if so how do i post it on the submission template.
I need an answer fast

Collapse
 
link2twenty profile image
Andrew Bone

Thought I might have a go at a one byte explainer, I knew those years of tweeting were preparing me for something πŸ˜…

Collapse
 
ssukhpinder profile image
Sukhpinder Singh • Edited
Collapse
 
ben profile image
Ben Halpern

Amazing

Collapse
 
ssukhpinder profile image
Sukhpinder Singh

Thanks @ben

Collapse
 
jaloplo profile image
Jaime LΓ³pez

I'm excited!!! At first sight I will go for the 2nd and 3rd. Can't wait for trying!!! 😁

Collapse
 
ben profile image
Ben Halpern

Yes!

Collapse
 
jaloplo profile image
Jaime LΓ³pez

Here it is my submissions:

I enjoyed a lot. Hope everybody have the same as me!!!

Collapse
 
floscode profile image
Florian

Yeah, great challenges right at the beginning of spring I will definitely take part in the CSS art challenge 🎨 and of course I am looking forward to all the great submissions from CSS artists to learn smth new 🌟

Collapse
 
sarahokolo profile image
sahra πŸ’«

Okayyy, let's goooπŸ’ͺ. My CSS senses are tingling😁

Collapse
 
ben profile image
Ben Halpern

Amazing

Collapse
 
20015 profile image
Joker

Well this is good, challenge accepted 😊

Collapse
 
jess profile image
Jess Lee

Woohoo!

Collapse
 
akashpattnaik profile image
Akash Pattnaik

Well. I thought it would be great opportunity to let new developers about a browser's native APIs. So I went ahead and made started a 1-byte series πŸ˜„.

Collapse
 
divya4879 profile image
Divya4879

Thanks for this amazing challenge

Collapse
 
ben profile image
Ben Halpern

Good luck!

Collapse
 
divya4879 profile image
Divya4879

Thank you

Collapse
 
peter profile image
Peter Kim Frank

Excited to see what you submit @divya4879 :)

Collapse
 
divya4879 profile image
Divya4879

Thanks 😊
Will give it my best

Collapse
 
peter profile image
Peter Kim Frank

So excited for this first challenge. Can't wait to see what everyone submits! ✨

Some comments may only be visible to logged-in visitors. Sign in to view all comments.