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!