This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
💻 Desk of a Dev – CSS Art
Inspiration
Office culture for me revolves around the dev's desk – a keyboard clacking away, a coffee mug steaming, sticky notes with deadlines (and pizza reminders 🍕), and a terminal always open. I wanted to bring this everyday developer vibe to life purely using HTML + CSS, with an interactive terminal and fun easter eggs like sticky note messages and dark/light mode toggling.
Demo
🔗 Live Demo: View the project
🔗 GitHub Repository: https://github.com/prashantgohel321/Desk-of-a-Dev-CSS-Art
💡 Try clicking the sticky notes or typing commands like
help,echo Hello,brew coffee,git commit -m "Success!", etc. in the terminal for some fun surprises!
Journey
This was a deep dive into pure CSS creativity. Some highlights:
- 💡 CSS-only art – Everything on screen (monitor, mug, sticky notes, keyboard, mouse) is built with CSS.
- 🌗 Dark/Light Mode toggle via a simple button.
- ⌨️ Interactive Terminal built with input handling in JavaScript and a command system that mimics dev tools.
- 📝 Sticky Notes that display fun pop-ups.
- 🖼️ Responsive design for smaller screens too!
What I learned:
- How to simulate 3D/realistic effects with shadows and transforms.
- Creating interactive elements (e.g., sticky notes and the terminal) without any external frameworks.
- Balancing creativity with performance and interactivity in pure frontend work.
Next steps:
- Make the terminal support scrollback history.
- Add a productivity timer like Pomodoro built into the desk!
- Animate the coffee steam more naturally.
Thanks for checking out my submission!
Feel free to ⭐️ the repo or connect with me on GitHub / DEV!
Top comments (2)
Such a brilliant piece of CSS art! The way you’ve captured every detail of a developer’s desk is both inspiring and skillful. Really admirable work – keep creating!
Thank you so much, Theodora! Your words mean a lot 🙏 Glad you liked the little details! 😊💻✨