Today I started building StudentOS, a web-based OS to help students be more productive. My goal was to make a simple splash screen as well as a desktop page, both to look clean. I spent about 3 hours on this between actual coding and googling how to code.

What I built:
Splash screen fades in “StudentOS” and a loading message, then transitions to the desktop after a few seconds. The desktop has a macOS style dock and menu bar that both do absolutely nothing when you click them (for now). On hover, the top menu bar words have a gray background, while the doc icons scale up and present a title when you hover over those.

Problems:
More than I expected for two simple pages. My live preview in VS code kept showing “File not found”, which makes sense because I lost the file for a bit, plus I had to mess around with a bunch of different servers to get it working. Additionally, the splash page did NOT fade correctly the first few tries and I had to get some keyframes with opacity working to figure that out. Another problem I ran into was the desktop not coming in after any amount of time, and it turned out that the CSS rule I wrote for the text was accidentally making it all invisible. Lastly, the clock wasn’t updating because I had the interval logic messed up as well as in the wrong place.

Next Up:
Clickable app icons and draggable windows.