Step 1: My journey: Learning the basics (A.K.A., Paying for my ignorance)
When I first decided to venture into web development, I sought out a coach. Not just any coach — a tech expert so renowned that even his LinkedIn profile smelled of money. He charged me a fee so high I momentarily considered selling my kidney on the dark web. That’s how my journey into tech development began!
His words still haunt me: “You’re not paying for my knowledge. You’re paying for your ignorance.” Touché, sensei.
During our sessions, he didn’t just teach me — he roasted me. Here’s an excerpt:
Coach: “HTML is like writing a letter to the internet. If your letter has no proper structure, it’ll go straight to the spam folder of life. Start with <html> and close it with </html>. Don’t make me come back here.”
So, what did I learn? HTML, CSS, and JavaScript — the holy trinity of web development. Let me break it down for you:
- HTML (HyperText Markup Language): The skeleton of your website. Think of it as the “what” of your site. What’s going to be there? Text, images, buttons? HTML answers that question.
- CSS (Cascading Style Sheets): The fashion stylist. CSS decides how your website looks. Bold text? Rounded buttons? Background gradient that screams “I’m fancy”? That’s CSS.
- JavaScript: The magician. It makes your site do cool stuff — like changing colors when you hover or showing alerts when users try to mess things up.
Coach’s wisdom: “JavaScript is your genie. But if you don’t word your wishes properly, it’ll crash your site and laugh while doing it.”
My coach drilled these into me with the finesse of a boot camp instructor. Did I cry? Maybe. But I emerged knowing the difference between <div> and <span> like my life depended on it.
Step 2: My first project
Armed with newfound knowledge and a fresh dose of misplaced confidence, I decided to build my first webpage: www.medialord.ng. Ah, the name — bold, borderline cocky, and thoroughly Nigerian. It was supposed to be a portfolio site, but in reality, it was a chaotic experiment featuring neon colors, oversized buttons, and a weird obsession with Comic Sans font.
Here’s what I learned while stumbling my way through:
1. Structuring the site
Creating a basic layout in HTML felt like arranging furniture in a new apartment. I started with a simple structure:
<!DOCTYPE html>
<html>
<head>
<title>Media Lord</title>
</head>
<body>
<header>
<h1>Welcome to Media Lord</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<p>I build things. Sometimes they work.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Coming soon… when I figure out what I’m doing.</p>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Email: contact@medialord.ng</p>
</section>
</main>
<footer>
<p>© 2025 Media Lord. All rights reserved.</p>
</footer>
</body>
</html>
Coach’s take: “Congratulations, you’ve built the IKEA of websites. Basic, functional, but still missing that Allen key called style.”
2. Adding style with CSS
Here’s where the fun (and frustration) began. I wanted my site to pop — and not in the “eye-sore” kind of way. I learned how to:
- Center things. (Do you know how hard it is to center a
<div>in CSS? They should give awards for this.) - Add colors that didn’t make people question their eyesight.
- Use margins and padding without turning my site into a Picasso painting.
Here’s a snippet of my CSS file:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
margin: 0;
padding: 0;
}
header { background-color: #4CAF50; color: white; text-align: center; padding: 1em; }nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; background-color: #333; }nav ul li { margin: 0 1em; }nav ul li a { color: white; text-decoration: none; }
Coach’s commentary: “Your color choices are… bold. But at least it doesn’t look like Windows 95 anymore. Progress.”
3. Making things interactive with JavaScript
This was where my brain nearly exploded. I wanted a simple feature: a button that displayed a welcome message when clicked. Easy, right? After five hours of Googling and crying, I managed this:
document.getElementById("welcomeButton").addEventListener("click", function() {
alert("Welcome to Media Lord! Enjoy your stay.");
});
Coach’s mic drop: “You’ve built a button that talks. Next step: world domination.”
Step 3: Debugging (A.K.A., Why developers drink coffee)
My first encounter with a bug was like meeting a mosquito in the dark — infuriating and hard to locate. My site would break for no apparent reason, and I’d spend hours hunting for a missing semicolon.
Coach’s debugging mantra: “It’s always the semicolon. Or it’s not. Either way, blame the semicolon.”
Pro tip: Always use developer tools in your browser. They’re like having X-ray vision for your code. And when all else fails, Stack Overflow is your best friend (and sometimes your worst enemy).
Step 4: Showcasing my work
After days of hard work, I finally uploaded my masterpiece to the internet. Hosting the site on a free platform initially was fine… until I realized the domain name looked like a bot-generated password: medialord.ng.hostedbyfreehostingplatform101.com. Lesson learned: invest in a real domain and hosting service.
Coach’s final wisdom: “Your site is live. Now brace yourself for relatives asking if you can hack their Facebook accounts.”
Final thoughts on my journey
Web development is a journey filled with trial, error, and the occasional urge to throw your laptop out the window. But it’s also incredibly rewarding. Watching www.medialord.ng go live was like seeing my child take their first steps — if my child was a slightly dysfunctional website held together by duct tape and prayer.
To anyone starting their journey: embrace the chaos, laugh at your mistakes, and remember, every great developer was once a confused newbie staring at a blinking cursor. You’ve got this!
Leave feedback about this