Skip to main content
CF

Build a Monthly Spending Tracker with HTML, JavaScript and CSS

2h 26m 14s
English
Paid

Build a Monthly Spending Tracker with HTML, JavaScript and CSS is a 14-lesson 2 hours 26 minutes self-paced course by Zero To Mastery. Enhance your web development skills by building a personal budget management application.

Course facts

Lessons
14
Duration
2 hours 26 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Premium

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

Who teaches Build a Monthly Spending Tracker with HTML, JavaScript and CSS? 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.

What lessons are included in Build a Monthly Spending Tracker with HTML, JavaScript and CSS?

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

What courses are similar to Build a Monthly Spending Tracker with HTML, JavaScript and CSS?

Frequently asked questions

What are the prerequisites for this course?
This course requires a basic understanding of HTML, JavaScript, and CSS. Familiarity with these technologies will help you follow along as you build the monthly spending tracker application. Additionally, having some experience with using a code editor like VSCode will be beneficial.
What will I build by the end of this course?
By the end of the course, you will have built a personal budget management application. This web application will feature an interactive interface where users can add expenses, select categories, and view results on a dynamic chart using Chart.js. The application will also utilize localStorage to ensure data persistence.
Who is the target audience for this course?
The course is designed for web developers looking to enhance their frontend development skills. It is particularly suitable for those who want to gain practical experience in building interactive web applications with data visualization capabilities.
How does this course compare in depth and scope to similar courses?
This course focuses specifically on the practical application of frontend technologies to build a budget management app. Unlike broader web development courses, it provides hands-on experience with data visualization using Chart.js and data persistence through localStorage, offering a focused approach to learning these essential skills.
What specific tools or platforms will I learn to use?
In this course, you will learn to use HTML, JavaScript, and CSS for building the application's core structure and style. You will also work with Chart.js to create dynamic charts, and localStorage to manage data persistence. Additionally, lessons include setting up development environments with VSCode and using GitHub for version control.
What topics are not covered in this course?
The course does not cover backend development, server-side technologies, or advanced JavaScript frameworks such as React or Angular. It focuses solely on frontend development and does not delve into mobile app development or deployment techniques for the web application.
How much time should I expect to commit to this course?
The course consists of 14 lessons. While the exact total runtime isn't specified, you should plan to spend additional time practicing and implementing each lesson's concepts. Depending on your prior experience, you might need to allocate additional time for setup and experimentation.