My Journey as a Web Developer
Lydia Blessing
Introduction
Every journey began with a single step, and mine as a web developer started with a pure curiosity from the very moment I hard the word Web Development. I always admired websites - the design, the interactivity, and the way the could connect people across the world. But I often asked myself: How are these website created.
When I started my journey I didn’t know where it would take me. all I had was curiosity, determination, and a big dream - to create beautiful websites and bring ideas to life.
This blog is about my growth as a developer, the tools I’ve learned (HTML, CSS, Bootstrap, and GitHub), this challenges I faced, and how I overcome them.
The first time I came across the word “web development” I thought it was something super-intelligent people with glasses and endless coffee could do. I never imagined myself sitting in front of laptop, writing lines of code that would eventually turn into something people could actually use.
But here I am today, not a pro yet, but someone who has learned to create, break, fix, and improve. and this is my story. — It’s not just a story but it’s a reminder that anyone can start from scratch and grow step by step.
Starting with HTML - The Foundation (The skeleton of a web)
Just like every beginner I had to meet the grandfather of the web: HTML (HyperText Makrup Language).
HTML was the first language I learned. it felt like learning the alphabet of the web. with HTML, I was able to:
Create headings and paragraphs.
Add image and links.
Build the structure of a webpage.
Here is one of the first thing I ever wrote:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, I am Blessing 👋🏽</h1>
<p>This is my first attempt at becoming a web developer!</p>
</body>
</html>
That little piece of code gave me so much excitement - it was my first step into creating something real. It wasn’t perfect, but it was mine. The first time I opened that file in my Brower and saw my words appear, I felt like a magician.
At first, the angle brackets “<>” scared me. they looked strange, But once I realized that HTML is simply about structuring content, Everything became clear to me.
Understanding the <div> in HTML
When as started learning HTML one of the most confusing but powerful tag I encountered was the <div>
What is a <div>
A <div> (division) is like an invisible box in HTML. It doesn’t display anything fancy on its own, but it helps you to group content together so you can style or arrange it with CSS or control it with JavaScript.
Why do we use <div>?
To group related content (like a product card, navbar, or blog section).
To apply CSS style to a group of element.
To create layout (columns, rows, sections).
To make code organized and easy to read.
Example 1: A Simple Div
<div>
<h1>Hello, I am Blessing 👋🏽</h1>
<p>This is my first attempt at becoming a web developer!</p>
</div>
Here, the <h1> and <p> are grouped together inside one box (the <div>)
Example 2: Div with CSS
<div style="background-color: #f8f8f8; pading: 20px; border-radius:8px;">
<h3> Hello </h3>
<p> A web developer </p>
</div>
With CSS added, the <div> become a nice styled card.
Real-life Analogy
imagine your web page as a house.
<div>is like a room (kitchen, bedroom, living room).inside each room, you can have furniture (like text, image, or buttons).
Pro Tips
- Use classes and IDs with
<div>to apply CSS easily.
<div id="header"></div>
<div class="card" </div>>
So whenever I build something with HTML, <div> is always there, helping me organize and structure my work neatly. Without <div>, styling with CSS would be big headache.
Discovering CSS (Cascading Style Sheets) - Adding Colors to my world
Once I understood what HTML was all about I quickly realized that something was missing. My Website was looking too plain. That’s when I meet CSS. If HTML is the Skeleton, CSS is the paint, clothes, and decoration.
I learned and understood that CSS (Cascading Style Sheets) is all about design: colors, fonts layout, and everything that makes a website look lively.
.h1{
text-align: center;
color: #aaa;
}
.p{
font-size: 18px;
color: #fff;
}
This small code changed my site from boring black and white to something that look closer to a brand.
With CSS, my plain HTML Page Started to look alive. it felt like putting clothes on a skeleton, giving personality to my website.
It wasn’t easy. I struggled with error, sometimes spending a whole evening just to fix a single bug. But each solved problem gave me confidence.
Bootstrap — Building faster and smarter
As my journey continued, I wanted my website to look professional and work well on all devices. That was when I discovered Bootstrap — a CSS framework that helps developers build beautiful website quickly.
when I discover Bootstrap, everything changed. Suddenly I didn’t I have to style every button or navbar from scratch. with just a few classes, my websites looked clean and professional.
I loved the system and how it made layout responsive without much stress. At the same time, I learned the importance of Balance: Bootstrap is powerful, but understanding pure CSS first gave me the foundation to use it effectively. And honestly, it felt like a shortcut to professionalism.
With just a few classes, my websites, started looking neat and responsive. I cloud quickly create:
A navigation bar (.navbar) that actually worked on desktop and mobile.
A grid system that aligned my content perfectly using .row and .col
Buttons that looked polished with just bnt bnt-primary.
It was like having a box of lego blocks ready to snap together.
For example: I built a navigation bar for Glowzi Hair Empire.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Glowzi Hair Empire</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
Bootstrap is like having a designer friend who already knows how to make things look good and responsive.
Just like that, I had a professional-looking navbar without writing too much CSS. It boosted my confidence because my site started looking like the real thing.
And one thing I love most about Bootstrap was how responsive it made my website look.
My First Project — GlowziHairEmpire
One of my proudest moment parts of my web development journey so far is creating my first project — GlowziHairEmpire.
For the first time, I wasn’t just learning code . I was building something real.
Inspiration
I’ve always been passionate about beauty and hair styling, and I wanted to build something that could showcase this passion in a digital way. My goals was simple: Create platform where people can explore different hair products (like Deepwave Weaveon, Curly style, Bounce hair) etc…. Learn about them and even get connected to purchase.
Tools I Used:
HTML: To structure the page (Home, About, Contact, Blog, Privacy, Payment).
CSS: TO style the site with colors layout and fonts.
Bootstrap: To make the website responsive so it looks good on both mobile and desktop.
GitHub: TO push and host my project Online.
Pages I Built
Home Page: A Welcoming page showcasing GlowziHairEmpire.
About Us Page: Sharing the brand story.
Contact Page: With WhatsApp, Instagram, TikTok, and Facebook.
Blog Page: Documenting hair care, product tip.
Privacy Page: Protecting user’s information.
Payment Page: Experimenting with paystack integration for online payment.
Lessons Learned
How to properly use HTML tags like
<div>,<header>,<footer>, and<section>How CSS can transform a plain website into something styling and beautiful.
How Bootstrap can save time with pre-designed components like navbars and forms.
How to use Git to GitHub to save track and publish my work online.
Enter GitHub — Sharing my Work
What’s the point of building if no one can see it? That’s when I discover GitHub.
At first, GitHub felt intimidating. Words like repositories, branches, commits sounded too technical. But once I understood the basics, I realized it’s just about saving your work, keeping history, and sharing it with the world.
# git inside your project folder so that it can track change
git init
# Add all your files
git add .
#commit with a message
git commit -m "first commit to my first project"
# setting the branch
git branch -M main
#link your project with a remote repository
git remote add origin https://github.com/username/repo.git
# push to GitHub
git push origin main
the first time I saw my files appear on GitHub, I felt like I had joined a global community of creators. My work wasn’t just sitting on my laptop anymore — it was out there.
I felt proud. My work was online, my progress was visible, and felt like a real developer.
It felt empowering to know that my projects were stored online, safe and accessible to the world.
What I’ve learned so Far
HTML gives website their structure
CSS adds style and beauty
Bootstrap makes websites responsive and professional
GitHub helps me store, share, and collaborate on projects
The challenges I Faced
My journey wasn’t smooth. Some of the challenges I faced was:
Understanding errors
Spending hours fixing a single missing semicolon.
Pushing to GitHub.
But I Overcome Them By:
Breaking problem into smaller parts.
Asking for help in online communities.
Celebrating small wins, no matter how ting.
Each challenge shaped me, taught me patience, and built my confidence.
The Journey Continues
I’ve come a long way from writing <h1> Hello World</h1>. Now I can build multi-page website with HTML, CSS, and Bootstrap, and GitHub for anyone to see.
But I know the journey doesn’t end here. Next on my list is JavaScript (to make my sites interactive), and eventually diving into backend development.
My journey is still going. Every day I learn something new. If there’s one thing I’ve learned, it’s that Web development is not about being perfect from the start. It’s about showing up every day, practicing, and improving little by little
I started with confusion, but my teacher motivated me, and today I can say I’ve built something meaningful. And if I can do it anyone can.
Looking Back
Now, when I look back and see how far I’ve come I see more than just lines of code. I see persistence, late night, small victories and lesson learned.
Web development has taught me more than how to build websites — it has taught me resilience, creativity, and problem-solving.
And the journey is just beginning.
Final Words
If you’re reading this and thinking about starting your journey, here’s my advice:
If you’re also starting your journey, remember this:
Don’t wait to be “perfect” before building. Start now.
Google is your best friend.
Mistakes are not failures — They are lessons.
Share your progress, because every step counts.
Every challenge you face will make you stronger
🔥 My Projects
Building websites has been a fun and challenging journey.
Here are some of the works I’ve been able to create so far:
🌍 https://github.com/Codewithblessing – where I document all my learning progress.
💻 https://github.com/Codewithblessing/firstliveproject – my first real website project built with HTML, CSS, and Bootstrap.
Subscribe to my newsletter
Read articles from Lydia Blessing directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by