Creating a Digital Business Card: A Funny Story About My First HTML Project

Posted on August 30, 2025 by  with No comments

 


 

There’s one moment that still makes me laugh whenever I think about it: the very first time I learned HTML.
Imagine this—I used to open my browser only for watching cat videos on YouTube, and suddenly one day I thought:
"Hey, it would be cool if I could build my own website."

Now, you might think my first project was an online shop, or maybe a personal blog. Nope.
It was… a digital business card.

Sounds super simple, right? But trust me, behind that tiny digital card was a whole rollercoaster of drama.

Why a Digital Business Card?

At that time, people often asked for my contact. Sometimes I gave my WhatsApp number, sometimes my email, and sometimes I scribbled it on a piece of paper that always disappeared in my pocket.
Then I thought:
"Why not just make a digital business card? One link, done."

So, I fired up my laptop, opened VS Code, and typed something I didn’t even understand yet:

<!DOCTYPE html>
<html>
  <head>
    <title>Digital Business Card</title>
  </head>
  <body>
    <h1>Hello, I’m Budi</h1>
    <p>A coffee addict who happens to enjoy coding.</p>
  </body>
</html>

At that moment, I felt like I had just unlocked a secret hacker code. Writing <h1> already made me feel like one of those guys in Hollywood hacker movies.

The Profile Picture Drama

Of course, a business card needs a profile picture.
The problem was, I didn’t have a proper photo. My ID card picture? Nope—it looked like I had just been interrogated by the police.
So I picked the least embarrassing photo from my phone: me holding a coffee cup, smiling awkwardly.

Here’s the code:

<img src="budi-photo.jpg" alt="Budi smiling with a coffee" width="200">

But since I placed the photo file in the wrong folder, what appeared on my browser was not my face, but the infamous broken image icon.
I panicked and immediately googled: “why image not showing in HTML?”

Turned out the solution was ridiculously simple: I had saved budi-photo.jpg in the wrong folder. 

When the photo finally showed up, I was grinning ear to ear.
Sure, it was just my face and the words “Hello, I’m Budi”, but it felt like I had just launched a billion-dollar startup.

Adding Contact Information

After the name and photo, I needed to add my contact details.
At first, I wrote:

<p>Email: budi@example.com</p>
<p>WhatsApp: +62 812 3456 7890</p>

Then I thought: “Meh, it’s just plain text. Wouldn’t it be cooler if people could click on it?”

So I learned about <a> tags:

<a href="mailto:budi@example.com">Email Me</a><br>
<a href="https://wa.me/6281234567890">WhatsApp Chat</a>

When I clicked the WhatsApp link and my app opened automatically, I literally shouted:
"THIS IS SO COOL!!!"

Sure, it’s a normal feature—but for a beginner like me, it felt magical.

The Silly Mistakes I’ll Never Forget

Learning HTML is full of funny mistakes. One time, I wanted to add my Instagram link.
So I wrote this:

<a href="htttp://instagram.com/budi_cool">Instagram</a>

Look closely: there are three ‘t’s in http.
Every time I clicked it, I got a “Page Not Found” error.

For two hours I thought: “Wow, maybe Instagram is down?”
Nope. Just a typo.

My First Digital Business Card

After wrestling with <h1>, <p>, <img>, and <a>, I finally had my first digital business card. Here’s what it looked like:

<!DOCTYPE html>
<html>
  <head>
    <title>Budi’s Digital Business Card</title>
  </head>
  <body>
    <h1>Hello, I’m Budi</h1>
    <img src="budi-photo.jpg" alt="Budi's photo" width="200">
    <p>A coffee warrior who loves HTML coding.</p>
    <a href="mailto:budi@example.com">Email Me</a><br>
    <a href="https://wa.me/6281234567890">WhatsApp Chat</a><br>
    <a href="https://instagram.com/budi_cool">Instagram</a>
  </body>
</html>

When I opened it in my browser, the page was super basic.
But in my heart, it felt like I had just built the next Facebook.

What I Learned

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

  1. HTML is logical.
    <h1> for titles, <p> for paragraphs, <img> for images, <a> for links.
    Simple, but powerful.

  2. Mistakes are the best teacher.
    From the extra t in http, to misplaced images, to forgotten closing tags—every mistake made me understand more.

  3. Small projects can be exciting.
    Don’t underestimate a “digital business card.”
    It was this little project that made me fall in love with HTML, CSS, and eventually JavaScript.

Why You Should Try It Too

If you’re just starting with HTML, I highly recommend creating your own digital business card.
Why?

  • It’s easy. You only need 4 basic tags: <h1>, <p>, <img>, <a>.

  • It’s useful. You can actually use it for networking or personal branding.

  • It’s fun. There’s this special joy when you open your very own HTML file for the first time.

Now, whenever I share the link to my digital business card, I can’t help but smile. Not because it looks fancy, but because behind that simple page was a journey filled with coffee, mistakes, and funny typos.

And honestly, this tiny project opened the door to a much bigger world of web development.
Who knows? Starting with a digital business card, you might go on to build your portfolio, a blog, or even a real startup one day.

So… what are you waiting for?
Open your laptop, type <h1>Hello, I’m…</h1>, and build your first digital business card.
Maybe years from now, you’ll look back and laugh about it too just like I’m doing now. 


0 Comments:

Post a Comment

Subscribe to: Post Comments (Atom)