This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I built Trader’s Academy, a fictional intranet homepage designed for a modern financial firm to onboard, educate, and empower new traders. The goal was to blend structured learning with interactive tools and real-time insights — all styled in a professional yet inviting layout.
Key Features:
- 🧠 Daily quiz card to reinforce trading knowledge
- 📊 Learning progress tracker with core modules
- 📚 Expandable glossary and knowledge base
- 📈 Market snapshot widget (mock data updates)
- 🧮 Built-in calculators (position size, risk:reward)
- 🎯 Events timeline for upcoming team sessions
- 🧘 Wellness corner with break timers and motivation
- 👤 Mentor spotlight & community Q&A
- 🌗 Dark mode toggle with saved preference
The entire project is built using only HTML, CSS, and JavaScript, with no frameworks or backend. It simulates an internal dashboard experience traders might use daily, tailored for accessibility and interactivity.
Demo
🔗 Live Preview: TradeOS Demo
💻 Source Code: GitHub Repository (optional)
<!-- You can also embed your CodePen using iframe --> <iframe height="600" style="width: 100%;" scrolling="no" title="Trader’s Academy" src="https://codepen.io/YOUR_USERNAME/embed/preview/PROJECT_ID" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> </iframe> Journey
This project helped me explore how to simulate real-time UX without relying on external APIs or frameworks. I focused on:
Creating modular components with CSS and JS only
Handling user input and interactivity with plain JavaScript
Structuring a dashboard layout that's clean, responsive, and professional
Designing with empathy for new traders and office culture alike
I particularly enjoyed building the quiz logic and dynamic glossary filter. It was also a fun challenge to design the layout around the "learning meets live trading" experience.
This challenge helped me grow in:
UX thinking for dashboards
JavaScript DOM manipulation and localStorage
Creating a workplace-themed UI that still feels engaging
Top comments (0)