10+ HTML CSS and JS Financial Web Apps – Front-End Web Dev

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: UPDATE -Project Budget Planer- AUTO Save & Save data as Excel (svc)

Chapter 2: General setup

Lecture 1: Section overview

Lecture 2: Course structure

Lecture 3: Required software

Lecture 4: Folder structure & boilerplate

Lecture 5: Course resources and repository

Chapter 3: World currencies convertor app

Lecture 1: App presentation

Lecture 2: General setup and resources

Lecture 3: HTML markup and basic styles

Lecture 4: Add the World Map SVG using JavaScript

Lecture 5: Simple currencies convertor using JavaScript & exchange rate API

Lecture 6: Get the exchange rate from using the fetch API

Lecture 7: Get all countries from the World map

Lecture 8: Display the selected country's currency and all conversion rates

Lecture 9: Add search functionality to the currency list

Lecture 10: Create CSS components structure

Lecture 11: CSS App variables

Lecture 12: Style the App container

Lecture 13: Style the World Map

Lecture 14: Style the simple currency convertor

Lecture 15: Style the world currencies convertor

Chapter 4: Tax-Calculator

Lecture 1: App presentation

Lecture 2: General setup and folder structure

Lecture 3: Create the HTML markup

Lecture 4: Create `style.css` and import `variables.css` files

Lecture 5: Create `global.css` style

Lecture 6: Create and Style the `form.css` file

Lecture 7: Create the main app.js and get DOM elements module with global variables

Lecture 8: Add event listener to the `calculate-button` & get the input values

Lecture 9: Validate input and add alert component

Lecture 10: Display standard deduction based on status

Lecture 11: Style and Add the alert component to the DOM

Lecture 12: Display standard deduction based on status

Lecture 13: Calculate the income tax based on the tax brackets

Lecture 14: Style the result component

Lecture 15: Close results and reset all values

Chapter 5: Retirement Calculator

Lecture 1: App presentation

Lecture 2: General setup and folder structure

Lecture 3: Create the HTML markup

Lecture 4: Create `global.css` and `variables.css` style

Lecture 5: Style the `calculator-container.css` file

Lecture 6: Style global `btn.css` file

Lecture 7: Add onclick to the `calculateBtn` & get the input values

Lecture 8: Validate each individual input

Lecture 9: Create and Style the alert component in `alert.css` and `showAlert.js`

Lecture 10: Handle labels error and success with`handleLabel.js`

Lecture 11: Calculate and display retirement savings

Lecture 12: Get calculated values for the table

Lecture 13: Check for successful calculations of the retirement

Lecture 14: Display and style the table component

Lecture 15: Create and add a new row element

Lecture 16: Clear the input fields and hide the results

Lecture 17: Delete a row from the table

Chapter 6: Stock-Market-Watch-List

Lecture 1: 07-01-App presentation

Lecture 2: 07-02-General setup and folder structure

Lecture 3: 07-03-Create the HTML markup

Lecture 4: 07-04-Create short-news section

Lecture 5: 07-05-Create stocks crypto and forex maps section

Lecture 6: 07-06-Create detailed analytics section

Lecture 7: 07-07-Style the side navigator

Lecture 8: 07-08-Toggle maps and detaild chart.mp4

Chapter 7: Budget Planner App

Lecture 1: App presentation

Lecture 2: General setup and folder structure (HTML, CSS, JS)

Lecture 3: Create the HTML markup for .app-container, .header and .inputs-container

Lecture 4: 08-04-Create `main.css`, `variables.css` and the `app-container.css`

Lecture 5: Create and styles the `btn.css` components

Lecture 6: Style the `header-container.css` and `inputs-container.css`

Lecture 7: Create the HTML markup for the budget list

Lecture 8: Create and style `budget-list-header.css` and `budget-list-container.css`

Lecture 9: Get DOM elements and create global variables

Lecture 10: Manage the ADD button click event

Lecture 11: Calculate total the budget

Lecture 12: Calculate the total per category

Lecture 13: Create and Style the Alert components

Lecture 14: Update the budget list and add to category

Lecture 15: Remove elements form the budget list

Lecture 16: Edit elements from the budget list

Lecture 17: Save and load data from local storage

Lecture 18: Clear budget list when requested

Lecture 19: UPDATE – AUTO Save & Save data as Excel (svc)

Lecture 20: UPDATE – Save and Load new data from JSON files.

Chapter 8: Savings-Goal-Tracker

Lecture 1: App presentation

Lecture 2: General setup and folder structure (HTML, CSS, JS)

Lecture 3: Create the HTML markup for .app-container, and .parameters-form

Lecture 4: Create `main.css`, `variables.css` and style the `app-container.css`

Lecture 5: Create and styles `form.css`

Lecture 6: Create the HTML markup for .goal-list and style it with `goal-list.css`

Lecture 7: Create the main app.js file and Get DOM elements

Lecture 8: Calculate and display the goal amount

Lecture 9: Calculate and display current savings

Lecture 10: Calculate and display monthly contribution