Inspiration
As someone who fumbled through early adulthood with credit card debt and zero formal finance education, I saw a gap: personal finance resources are either too jargon-heavy or disconnected from real life. I wanted to build something that spoke to regular people—young professionals, first-time homebuyers, anyone tired of feeling lost with money. The goal? Make financial literacy feel approachable, not intimidating.
What it does
Financial Literacy 101 is a free platform that breaks down core money skills: budgeting, debt management, savings, and investing. It features interactive tools (like a live compound interest calculator) and scenario-based learning to turn abstract concepts into tangible outcomes—no fancy degrees required.
How we built it
I started with Figma to map the design system (focused on trust and accessibility: blues for reliability, greens for growth). Then built the frontend with HTML5, CSS3 (Tailwind for responsiveness), and vanilla JavaScript—no heavy frameworks to keep it fast. I used Intersection Observer for scroll animations, custom CSS gradients/glassmorphism for visual depth, and client-side logic for the calculator (validating inputs and computing $FV = P \times (1 + r)^t$).
Challenges we ran into
The biggest hurdle was balancing animation with accessibility: ensuring scroll-triggered effects worked smoothly but disabled for users with prefers-reduced-motion. I also struggled with making the calculator error handling intuitive—testing edge cases (empty fields, non-numeric inputs) to keep it user-friendly without confusion.
Accomplishments that we're proud of
Creating a fully responsive design that works seamlessly on mobile (where most users access finance tools) and desktop. The compound interest calculator is fast, accurate, and jargon-free—something I wish I’d had when I first started saving. Most importantly, the platform feels warm and approachable, not like a "finance textbook."
What we learned
Accessibility isn’t optional—it’s core to making finance tools inclusive. I also learned that simplicity beats complexity: users don’t need 10 calculators, just 1 well-built one (compound interest) that solves a real pain point. Finally, designing for emotion matters—soft gradients, subtle animations, and clear language reduce anxiety around money.
What's next for this project
I want to expand the interactive tools (add a budget tracker and mortgage calculator), integrate short video lessons from local finance experts, and build a lightweight progress tracker (no login required) so users can track what they’ve learned. Long-term, I hope to add community case studies—real stories from people who used the platform to pay off debt or save for retirement.
Log in or sign up for Devpost to join the conversation.