Sunday, July 12, 2026

My Journey From Beginner to Building My Own Website

WEBZONEBW

Developer Interactive Hub

Welcome to my digital workspace—where learning, building, experimenting, and sharing come together. Explore the Zero to Website course, discover live projects, follow weekly development updates, challenge yourself with interactive activities, and see how each idea evolves into a real-world solution.

🚀 Start Learning 📰 Weekly Updates 💻 View Projects

↓

📊 Mission Dashboard

Track the progress of the WebZoneBW project, explore new content, and follow the development journey in one place.

📚

Articles

Published learning articles covering websites, hosting, domains, and portfolio development.

💻

Projects

Live projects including WebZoneBW and the Zero to Website learning platform.

📰

Weekly Posts

Fresh weekly updates with tutorials, project logs, and development insights.

🟢

Status

ONLINE

The website is live, monitored, and continuously updated with new features.

🚀 Zero to Website Progress

72% Complete

The foundation of the project is complete. Current work focuses on redesigning the learning hub, publishing weekly blog content, improving user interaction, and adding engaging developer activities.

🎯 Current Mission

Transform WebZoneBW1107 into an interactive developer hub where visitors can explore articles, complete daily challenges, discover live projects, and follow a real-world web development journey.

📢 Latest Updates

✅ Custom domain successfully connected.
✅ Website deployed and publicly accessible.
✅ Google Analytics integrated.
🚧 Interactive Developer Hub redesign in progress.
🚀 Weekly blog system launching soon.

⏰ Developer Workspace Time

00:00:00

Loading date...

🌐 Website Status

ONLINE

WebZoneBW Developer Hub is active and available.

🚀 Current Development

Building an interactive learning environment combining:

• Web Development
• Portfolio Projects
• Weekly Learning Updates

📅 Latest Update

20 July 2026

Dashboard redesign and interactive hub development started.

🎯 Next Goal

Add daily engagement features:

Quote Cards
Challenges
Mini Activities

🔥 Today's Developer Activity

💡 Learn Something New

🧩 Solve A Challenge

📝 Publish Progress

🚀 Build Something Better

🚀 Explore WebZoneBW

📊 Dashboard 📚 Articles 💻 Projects 🎮 Activities

🌐

Digital Identity

Building a professional online presence through projects, articles, and experiments.

🧠

Learning Journey

Documenting the process of learning websites, hosting, domains, and development.

🚀

Future Vision

Creating an interactive developer hub where visitors can learn and explore.

🎮 Daily Developer Experience

A small activity every day to learn, think, and improve your web development skills.

💬

Quote Of The Day

"Every professional website starts with a simple idea and one line of code."

🧩

Question Of The Day

What does HTML mainly control in a website?

A) Website Design

B) Website Structure

C) Website Hosting

🎯

30 Second Challenge

Can you identify the mistake?


<h1>

Hello World

<h1>

🏆 Developer Progress

⭐

Current Score

Experience Points

🔥

Daily Streak

Days Active

🎖

Current Badge

Beginner Explorer

Journey Progress

0% Complete

🎮 Mini Developer Activities

Small challenges to improve your web thinking.

🧩 HTML Detective

Which tag creates the biggest heading?

💻 Guess The Technology

I create website styling. Who am I?

🐞 Find The Bug


<img src="logo.png">

Is this code correct?

🧠 Your Learning Memory

Checking visitor history...

📅 Today's Developer Mission

💬 Daily Thought

Loading quote...

🧩 Daily Question

Loading question...

🎯 Daily Challenge

Loading challenge...

🌐 Explore WEBZONEBW

From learning experiments to professional projects.

📖 Weekly Blog

Follow my weekly learning updates, website experiments, technology notes, and development journey.

Read Updates →

🚀 Zero To Website

A step-by-step learning journey explaining how websites work, from beginner concepts to deployment.

Start Learning →

🛠 Projects

Explore website projects, coding experiments, tools, and practical implementations.

View Projects →

👨‍💻 Professional Profile

Learn about my skills, experience, technical background, and career journey.

View Portfolio →

⭐ Why This Platform Exists

WEBZONEBW is not only a portfolio. It is a living demonstration of learning, problem solving, creativity, and continuous improvement.

Every article, project, and experiment represents practical experience.

🌐 Choose Your Experience

Every visitor has a different purpose. Select your journey.

💼 Recruiter Dashboard

