From English Major to Developer: Why Clean Code Is About Telling a Clear Story

Before I was a developer, I was an English major. I cared about how sentences flowed, how meaning was layered and could sometimes be buried and lost.
Turns out, writing clean code taps right into those same instincts.

🧼 What Clean Code Means to Me

My brain can easily be thrown into a state of chaos, and poorly written code can be very chaotic. For me, clean means:

• Semantic at very least
• Modularized if possible - chunks of code broken in into reusable pieces
• Coherent - const items means very little but const blogPosts has clear meaning.

🍜 Eating Div Soup: Semantic HTML

Have you ever opened a page file only to find hundreds and hundreds of lines of divs — a styled banner, a row of buttons, some images, a form —
<div> after <div> after div-estating <div>?

Worse still, there are no comments, so it's just an abyss of HTML with no real visual landmarks. My brain looks for structure to latch onto. It finds none.

When I was learning to code at Turing, they called this Div Soup — IYKYK — and they were right.

<template>
  <div>
    <div>
      <div>
        <h1
          :style="{
            fontSize: '32px',
            fontWeight: 'bold'
          }"
        >
          Welcome
        </h1>
      </div>
    </div>
    <div>
      <div>
        <div>
          <button
            :style="{
              backgroundColor: 'blue',
              color: 'white',
              padding: '10px'
            }"
          >
            Click Me
          </button>
          <button
            :style="{
              backgroundColor: 'green',
              color: 'white',
              padding: '10px'
            }"
          >
            Or Me
          </button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <form>
            <div>
              <input
                type="text"
                placeholder="Your Name"
                :style="{
                  border: '1px solid gray',
                  padding: '8px'
                }"
              />
            </div>
            <div>
              <input
                type="email"
                placeholder="Your Email"
                :style="{
                  border: '1px solid gray',
                  padding: '8px'
                }"
              />
            </div>
            <div>
              <button
                type="submit"
                :style="{
                  backgroundColor: 'purple',
                  color: 'white'
                }"
              >
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <img
                src="banner1.jpg"
                alt="Banner Image 1"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />
              <img
                src="banner2.jpg"
                alt="Banner Image 2"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />
              <img
                src="banner3.jpg"
                alt="Banner Image 3"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Repeat 300 more lines... -->
  </div>
</template>

🌟 Clean, Neat, Semantic Version:

Let's strip out some of that <div> soup and replace it with some semantic HTML elements!

<template>
  <section class="page-container">
    <header class="page-header">
      <h1>Welcome</h1>
    </header>

    <section class="button-group">
      <button class="primary-button">Click Me</button>
      <button class="secondary-button">Or Me</button>
    </section>

    <section class="form-section">
      <form>
        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" type="text" placeholder="Your Name" />
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <input id="email" type="email" placeholder="Your Email" />
        </div>

        <button type="submit" class="submit-button">Submit</button>
      </form>
    </section>

    <section class="banner-gallery">
      <img src="banner1.jpg" alt="Banner Image 1" />
      <img src="banner2.jpg" alt="Banner Image 2" />
      <img src="banner3.jpg" alt="Banner Image 3" />
    </section>
  </section>
</template>

Ahh, that's nice isn't it? It's much easier to tell what elements are making up this page. It utilizes <section> elements showing how the page is organized. The <input> elements now have a <label>.

We can go further though.

🧹 Modularized, Neatly Organized Version

What if we put the page header code into it's own component file? We could use it on any page!

📄 PageHeader.vue

<template>
  <header class="page-header">
    <h1>Welcome</h1>
  </header>
</template>

Oh, and the buttons, well, heck let's just refactor each piece into a component.

📄 ButtonGroup.vue

<template>
  <section class="button-group">
    <button class="primary-button">Click Me</button>
    <button class="secondary-button">Or Me</button>
  </section>
</template>

📄 FormSection.vue

<template>
  <section class="form-section">
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input id="name" type="text" placeholder="Your Name" />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Your Email" />
      </div>

      <button type="submit" class="submit-button">Submit</button>
    </form>
  </section>
</template>

📄 BannerGallery.vue

<template>
  <section class="banner-gallery">
    <img src="banner1.jpg" alt="Banner Image 1" />
    <img src="banner2.jpg" alt="Banner Image 2" />
    <img src="banner3.jpg" alt="Banner Image 3" />
  </section>
</template>

Now, let's see how the page template would look.

<script setup>
// Import your modular components
import PageHeader from "@/components/PageHeader.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import FormSection from "@/components/FormSection.vue";
import BannerGallery from "@/components/BannerGallery.vue";
</script>

<template>
  <section class="page-container">
    <PageHeader />
    <ButtonGroup />
    <FormSection />
    <BannerGallery />
  </section>
</template>

Is it easier or more difficult to tell what the page is made of? Pretty darn clear, right? We look at the template and tell a quick tale of what makes up the page, at a glance:

• First there's a page header
• Next there's a button group
• Then comes the big bad form section
• And then the banner gallery rallied at the end
• And the page lived happily ever after...

🏗️ Where Most Pages Land

Of course, it doesn't always make sense to create a new component file for every tiny section, especially if it's only used once on a single page.
In reality, most page templates land somewhere between Example 2 (neatly organized semantic HTML) and Example 3 (full modularization).

And that's okay.

🛠️ In the Real World

As a developer, you’re guaranteed to encounter a little (or a lot of) Div Soup chaos at some point.
And most of the time, you won’t be asked to refactor a mess into a clean, modular masterpiece — you’ll be tasked with patching, fixing, and building on top of what's already there.

But — whenever you have the chance to make things a little clearer, a little more structured, or a little more readable for the next person (even if that person is future-you) — it’s worth doing.

Clean code isn't about being perfect.
It's about being thoughtful.

And thoughtful code tells a clearer story — one that's easier to read, easier to build on, and a whole lot nicer to live inside. 🧹📚✨