HTML: A Gentle Start to My Dev Journey

After deciding to go down the path of becoming a web developer, the first thing I kept seeing everywhere was: “Start with HTML.” Simple enough, right?

But before jumping into HTML itself, I want to talk about something that many beginners — especially those like me returning to tech after years — can relate to: Code looks like gibberish to me.

The first time I ever saw code, it was like trying to read the language spoken by the bank goblins in Harry Potter. Total gobbledygook.
I had some exposure to C in the first semester of engineering, but to be honest, I memorized it for exams, no real understanding.

Now, cut to 15 years later — after failed attempts at civil services and a long gap from anything IT-related — I’ve chosen a completely different path: to become a software engineer. The decision was big. The emotions, even bigger.

HTML: My Gentle Reintroduction to Code.

HTML felt like a breath of fresh air after years of confusion. It wasn’t as intimidating as I thought. In fact, it was almost soothing — like playing with LEGO blocks. Just tell the browser what you want, and it lays it out obediently.

Sure, I was mildly disappointed to discover that HTML isn’t even a programming language (and neither is CSS). But in a weird way, that made it less scary. It felt more like learning how to talk to the browser, one instruction at a time.

The First Real “I Can Do This” Moment

Forget “Hello World.” I had typed that 15 years ago.
The real magic came when I saw my first form appear in the browser — completely functional.
It wasn’t pretty, but it worked. And that’s when I thought, “Wait... this looks just like those old-school forms on government and bank websites!”
Functional. Efficient. Real.

Screenshot of my first HTML form

Code for this form is at the end of the article.

HTML Forms: The Good, the Frustrating, the Browser-Magical

Forms are where the browser and the user really start to talk. You request data, the user enters it, and the browser helps out in smart ways:

Only allows numbers in number fields

Rejects invalid email formats

Prevents skipping required fields (Gandalf style — You Shall Not Pass!)

Helps group related inputs (like personal info) into neat sections using <fieldset> and label them with <legend>

Even your code editor helps by suggesting attributes. It all felt... manageable.

Then Came the <iframe> Tag… And My First Real Frustration.

I still remember staring at the list of <iframe> attributes like: “gyroscope”, “accelerometer”, “clipboard-write”...
What am I doing? “Are we building a spaceship?”

My brain just gave up.
I took a break.

Came back the next day — and suddenly, those terms made more sense.
Accelerometer ? → Oh, that’s how mobile video orientation works.
Gyroscope ? → Right, switching to full-screen when the device rotates.
It clicked. And I learned something huge that day:
Sometimes it’s not the topic, it’s just a tired brain. Walk away. Recharge, Return.

Meta Viewport: The “Why Is My Layout Broken on Mobile!?” Moment

One tag that caused me many facepalms:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Every tutorial says “just include it.” But I kept messing it up — typing type instead of name, or forgetting parts of the content attribute.
My page would look fine on desktop… but a disaster on mobile view.

Eventually, I made a rule for practice:
Every HTML file I touch from now on will have this tag.

Open Graph Tags: The Extra Effort Behind Shared Links

While exploring meta tags, I came across Open Graph meta tags—the little details that make link previews on social platforms look neat and readable. I thought it was automated, but it actually requires extra effort from the person or team creating the page.

<head>
  <meta property="og:title" content="Job Application Form" />
  <meta property="og:description" content="Apply now for the XYZ position at our company." />
  <meta property="og:image" content="https://xyz.com/logo.jpg" />
  <meta property="og:url" content="https://xyz.com/job-application" />
  <meta property="og:type" content="website" />
</head>

Realizing that made me look at shared links a bit differently — with more respect. Someone had taken the time to add those details, just to make the link more useful or inviting to others.

The Learning Cycle: Struggle → Frustration → Click → Relief

This journey is full of emotional ups and downs. There are times when I feel completely overwhelmed and need to step away for a while. When I return with a clearer mind, suddenly the concept clicks! I feel a wave of relief, joy, and motivation. Then, the cycle starts all over again.

So, is HTML interesting?

Yes.
Is it frustrating at times? Also yes.
But does it make you feel like you’re building something real? Absolutely.

What’s next?

After HTML, I stepped into the CSS world — and let me tell you, it’s a whole different universe.
We’ll get to that in the next post.

I’m still early in my journey — learning, building, and slowly putting things together. If you’re reading this and starting out too, I hope this gave you a little smile, some comfort, and the confidence to keep going.

I’d love to hear from you — whether you’re just starting, getting back into it, or someone who’s been coding for a while and remembers the early days.

Code for My Job Application Form Mini Project

<!DOCTYPE html>
<html>
    <head>
        <title>Job Application Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="This is a job application form for junior code developer in xyz company">
        <meta name="author" content="Xyzabcd">
        <meta property="og:title" content="Job Application Form" />
        <meta property="og:description" content="Apply now for the XYZ position at our company." />
        <meta property="og:image" content="https://xyz.com/logo.jpg" />
        <meta property="og:url" content="https://xyz.com/job-application" />
        <meta property="og:type" content="website" />
    </head>
    <body>
        <header>
            <h1>Apply for a Position - CodeCorp</h1>
            <p>We are looking for a well <strong>educated and proficient</strong> person to work as a <strong>junior developer</strong> in our company
                We as one of the top software company offers good working conditions, a family of employees and also best <em>growth prospects</em>. 
            </p>
        </header>
        <hr>
        <main>
            <fieldset>
                <legend>Form Submission</legend>
            <form action="/submit" method="post">
                <label for="name">Full Name</label>
                    <input type="text" id="name" name="name" placeholder="Full Name" required>
                <label for="email">Email Id</label>
                    <input type="email" id="email" name="email" placeholder="email@xyz.com" required><br>
                <label for="phone_number">Phone Number</label>
                    <input type="tel" id="phone_number" name="phone_number" placeholder="1234567890" required><br>
                <label for="position">Position Applying For</label>
                    <select name="position" id="position">
                        <option value="" disabled>select one</option> 
                        <option value="position 1">Position 1</option>
                        <option value="position 2">Position 2</option>
                        <option value="position 3">Position 3</option>
                    </select><br>
                <label>Upload Resume</label>
                    <input type="file" name="resume"><br>
                <label for="cover_letter">Cover letter</label>
                    <textarea name="cover_letter" placeholder="type here...." id="cover_letter"></textarea><br>
                <label for="terms">I agree to terms and condition</label>
                    <input type="checkbox" id="terms" name="agreed to term" value="yes"><br>
                <button type="submit">Submit</button><br>
                <button type="reset">Reset</button>
            </form>
        </fieldset>
        </main>
        <footer>
            <p>Copyright &copy; 2025</p>
        </footer>

    </body>
</html>

How I Met HTML: From Confusion to Clarity