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.
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)
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.
Can we work with partners for this challenge @ben?
Yes! Up to four people --- details are in the FAQ section for when you're ready to submit: dev.to/challenges/frontend
Why can't i edit the HTML
Yup! We have info about that in the page with all the rules
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
Thought I might have a go at a one byte explainer, I knew those years of tweeting were preparing me for something π
One Byte Explainer: matchMedia
Andrew Bone γ» Mar 20
Challenge DONE..!!
dev.to/ssukhpinder/sensor-apis-1275
Amazing
Thanks @ben
I'm excited!!! At first sight I will go for the 2nd and 3rd. Can't wait for trying!!! π
Yes!
Here it is my submissions:
I enjoyed a lot. Hope everybody have the same as me!!!
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 π
Okayyy, let's goooπͺ. My CSS senses are tinglingπ
Amazing
Well this is good, challenge accepted π
Woohoo!
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 π.
fetch API
Akash Pattnaik γ» Mar 21
Thanks for this amazing challenge
Good luck!
Thank you
Excited to see what you submit @divya4879 :)
Thanks π
Will give it my best
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.