We kicked off our first frontend challenge a few weeks ago with the promise that we’d run these regularly if the community enjoyed participating – your submissions sent us over the moon, so now we are so back with our next Frontend Challenge!
For this next Frontend Challenge, we’ll be celebrating our planet’s largest civic event: Earth Day. 🌍 🌏 🌎
This challenge features two prompts. We are bringing back the CSS Art and Glam Up My Markup prompts for this challenge – don’t worry, One Byte Explainer will make an appearance again in the future!
Like last time, there will be a winner for each prompt, and to celebrate Earth Day, we will also have an additional prize category for this challenge. That’s three chances to win bragging rights, a gift from the DEV Shop, and an exclusive DEV badge. As always, participants with a valid submission will receive a completion badge.
Frontend isn’t your thing? Or are you looking for a challenge with bigger prizes? The Coze AI Bot Challenge is running now with a $3,000 prize pool.
Read on to learn about each prompt and how to participate!
Prompts
CSS Art: Earth Day
Draw what comes to mind for you when it comes to Earth Day. Is it our beautiful planet? Is it a symbol that drives awareness about climate change? Whatever it is, show us!
Your submission should not use any JavaScript and should flex your creativity in CSS. Your submission will include markup, may include SVG, etc. but should mostly show off your skills in CSS.
Judging Criteria
- Creativity
- Effective use of CSS
- Aesthetic outcome
Here is the submission template for anyone that wants to jump right in, but please review all judging criteria and challenge rules on the official challenge page before submitting.
CSS Art Challenge Submission Template
Glam Up My Markup: Earth Day Celebration Landing Page
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. We expect style and substance. You may add basic boilerplate, including meta tags etc. for presentation purposes.
<body>
<header>
<h1>Welcome to Our Earth Day Celebration!</h1>
</header>
<section>
<article class="facts">
<h2>Did You Know?</h2>
<p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
</article>
<article>
<h2>Why Celebrate Earth Day?</h2>
<p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
</article>
<article>
<h2>How You Can Help</h2>
<p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p>
<ul>
<li>Reduce, reuse, and recycle.</li>
<li>Volunteer for cleanups in your community.</li>
<li>Conserve water and electricity.</li>
<li>Plant a tree.</li>
<li>Educate others about environmental conservation.</li>
</ul>
</article>
<div class="action-call">
<h2>Take Action Now</h2>
<p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p>
<a href="#">Start the Quiz!</a>
</div>
</section>
<div class="testimonial">
<h2>Inspiration Corner</h2>
<p>"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin</p>
<p>This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.</p>
</div>
<div class="events">
<h2>Join an Event</h2>
<p>Participate in local and global Earth Day events to take action towards a sustainable future. Check out <a href="#">events near you</a>.</p>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
</body>
Judging Criteria:
- Accessibility
- Usability and user experience
- Creativity
- Code quality
Here is the submission template for anyone that wants to jump right in, but please review all judging criteria and challenge rules on the official challenge page before submitting.
Glam Up My Markup Submission Template
Additional Prize Category
In addition to being able to win each prompt, we have a special prize category in honor of our planet:
- Earth Day: Awarded to a top submission that brings awareness to climate change.
Our Earth Day winner will receive an additional ultra-exclusive badge for their DEV profile, in addition to the Frontend Challenge winner badge and gift from the DEV shop.
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, challenge rules, and submission templates on the official challenge page.
Our rules and guidelines cover topics such as entry requirements, team submissions, use of AI, and more, so please be sure to read it thoroughly.
Important Dates
April 17: Frontend Challenge v24.04.17 begins!
April 28: Submission due at 11:59 PM PDT
April 30: Winners Announced
We’re very excited to see your Earth Day projects! Questions? Ask them below.
Good luck and happy coding!
Top comments (36)
Hope folks submit to both challenges!
That's the plan 👌
And it's done 😄
CSS Challenge: dev.to/arndom/recreating-a-gif-wit...
Coze Challenge: dev.to/arndom/webdevdocs-workflow-...
Hey ! I want to know that where to post the project of earth day to let them judge ? Actually i am in new in dev community so i dont know
Hi @shrutimsra, ideally you'll:
I'm glad there's another front end challenge. I don't know the least thing about developing AI software.
Try both just for fun 😝
I would love to, but I don't see how I can. I've only been learning to develop software since December. I only know HTML, CSS, and native JS. I don't know the first thing about how do develop AI. If you think, with the knowledge I have, I could, and were willing to give me a few pointers, I would gladly join. But as far as I know, I have no where near enough understanding to create AI software, even of the most simple variety.
I'd recommend checking out the Coze livestream on 04/22 at 5pm EDT -- they'll be walking through the whole process and I think it will be more approachable than you expect! If you can't make the livestream, we will plan to publish the video when it's over.
yessss, love me some design :D
Thanks for these challenges!
Awesome
Let's goooo💥💪💥
Can't wait to see what you make!
Are we going to get another completion badge if we already have one?
Yup! We're working out the design details of how it will go but you get a new one every time.
Awesome!
Super excited for this one😃
I missed this when it was announced. Found it on LinkedIn. Started on it today.
OOhhhh Yeahh...!!! Another challenge......pretty excited.
Serious Kung Fu GIF by Bombay Softwares - Find & Share on GIPHY
Discover & share this Bombay Softwares GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.
Good luck everyone :)
I have an ambitious idea for this one! Hope I can make it a reality 🙌🏻 good luck to anyone participating, let's make something cool for everyone on earth to see 🌍🌎 (get it?)
Hi, Excited for this
This is the type of challenge I am up for. The AI challenges aren't easy to follow; a frontend challenge is just right for my programming journey 👍.
So I will definitely be joining you guys in this coding adventure.
Wow. This is cool!
Yeahh, let's gooooo
The Coze AI Bot Challenge is running now with a $3,000 prize pool. this link doesn't work "Coze Ai Bot Challenge" FYI! 💗
Ah, thank you! Fixed! Here it is as well: dev.to/devteam/join-us-for-the-coz...