Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Build a Monthly Spending Tracker with HTML, JavaScript and CSS

via Zero To Mastery Path

Overview

Learn how to build a personal finance web app that tracks your monthly spending using HTML, CSS, JavaScript, and Chart.js. Track spending, visualize data, and master local storage to create a portfolio-ready project. Learn front-end skills that get you hired.
  • Build a responsive web app with HTML, CSS, and JavaScript
  • Use Chart.js to visualize data dynamically
  • Work with forms and handle user input effectively
  • Manage state and persist data using localStorage
  • Master DOM manipulation and event handling
  • Organize spending by categories like Housing and Food
  • Create interactive, real-world UI experiences
  • Add a polished, portfolio-ready project to showcase your skills

Syllabus

  •   Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Developer Setup
  •   Monthly Spending Tracker
    • Form Elements UI
    • Form Styling UI
    • Date & Expenses Setup JS
    • Submit & LocalStorage JS
    • Chart Functionality JS
  •   Where To Go From Here?
    • Let's Keep Learning Together!
    • Review This Project!
  •   Appendix - Developer Setup
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub

Taught by

Jacinto Wong

Reviews

Start your review of Build a Monthly Spending Tracker with HTML, JavaScript and CSS

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.