Starting for Real: My First Proper Week with HTML & CSS

In my last post, I mentioned I was finally ready to tackle web development seriously, starting with the foundation. Well, I’ve just come up for air after a solid week of doing exactly that—diving deep into HTML and CSS.

And it’s… different this time.

In the past, I’d “learn” HTML in an afternoon. I’d use a <div> for everything and make it look right with a messy pile of CSS. My old projects were a graveyard of <div class="header">, <div class="sidebar">, and <div class="main-content-that-holds-the-other-divs">. It worked, but it felt fragile, like a house of cards.

It’s funny, my B.Tech syllabus started with “Unit 1: Introduction to Web System.” I remember skimming the topics: web protocols, browsers, servers, client-side vs. server-side. It all felt so abstract, just theory to memorize for an exam. It’s only now, after this week of coding, that Unit 1 even makes sense. I’m not just using client-side code; I’m finally understanding where it lives in that whole “web system architecture.” The theory is finally connecting with the practice.

---

The “Aha!” Moment: It’s Not What it Looks Like, It’s What it Means

This week, I focused on what my syllabus calls “HTML5 Basics” and “Layout” (Unit 2), but my big takeaway wasn’t a tag. It was the entire philosophy of semantics.

I’m almost embarrassed to admit how big a breakthrough this feels.

Actually using <header>, <nav>, <main>, <article>, and <footer> for their intended purpose is a game-changer. It’s like I’ve stopped just drawing a webpage and started architecting one.

It wasn’t an instant switch. My fingers are trained to type <div>. I had to actively stop myself, look at a block of content, and ask, “What is this really? Is this just a generic box, or is it an independent post? Okay, it’s an <article>. Are these links the main navigation? Okay, they belong in a <nav>.” It’s a new mental muscle I’m building, and it required un-learning years of bad habits.

But the result? My code is suddenly readable. It has meaning. I can see how this matters for accessibility and SEO, but for me, it just feels professional. It’s the first time my code feels “proper.”

---

Taming the Beast: The Box Model

Then I moved on to CSS. I’ve always had a love-hate relationship with it. It felt like I was constantly fighting the browser. Why was there extra space? Why wasn’t this centered? My old solution was usually just to add !important until the page cried uncle.

This week, I sat down and finally learned the Box Model. Properly.

Understanding that every element is a box with content, padding, border, and margin… it clicked. And discovering box-sizing: border-box;? That one line of code feels like a secret I’ve been kept from. The fact that I can set a width: 200px and know it will be 200px, including its padding and border, is revolutionary for me. No more weird math just to get two boxes to sit side-by-side.

To prove this to myself, I did something simple: I rebuilt one of the “post cards” for my TechLessons site. The old one was a div with three more divs inside. The new one? A clean <article>, with an <img> in the header, an <h2> for the title, a <p> for the summary, and a <footer> for the “Read More” link. The CSS was half the length. It just… worked.

---

The Real Foundation is Set

This is exactly what I meant by “learning completely and properly.” My syllabus just lists these as topics, but forcing myself to build a small, clean project has built the foundation I knew I was missing.

It’s not just scattered tutorial knowledge. It’s a solid, single-story house. The foundation is poured, and the walls are up. It’s not interactive, and it doesn’t do anything yet, but it’s strong.

And now I’m looking at Unit 3: JavaScript.

It’s time to add the electricity. But it’s more than that. When I look ahead at the rest of the syllabus—Unit 4 (XML & AJAX), Unit 5 (PHP & MySQL)—I realize this foundation isn’t just for JavaScript. It’s for everything. How can I fetch data with AJAX if my HTML has no meaningful IDs to target? How can I build a PHP template if I don’t understand semantic layout?

This week wasn’t just about Unit 2. It was the key to unlocking the entire rest of the semester.

You can check it out here: TechLessons – Web Development Corner