Creating an Online Diary ~ FUN PROGRAMMING

I want to share something that still makes me smile every time I think about it. Back when I first started learning HTML, I didn’t immediately build some cool website with animations, a professional portfolio, or an online store.

Nope. What I actually made was… an online diary.

Yes, you read that right. A diary the kind people usually write in with a small lock and a cute key I decided to move it onto a computer screen.
Why? Because I’m forgetful. Honestly, I lost my physical diaries way more often than I ever lost a flash drive.

Why a Diary?

At that time, I was really into journaling. I’d write about anything:

“Today I met a super friendly street vendor selling meatballs.”
“The neighbor’s cat took a nap on the hood of my motorbike.”

The problem was, keeping a diary on paper was… well, a hassle:

My pens always ran out of ink.
Sometimes I spilled coffee on the pages.
And the worst thing? When someone sneaked a look at my entries.

So one day, I thought:
“If I make an online diary, no one can peek unless I let them.”

And that’s when I was introduced to three new best friends: <h2>, <p>, and <br>.

My First Encounter with `<h2>`

I already knew <h1> was for the main title. But since I wanted each day to have its own little “headline,” I discovered <h2>.

I wrote:

<h2>Monday, March 3, 2025</h2>

When I opened it in my browser, the text appeared bigger, but not as giant as <h1>.
I thought to myself:
“Perfect! This is just right for my daily diary entries.”

It felt like I had found the digital key to my diary lock.

`<p>`: The Container for My Thoughts

If <h2> was the title, then the diary content clearly needed <p>.

So I wrote:

<p>Today I overslept again. My alarm went off, but somehow dreaming about meeting a celebrity felt way better than facing reality. In the end, I was late for work. Luckily, my boss is also usually late.</p>

When I opened it in the browser, the text looked neat in one paragraph.
I thought:
“Wow, this is just like a real diary. Except nobody can doodle on the margins.”

`<br>`: The Line-Break Lifesaver

The trouble began when I wanted to write longer entries but with line breaks.

At first, I did this:

<p>It rained really hard today. I almost got drenched on the way home. Good thing I had my raincoat.</p>
<p>When I got back, the electricity was out. So I sat in the dark eating instant noodles.</p>

But having too many <p> tags felt clunky. Then I discovered <br>, which creates line breaks inside a paragraph.

<p>
It rained really hard today. I almost got drenched on the way home. Good thing I had my raincoat.<br>
When I got back, the electricity was out. So I sat in the dark eating instant noodles.
</p>

And it worked! My text had nice spacing. I actually clapped for myself in my room.

Funny Little Fails While Writing My Diary

Learning to make an online diary was full of funny accidents. Some I’ll never forget:

Forgetting to close <p> tags
I once wrote a super long entry but didn’t close it with </p>.
The result? All the text stuck together like a discount banner at a supermarket.
Reading my diary gave me a headache.
Overusing <br>
I was so excited about <br> that I used it everywhere.
The spacing between lines looked like my diary had been rained on big awkward gaps everywhere.
Using <h1> for every entry
I thought it’d look “epic” if every diary entry used <h1>.
But when I scrolled, it felt like I was reading a newspaper: giant headlines with tiny body text.
Not exactly pleasant for a diary.

My First “Proud” Diary

After messing around for a while, I finally finished my very first online diary. It looked something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Budi’s Online Diary</title>
  </head>
  <body>
    <h1>My Online Diary</h1>
    
    <h2>Monday, March 3, 2025</h2>
    <p>
      Today I overslept again. My alarm went off, but somehow I chose dreaming instead.<br>
      Luckily, my boss showed up late too—so I was safe.
    </p>
    
    <h2>Tuesday, March 4, 2025</h2>
    <p>
      It rained really hard today. I almost got drenched on the way home.<br>
      When I got back, the power was out. So I ate instant noodles in the dark.
    </p>
  </body>
</html>

When I opened it in my browser, I couldn’t stop smiling.
It was so simple, but it felt like I had my own private blog that no one else could read (unless I shared the link).

What I Learned

From this little project, I realized a few important things:

HTML is easier to understand if you have a purpose.
Learning <h2>, <p>, and <br> was fun because I used them for something real: a diary.
Mistakes are part of the process.
Typos, forgetting to close tags, overusing <br> all of it helped me learn faster.
Small projects can spark motivation.
From this diary, I got excited to make more: recipe pages, photo galleries, even a portfolio website.

Why You Should Try It Too

If you’re just starting out with HTML, try making your own online diary. Why?

It’s simple. You only need 3 basic tags: <h2>, <p>, <br>.
It’s useful. You get to practice coding while also journaling.
It’s fun. There’s something satisfying about reading your own digital diary.

Now, every time I open that online diary file, I still laugh.
Not just because of the funny entries (like the neighbor’s cat napping on my motorbike), but because I remember how proud I felt when I first got it working.

Who would’ve thought that such a “silly” project could be the spark for bigger ones?
When I think about it, it all started with <h2>, <p>, and <br> three little tags that seemed so trivial.

So if you’re learning HTML, don’t wait to build something complicated.
Start small make your own online diary. Who knows? That little project might be the doorway to a whole new world of web development.

And maybe, a few years from now, you’ll tell the same story I’m telling now, with a smile:
“I first learned HTML by… making an online diary.”

FUN PROGRAMMING

Sponsored

🔔 Your Support Means a Lot!