Devlog #01: Building Hammad’s OS From Absolute Scratch 🚀Welcome to my very first devlog! Honestly, writing this feels surreal because a few days ago, I hadn’t even touched a line of HTML. Today, I’m building my first-ever project: Hammad’s OS—a personalized, web-based operating system desktop interface.It’s alive, it’s rendering, and the vibes are officially immaculate. Here is a breakdown of what I’ve cooked up so far.🌊 The Vision & The AestheticI wanted the interface to feel nostalgic yet ultra-clean, so I went with a vibrant Kame House anime background. As you can see in the live preview from image_3d5eca.jpg, the core desktop environment features a sleek, centralized UI element window floating right over the water, topped off with a high-end operating system status bar at the very top.Here is what is currently built and working:The Mac-Style Top Bar: A fully stylized, translucent menu bar featuring a glowing workspace launcher node (⚡ Workspace 1), system tray icons (Wi-Fi, Battery at 100%), and a clean digital clock displaying the current live date and time.The User Profile Hub: A dedicated glassmorphism-style card that holds my main heading, a short description of the Web OS features, and my official developer/owner tag.The Avatar: A perfectly circular display picture frame featuring a chaotic screaming hamster reaction image because… why not? 🐹🛠️ Under the Hood (The Code Breakdown)Looking at my codebase in image_3d5e6b.jpg, the entire structure is built inside main.html using clean semantic HTML and heavily customized inline CSS to position components perfectly.1. Mastering the Grid & FlexboxGetting elements to sit side-by-side instead of stacking awkwardly on new lines was my first major coding hurdle. I grouped the hamster avatar and the primary header inside a display: flex; container. Adding align-items: center; and a gap: 20px; instantly snapped them into perfect, laser-focused horizontal alignment.2. Deep UI StylingTo make the floating desktop window look premium, I used a combo of:border-radius: 64px; to give the main card smooth, pill-like modern edges.background-color: azure; with a subtle transform property to lock it right in the center of the viewport regardless of screen size.border-radius: 50%; and object-fit: cover; on the avatar image tag to keep it a flawless circle without squishing or distorting the picture.😤 The Hurdles & Total WinsSince this is my first time scripting anything, it hasn’t all been smooth sailing. I spent a solid amount of time scratching my head over missing double quotes and open tags that completely broke my header rendering.Fixing those tiny syntax bugs taught me a massive lesson: CSS is brutal but incredibly rewarding. Seeing a broken layout instantly snap into a gorgeous frosted glass bar after fixing a single character is unmatched.🔮 What’s Next?Now that the visual foundation is locked in, it’s time to step things up. For the next update, I’m planning to look into:Making it functional: Adding interactive desktop app icons that you can actually hover over and click.JavaScript Magic: Writing scripts to turn that static top bar clock into a real-time, ticking system clock.Huge thanks for checking out my progress! Stay tuned for Devlog #02. 🖥️⚡
