A REAL Front-End challenge for Earth Day.
Tags: earthday, sustainability, challenge, ai
Published: 2024-04-29 15:22:08

---
title: A REAL Front-End challenge for Earth Day.
published: true
description: Both of the April DEV challenges are antithetical to Earth Day. I propose a new challenge.
tags: earthday, sustainability, challenge, ai
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-29 15:00 +0000
---

Both of the April DEV challenges are antithetical to Earth Day.

Here's why:

## Background

In case you missed them, there are 2 April challenges that just ended:

- [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-04-17)
- [Coze AI Bot Challenge](https://dev.to/challenges/coze)

## Websites are unnecessarily BIG and consume TOO MUCH energy.

The Internet currently consumes roughly the same amount of electricity as the entire United Kingdom, which is approximately 300 TWh/year (about 2% of the entire world's electricity usage).

By 2030, projections indicate that the Internet could consume around 21% of the world’s electricity.

This is due to several factors, the most prevalent being:
1. Websites are just too dang big in the first place.
2. The Internet of Things (IoT) continues to grow.
3. The use of generative AI (more on that later).

### How to Calculate a Website’s Carbon Footprint:

Tools like [websitecarbon.com](https://www.websitecarbon.com/) estimate the carbon footprint of any webpage.

The calculation looks at:
- Data transferred when a webpage loads.
- Energy source (is the hosting service known to offset, etc).
- Current average carbon intensity of electricity.

My current day job website, which I'm working daily to improve, is built on WordPress and scored an even C; "cleaner than 51% of all webpages globally."

It was a D when I started on it and I'm hoping to get it to A before the end of June (2024).

### How to minimize the carbon footprint of your website

Energy efficiency isn’t solely technical.

Sure, it helps to be using a sustainability-focused server.

But, design and content play crucial roles.

These are often not thought of when working on the sustainability of a website:

- Image compression.
- Minimizing unnecessary scripts.
- Efficient code practices.
- Choosing sustainable hosting.
- Even SEO optimization.

## AI is often unnecessary and consume TOO MUCH energy.

## My confessions

I still use AI for some things, and I'm a big fan of WordPress which certainly is not the lightest website builder out there.

I'm not saying this stuff is evil. I was just on a website that I know took a lot of JavaScript et al. to work, but it was simply beautiful.

I just feel like we should be working on minimizing it as much as possible.

When a website is simply information, it doesn't have to be fancy.

First and foremost, a website needs to be able to convey the information it is meant to share.

## My Challenge To YOU

Here's the original code in case they take the page down:

```html
<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>
```

Here's my submission:

On [CodePen.io.](https://codepen.io/quadiumstaral/pen/MWRPVZL)

The code:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
      body {
        margin: 3%;
        font-size: 21px;
      }

      p {
        margin-left: 3%;
      }

      h1 {
        font-size: 55px;
      }

      h2 {
        font-size: 34px;
      }

      .testimonial p:first-of-type {
        margin-left: 13%;
        font-style: italic;
      }
    </style>
    <title>HTML 5 Boilerplate</title>
  </head>
  <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>
</html>
```