A quick professional overview of skills, projects, and experience.

👨‍💻 Profile

IT Support | Systems Integration | Web Development Learning Journey

🛠 Technical Skills

HTML • CSS • JavaScript • GitHub • Hosting • Cloud Concepts • IT Support

🚀 Projects

Portfolio websites, learning platforms, experiments, and digital solutions.

View Projects

📄 Resume

Professional background and career experience.

Open Resume

🎮 Explorer Dashboard

Discover, learn, and interact with WEBZONEBW1107.

💬 Daily Mission

Complete today's question and challenge.

Start Mission

🎯 Activities

Play small developer challenges and improve your skills.

Play Now

📖 Articles

Read website development stories and experiments.

Read Blog

🚀 Zero To Website

Follow the complete journey of building websites.

Explore Course

🚀 Featured Projects

Real work, experiments, and development journey.

🌐 WEBZONEBW

Professional portfolio website showing skills, projects, and technical journey.

HTML CSS JavaScript
Visit Website

🚀 Zero To Website

Learning project explaining how websites work from beginner concepts to deployment.

Web Development Learning

💻 GitHub Projects

Code repositories, experiments, and development practice.

Git Open Source
View Code

🧠 Technical Profile

Frontend

HTML
CSS
JavaScript
Responsive Design

Development Tools

GitHub
VS Code
Browser Developer Tools
Deployment Platforms

IT Background

IT Support
System Integration
Hardware & Software Troubleshooting

📅 Latest Activity

July 2026

✅ Published Web Development Learning Articles

✅ Connected Custom Domain

✅ Improved Portfolio Experience

✅ Added Interactive Learning Features

📊 Developer Dashboard

Tracking the WEBZONEBW journey

0

Visitors Explored

10+

Articles Published

7

Projects / Experiments

0

Learning Days

🏆 Achievements

Website Builder

Blog Creator

Problem Solver

Continuous Learner

🤖 Learning Assistant

Choose your goal and discover your personalized journey.

What describes you?

💼 Career Mode

I want to showcase my skills professionally.

🌱 Beginner Mode

I want to learn how websites work.

👨‍💻 Developer Mode

I want to improve coding skills.

🎮 Explorer Mode

I want interactive activities.

🌎 Community Space

Your feedback helps improve WEBZONEBW1107

💬 How was your experience?

📝 Share Feedback

💡 Suggest Next Topic

📈 Growth Dashboard

Understanding how WEBZONEBW1107 is growing.

0

Hub Visits

0

Activities Completed

0

Feedback Given

0

Returning Visits

🕒 Visitor Journey

Loading activity...

Understanding Shareable Links

🔗 Understanding Shareable Links

Learn what a shareable link is, how it works and why it has become an essential tool for students, professionals and job seekers.

📖 Article Information

Category: Cloud Storage
Reading Time: 6 Minutes
Difficulty: Beginner

Have You Ever Shared a Link?

"I've copied the Google Drive link... but what exactly am I sending?"

After uploading your resume to Google Drive, the next step was copying a shareable link. Most people simply paste the link into an email or a LinkedIn message without giving it much thought. But have you ever wondered what that link actually does?

A shareable link is simply a web address that allows other people to access a file you've chosen to share. Instead of sending the actual file every time, you send a link that points to its location in cloud storage.

When someone clicks that link, Google Drive checks your sharing permissions and decides whether the person can view, comment on or edit the file.

Why Use a Shareable Link?

Imagine applying for ten different jobs. Without a shareable link, you would probably attach your resume ten separate times. If you later update your resume, you would need to send the new version to everyone again.

A shareable link makes this much easier. Instead of repeatedly uploading the same document, you maintain one online copy and simply share its link whenever someone requests it.

This saves time, keeps your documents organized and ensures you're always sharing the most up-to-date version of your resume.

💡 Think About It

A shareable link doesn't create another copy of your file. It simply gives people permission to access the original file stored in your cloud account.

Where Are Shareable Links Used?

Shareable links are used every day in both education and the workplace. They're one of the easiest ways to provide quick access to online files without sending large attachments.

📄 Sharing resumes with recruiters.
📚 Submitting college assignments.
📸 Sharing photos and videos.
📁 Collaborating on work documents.
🌐 Adding downloadable files to a portfolio website.

As cloud storage has become more common, shareable links have become an important part of modern digital communication.

📌 Coming Up Next

