Background

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

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:

Websites are just too dang big in the first place.
The Internet of Things (IoT) continues to grow.
The use of generative AI (more on that later).

How to Calculate a Website’s Carbon Footprint:

Tools like 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:

<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.

The code:

<!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>

A REAL Front-End challenge for Earth Day.