加入我们,参加下一届前端挑战赛:地球日特辑!
几周前,我们启动了第一个前端挑战赛,并承诺如果社区喜欢参与,我们将定期举办此类挑战赛——你们的投稿让我们欣喜若狂,所以现在我们带着下一个前端挑战赛强势回归!
在接下来的前端挑战赛中,我们将庆祝地球上规模最大的公民盛事:地球日。🌍 🌏 🌎
本次挑战包含两个主题。我们将再次推出CSS 艺术和Glam Up My Markup这两个主题——别担心,One Byte Explainer 未来还会再次出现!
和上次一样,每个主题都会评选出一位优胜者。为了庆祝地球日,本次挑战赛还将增设一个奖项类别。这意味着您将有三次机会赢得荣誉、一份来自 DEV 商店的礼物以及一枚专属的 DEV 徽章。一如既往,所有提交有效作品的参与者都将获得一枚完成徽章。
前端开发不是你的强项?或者你想挑战更高奖金的项目?Coze AI Bot Challenge正在进行中,奖金池高达 3000 美元。
请继续阅读,了解每个提示以及如何参与!
提示
CSS艺术:地球日
画出你想到地球日时脑海中浮现的画面。是我们美丽的星球吗?还是一个能提高人们对气候变化认识的象征?无论是什么,都请告诉我们!
你的作品不应使用任何 JavaScript,而应充分展现你在 CSS 方面的创造力。作品可以包含标记语言,也可以包含 SVG 等,但主要应体现你在 CSS 方面的技能。
评判标准
- 创造力
- 有效利用 CSS
- 美学效果
这里提供提交模板,方便想要直接参赛的人,但请在提交前仔细阅读官方挑战页面上的所有评判标准和挑战规则。
美化我的标记:地球日庆祝活动落地页
使用 CSS 和 JavaScript 使下面的 HTML 初始标记美观、交互且实用。
您的提交内容应比我们提供的 HTML 代码更有趣、更具互动性,同时也要保证可用性和可访问性。除非使用 JavaScript,否则请勿直接编辑我们提供的 HTML 代码。我们期待兼具美观与实用性。您可以添加一些基本的样板代码,例如 meta 标签等,以用于演示。
<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>
评判标准:
- 无障碍
- 可用性和用户体验
- 创造力
- 代码质量
这里提供提交模板,方便想要直接参赛的人,但请在提交前仔细阅读官方挑战页面上的所有评判标准和挑战规则。
附加奖项类别
除了每个挑战的奖品之外,我们还设立了一个特别奖项,以纪念我们的星球:
- 地球日奖:颁发给能够提高人们对气候变化认识的优秀作品。
除了前端挑战赛获胜者徽章和 DEV 商店的礼品外,我们的地球日获胜者还将获得一枚额外的超专属徽章,用于他们的 DEV 个人资料。
如何参与
参与本次活动,您需要使用提供的投稿模板发布一篇符合您主题要求的帖子。您可以在官方挑战页面找到所有评判标准、挑战规则和投稿模板。
我们的规则和指南涵盖了参赛要求、团队提交、人工智能的使用等主题,所以请务必仔细阅读。
重要日期
4月17日:前端挑战赛 v24.04.17 正式开始!
4月28日:作品提交截止时间为太平洋时间晚上11:59。
4月30日:公布获奖名单。
我们非常期待看到你们的地球日项目!如有任何问题,请在下方留言。
祝你好运,编程愉快!
文章来源:https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4