Skip to main content
CF

Build a Monthly Spending Tracker with HTML, JavaScript and CSS

2h 26m 14s
English
Paid

Enhance your web development skills by building a personal budget management application. In this practical course, you will create an interactive and visually appealing interface that allows users to add expenses, select categories, and view results on a dynamic chart.

Course Objectives

By the end of the course, you will have developed a stylish and fully functional web application. Most importantly, you will build and reinforce key frontend development skills necessary for every developer.

Key Features

  • Interactive Interface: Design an interface where users can easily add expenses and select categories.
  • Dynamic Visualization: Utilize Chart.js to create visual, dynamic, and functional data representations.
  • Data Persistence: Learn to save data using localStorage, ensuring that user information remains intact even after refreshing the page.

Technologies You Will Learn

During this course, you will work with the following technologies:

  • HTML, JavaScript, and CSS: Build the core structure, functionality, and style of your application.
  • Chart.js: Integrate and customize charts to display data dynamically.
  • localStorage: Implement data storage solutions to persist user input.

Benefits of the Course

This course not only results in a useful application but also strengthens your abilities in frontend development. By participating, you gain hands-on experience that is essential for all web developers, enhancing both your practical skills and your portfolio.

Additional

https://sweet-tellurium-e16.notion.site/JS-CSS-Projects-Handbook-12ab2273e75280118369d9af8a6a9622

All the resources for this course are available in the course handbook on Notion, under — Module 4: Expense Tracker

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 14 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 14 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (14)
#Lesson TitleDurationAccess
1
Introduction Demo
04:25
2
Form Elements UI
09:07
3
Form Styling UI
13:42
4
Date & Expenses Setup JS
10:56
5
Submit & LocalStorage JS
15:15
6
Chart Functionality JS
16:42
7
Let's Keep Learning Together!
01:23
8
Introduction
05:02
9
Mac / Linux Device Setup
05:35
10
Windows Device Setup
06:58
11
VSCode Setup & Template
19:27
12
VSCode Extensions
09:11
13
DevTools
13:57
14
GitHub
14:34
Unlock unlimited learning

Get instant access to all 13 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What is Build a Monthly Spending Tracker with HTML, JavaScript and CSS about?
Enhance your web development skills by building a personal budget management application. In this practical course, you will create an interactive and visually appealing interface that allows users to add expenses, select categories, and…
Who teaches this course?
It is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 14 lessons with a total runtime of 2 hours 26 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/build-a-monthly-spending-tracker-with-html-javascript-and-css. The page hosts every lesson with the integrated video player; no download is required.