💡 How I Built a Bulb-On Project Using HTML, CSS & JavaScript (As a Backend Dev)

Project Type: Fun Practice / Learning Experiment

Tech Stack: HTML, CSS, JavaScript

Dev Role: Backend Developer

Author: Anizoomy (Backend Newbie Exploring All Sides 💻)

🧠 Why I Did This Project

Even though I’m focused on backend development, I believe it’s important to understand how the frontend works too — at least the basics. So I decided to build a simple interactive project: a light bulb that turns ON and OFF with one click.

It’s a small project, but it helped me connect a few dots between what users see and what happens behind the scenes.

🔧 What the Project Does

• There’s a bulb icon on the screen

• A button lets you toggle the bulb on or off

• When clicked, the bulb changes appearance (lights up or turns off)

Simple, but cool 😎

⚙️ Technologies Used

• HTML – for the structure of the page

• CSS – to style the bulb and its glowing effect

• JavaScript – to make the bulb interactive (respond to clicks)

🖼️ Project Demo

https://www.instagram.com/p/DLTG_s_s54v/?img_index=1&igsh=dnlpbnEydTI1aHk1

🔍 Code Highlights

✅ HTML

Basic layout with:

• An image or div for the bulb

• A button labeled ON/OFF

✅ CSS

• A default style for the bulb when it’s “off”

• A glowing/yellow style when it’s “on”

✅ JavaScript

• Used addEventListener to detect button clicks

• Toggled the bulb’s state by switching classes or changing the image source

💭 What I Learned

• How DOM elements can be selected and modified with JavaScript

• How CSS classes can be toggled dynamically

• How frontend structure supports interactive behavior

As a backend dev, it was cool seeing how small JavaScript logic can instantly affect what users see.

🔚 Final Thoughts

Frontend may not be my main focus, but exercises like this give me better perspective when collaborating with frontend developers or building full-stack apps.

If you’re also on a backend journey — don’t be afraid to explore the other side a little. It makes you a more rounded dev. 🔁

🙋🏽 About Me

I’m Anizoomy, a backend newbie sharing my journey, projects, and lessons along the way.

You can find me on GitHub and follow this blog for more learning drops!

#BackendDeveloper #JavaScript #HTML #CSS #DevWithAnizoomy