In Part 2, we'll explore the different sharing permissions available in Google Drive and learn how to choose the correct settings before sending your link.

🔒 Understanding Sharing Permissions

Creating a shareable link is only half of the process. Before sending that link to anyone, it's important to understand who can access your file and what they are allowed to do.

Every file stored in Google Drive has sharing permissions. These permissions help protect your documents by controlling who can open, edit or download them.

Choosing the correct permission is especially important when you're sharing professional documents like resumes, certificates or project reports.

👥 Different Types of Access

Google Drive offers several permission levels depending on how you want to share your file. Each one gives a different level of access.

Restricted – Only people you specifically invite can open the file.
Anyone with the Link – Anyone who has the link can access the file.
Viewer – People can only view the document.
Commenter – People can leave comments but cannot edit the file.
Editor – People can edit, delete or make changes to the document.

Understanding these options helps you decide the safest way to share different types of files.

📄 Which Permission Should You Choose for Your Resume?

When sharing your resume with recruiters, the safest option is usually:

Anyone with the Link

Permission: Viewer

This allows recruiters to open and read your resume without making changes to the original document.

Giving editing access is generally unnecessary for resumes because it could allow someone else to accidentally modify or remove important information.

💡 Professional Tip

Always check your sharing permissions before sending a resume. A link with the wrong permission may prevent recruiters from viewing your document, which could delay or even cost you a job opportunity.

🌍 Real-World Examples

Different situations require different sharing permissions. Here are a few common examples:

📄 Resume → Anyone with the Link (Viewer)
📚 Assignment for a Teacher → Restricted or Viewer
👨‍💼 Team Project → Editor
📸 Family Photo Album → Anyone with the Link (Viewer)
📝 Shared Notes → Commenter or Editor

Choosing the correct permission helps protect your files while making collaboration simple and secure.

📌 Coming Up Next

In Part 3, we'll learn how to test your shareable link, avoid common mistakes and use shareable links professionally on LinkedIn, resumes and your personal portfolio.

✅ Test Your Shareable Link Before Sending It

Creating a shareable link is only useful if other people can actually open it. Before sending your resume to recruiters, teachers or employers, always test the link yourself.

One simple way to do this is by opening an Incognito (Private) browser window. Paste your shareable link into the address bar and press Enter. If the file opens without asking you to request permission, your sharing settings are working correctly.

If you see a message such as "Access Denied" or "Request Access", return to Google Drive and review your sharing permissions.

⚠️ Common Mistakes to Avoid

Many beginners make small mistakes when sharing files online. Fortunately, they're easy to avoid once you know what to look for.

❌ Sending a Restricted link instead of a shared link.
❌ Forgetting to test the link before sharing it.
❌ Uploading multiple versions of the same resume.
❌ Allowing editing access when only viewing is required.
❌ Deleting the original file after sharing the link.

Taking a few extra moments to check your settings can prevent unnecessary problems and present a more professional image.

💼 Using Shareable Links Professionally

Once you've created a working shareable link, you can use it across many professional platforms. Instead of attaching the same file repeatedly, you simply share one trusted link.

🌐 Personal Portfolio Website
💼 LinkedIn Profile
📧 Job Application Emails
📄 Digital Resume
📱 QR Codes on Business Cards

Keeping one professional link makes updating your resume much easier and ensures you're always sharing the latest version.

💡 Key Takeaway

A shareable link is more than just a web address. It's a simple and professional way to give people secure access to your files without sending large email attachments every time. Used correctly, it saves time, keeps your documents organized and makes sharing information much more efficient.

Final Thoughts

Throughout this article, we've learned that a shareable link is not another copy of your file—it simply points people to the original document stored in the cloud. Understanding how sharing permissions work and testing your links before sending them are small habits that can make a big difference. Whether you're applying for jobs, collaborating on projects or building your online presence, knowing how to use shareable links is an important digital skill.

📖 Continue Reading

🌐 From Google Drive to Your Personal Portfolio

Now that you know how to create and manage professional shareable links, it's time to put them to work. In the next article, we'll connect your Google Drive resume to your personal portfolio website, making it easy for recruiters to view your resume with a single click.

Saturday, July 11, 2026

Part 3: Connecting Domain and Making Your Website Live

🌐 Zero to Website

Article 10 - Part 3

Connecting Domains and Making Your Website Live

