Build a Monthly Spending Tracker with HTML, JavaScript and CSS
Course description
This practical course will teach you how to create a real personal budget management application—both useful and impressive. You will develop a neat and interactive interface where users can add expenses, choose categories, and immediately see the results on a dynamic chart.
With the help of Chart.js, the data will come to life—visually, beautifully, and functionally. Along the way, you will deal with forms and input processing, and you'll also learn how to save data using localStorage so that everything remains in place even after the page is refreshed.
By the end of the course, you will have a stylish and fully functional web application that you can be proud of. Most importantly, you will strengthen the key frontend development skills necessary for every developer!
Watch Online
All Course Lessons (14)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
The Ultimate Web Scraping Course
Testing Fundamentals [EpicWeb]
Animating the web with Framer Motion