Devlog #1 - 6/9/2026

My project HyperionOS is starting to take a bit more shape!

My project is a web-based operating system simulation (like the name suggests). I have barely any prior experience in HTML, CSS, or JavaScript, so I am diving headfirst into this super ambitious project while learning the basics as I go!

I spent tonight laying down the digital foundation of the OS and successfully connected my visual layouts with functional code:

Built a black desktop canvas locked to the screen size.

Designed a centered taskbar using CSS Flexbox layout engine and z-index.

Created a circular, application launcher button inside the taskbar.

Built a responsive application window frame that uses position: absolute so it floats over the background canvas.

Today was a massive learning curve for me since I had to debug some really weird layout traps. I learned how box-sizing: border-box keeps padding from breaking element sizes, how browser loading timing affects JavaScript code execution, and how to write a functional toggleWindow() state check to squash a stubborn double-click bug on the launcher button!

Hopefully next time I can work on designing a polished top header bar for the app window with control icons, and dive into mouse event listeners to make the window fully draggable around the workspace.

Wish me luck!