📖 Beginner Friendly ⏱ 15 Minute Read 🏷 Hosting • DNS • HTTPS

In the previous lesson, we successfully uploaded our website files to a hosting platform. Now it's time to connect everything together by adding a professional domain name.

💡 Learning Objective

By the end of this lesson you'll understand how domains, hosting, DNS and HTTPS work together to publish a website.

📌 Quick Remember

🌐

Domain

Your website address.

🖥

Hosting

Stores website files.

📡

DNS

Connects domain with hosting.

🔒

HTTPS

Protects communication.

💡 Did You Know?

Websites using HTTPS are considered more trustworthy and modern browsers warn users before opening websites without SSL security.

⚠ Common Beginner Mistake

Purchasing a domain does NOT automatically give you hosting. A domain only points visitors to the server where your website files are stored.

🎉 Lesson Complete

Congratulations! You now understand the complete process of taking a website from your computer to the public internet.

✅ Domain Names
✅ Hosting
✅ DNS
✅ HTTPS
✅ Website Launch

🚀 Continue Learning

In Article 11 we'll begin protecting our websites from security threats.

🔒 Website Security Basics
🌐 HTTPS & SSL Certificates
🛡 Protecting Website Files
🔄 Website Maintenance

Part 2: Free Hosting Platforms and Uploading Your Website

```html

🌐 Zero to Website

Article 10 • Part 2

Free Hosting Platforms and Uploading Your Website

Moving Your Website Files From Your Computer to the Internet

📖 Beginner Friendly ⏱ 15 Minute Read 🌍 Web Hosting 🚀 Deployment

🎯 Learning Objectives

By the end of this lesson you will understand:

✔ What web hosting is
✔ Why websites need hosting
✔ Popular free hosting platforms
✔ How deployment works
✔ How your website becomes accessible online

In Part 1, we learned that website deployment is the process of moving a website from your local computer to a live web server.

Once your website is complete, it needs a permanent place where visitors can access it at any time. This is where web hosting comes into the picture.

Fortunately, you don't need to purchase an expensive server to begin your web development journey. Several reliable hosting providers allow beginners to publish static websites completely free of charge.

🖥 What is a Hosting Platform?

A hosting platform is a service that stores your website files on internet servers and delivers them whenever someone visits your website.

Think of hosting as renting space on a computer that stays online 24 hours a day, 7 days a week.

Without hosting, your website would only exist on your own computer and nobody else would be able to visit it.

💡 Simple Example

Your computer is like writing a book at home. A hosting platform is like placing that book inside a public library where everyone can read it.

Before Deployment


💻 Your Computer

│

├── index.html

├── style.css

└── script.js

After Deployment


☁ Hosting Server

│

├── index.html

├── style.css

└── script.js

        │

        ▼

🌍 Accessible Worldwide

🌐 Popular Free Hosting Platforms

Below are some of the most popular free hosting platforms used by students, developers and professionals.

Hosting Platform	Best For
GitHub Pages	Portfolio websites, documentation and static HTML projects.
Netlify	Simple deployment with drag-and-drop support.
Vercel	Modern JavaScript and frontend applications.
Cloudflare Pages	Fast global hosting with CDN performance.

``` ```html

📤 How Uploading a Website Works

Uploading a website simply means transferring your website files from your computer to a hosting server. Once uploaded, visitors can access your website using a web browser from anywhere in the world.

🚀 Deployment Workflow

Create your HTML, CSS and JavaScript files.
Test the website on your local computer.
Create an account on a hosting platform.
Upload or connect your project repository.
Receive your public website address.
Share your website with the world.


💻 Local Computer

        │

        ▼

📤 Upload Files

        │

        ▼

☁ Hosting Platform

        │

        ▼

🌍 Public Website

📁 Example: Uploading a Portfolio Website

Imagine you have completed your personal portfolio website. Before deployment, your project folder may look like this.


Portfolio Website

│

├── index.html

├── assets

│   ├── images

│   ├── icons

│   └── resume.pdf

│

├── css

│   └── style.css

│

└── js

    └── script.js

When this folder is uploaded, every file becomes available through your hosting platform. Whenever someone visits your website, the server automatically delivers the correct HTML, CSS, JavaScript and image files.

⚖ Static Website vs Dynamic Website

Not every website works in the same way. Some websites only display files, while others generate content using databases and server-side programming.

Static Website	Dynamic Website
Uses HTML, CSS and JavaScript.	Uses databases and backend programming.
Loads very quickly.	Content changes dynamically.
Easy and inexpensive to host.	Requires server-side infrastructure.
Portfolio, Resume, Landing Page	Online Store, Banking, Social Media

💡 Did You Know?

GitHub Pages hosts millions of websites around the world and is one of the most popular platforms for developer portfolios, documentation websites and open source projects.

⚠ Common Beginner Mistakes

Uploading the wrong project folder.
Forgetting the index.html file.
Broken image paths.
Incorrect CSS or JavaScript links.
Not testing the live website after deployment.

🌍 Real-World Connection

Professional developers follow almost exactly the same workflow used in this lesson.

Plan the project.
Develop the website.
Store source code using Git.
Deploy using a hosting provider.
Share the website with users.
Maintain and improve the website over time.

🏆 WebZoneBW Example

The WebZoneBW website follows this same deployment process. The project was developed locally, uploaded to GitHub Pages, connected to a custom domain and secured with HTTPS before becoming publicly available.

🎉 Lesson Complete

Congratulations! You now understand how a website moves from your computer to a hosting platform and becomes accessible to anyone on the internet.

✅ What hosting is
✅ Why hosting is required
✅ Popular free hosting platforms
✅ Website deployment workflow
✅ Static vs Dynamic websites
✅ Common deployment mistakes

🚀 Continue Learning

In Article 10 – Part 3, we'll complete the deployment journey by connecting a custom domain and making your website accessible through a professional web address.

🌐 Connecting a Custom Domain
📡 Understanding DNS
🔒 HTTPS & SSL Certificates
🚀 Publishing Your Website Live

⬅ Article 10 • Part 1 🏠 Course Home Article 10 • Part 3 ➜

```

Publishing Your First Website: From Local Files to the Internet

Article 10

Publishing Your First Website: From Local Files to the Internet

Understanding How a Website Becomes Available Worldwide

In the previous articles, we learned how websites work behind the scenes. We understood the difference between websites and cloud storage, how hosting works, and how browsers communicate with servers.

Now it is time to answer the most important question:

"How do we take a website from our computer and make it available online?"

Article 10.1

What is Website Deployment?

Website deployment is the process of moving your website from your local computer to a live server where people around the world can access it.

During development, your website usually exists only on your computer.

Example:

You create:

index.html
style.css
script.js
Images and other files

These files work on your computer, but nobody else can access them. Deployment makes these files available on the internet.

Local Website vs Live Website

Local Website	Live Website
Stored on your computer	Stored on an online server
Only you can access it	Anyone with the link can visit
Used for testing	Used by real visitors

Basic Deployment Process

Create website files
Test website locally
Choose a hosting platform
Upload website files
Connect domain name
Website becomes live

Article 10.2

Free Hosting Platforms and Uploading Your Website

Beginners do not always need expensive hosting. Many platforms allow developers to publish websites for free.

Popular Free Hosting Options

GitHub Pages
Netlify
Vercel
Cloudflare Pages

These platforms are useful for:

Portfolio websites
Learning projects
Static websites
Documentation websites

Example: Publishing a Portfolio Website

Imagine you created your personal portfolio.

Create your website using HTML, CSS, and JavaScript.
Upload your project files to a hosting platform.
The platform creates a public website link.
Visitors can now access your portfolio.

Website Deployment Files

A simple website usually requires:

File	Purpose
index.html	Main webpage structure
style.css	Website design
script.js	Website interaction
Assets folder	Images, icons, and resources

Article 10.3

Connecting Domain and Making Your Website Live

After hosting your website, you receive a temporary link.

Example:

yourname.hostingplatform.com

To create a professional online identity, you can connect a custom domain.

Example:

www.yourname.com

How Domain Connection Works

Purchase a domain name.
Open domain DNS settings.
Point the domain to your hosting server.
Wait for DNS changes to update.
Your website becomes available using your domain.

Complete Website Journey

Step	Technology
Create Website	HTML, CSS, JavaScript
Store Files	Hosting Server
Find Website	Domain Name
Access Website	Browser

What We Learned in Article 10

Deployment moves a website online.
Hosting stores website files.
Domains provide a professional address.
DNS connects domains with servers.
Anyone worldwide can access a live website.

Continue Learning

In the next article, we will explore:

Website security basics
HTTPS and SSL certificates
Protecting your website files
Keeping your website reliable