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

Focused View

Norbert B. Menyhart

15:25:58

10 View

1. Introduction

1. Introduction.mp4

03:13

2. General setup

1. Section overview.mp4

00:49

2. Course structure.mp4

02:49

3. Required software.mp4

08:35

4.1 E02-04-Folder structure & boilerplate.mp4

17:47

4. Folder structure & boilerplate.mp4

17:47

5.1 00-boileplate.zip

5.2 Course repository.html

5.3 Google Fonts.html

5. Course resources and repository.mp4

06:37

3. World currencies convertor app

1. App presentation.mp4

02:45

2.1 Exchange rate API.html

2.2 world-map.zip

2. General setup and resources.mp4

02:09

3. HTML markup and basic styles.mp4

11:48

4. Add the World Map SVG using JavaScript.mp4

03:03

5. Simple currencies convertor using JavaScript & exchange rate API.mp4

11:40

6. Get the exchange rate from using the fetch API.mp4

08:26

7. Get all countries from the World map.mp4

16:51

8. Display the selected countrys currency and all conversion rates.mp4

09:57

9. Add search functionality to the currency list.mp4

06:37

10. Create CSS components structure.mp4

04:01

11. CSS App variables.mp4

03:03

12. Style the App container.mp4

06:07

13. Style the World Map.mp4

03:26

14. Style the simple currency convertor.mp4

06:26

15. Style the world currencies convertor.mp4

06:46

4. Tax-Calculator

1. App presentation.mp4

03:11

2.1 data.zip

2. General setup and folder structure.mp4

02:58

3. Create the HTML markup.mp4

09:27

4. Create `style.css` and import `variables.css` files.mp4

5. Create `global.css` style.mp4

6. Create and Style the `form.css` file.mp4

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

04:21

8. Add event listener to the `calculate-button` & get the input values.mp4

9. Validate input and add alert component.mp4

03:40

10. Display standard deduction based on status.mp4

03:35

11. Style and Add the alert component to the DOM.mp4

04:53

12. Display standard deduction based on status.mp4

03:35

13. Calculate the income tax based on the tax brackets.mp4

09:33

14. Style the result component.mp4

06:07

15. Close results and reset all values.mp4

03:18

5. Retirement Calculator

1. App presentation.mp4

04:51

2. General setup and folder structure.mp4

02:07

3. Create the HTML markup.mp4

06:04

4. Create `global.css` and `variables.css` style.mp4

5. Style the `calculator-container.css` file.mp4

6. Style global `btn.css` file.mp4

7. Add onclick to the `calculateBtn` & get the input values.mp4

8. Validate each individual input.mp4

07:01

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

10. Handle labels error and success with`handleLabel.js`.mp4

11. Calculate and display retirement savings.mp4

08:03

12. Get calculated values for the table.mp4

05:56

13. Check for successful calculations of the retirement.mp4

03:50

14. Display and style the table component.mp4

06:26

15. Create and add a new row element.mp4

07:34

16. Clear the input fields and hide the results.mp4

03:39

17. Delete a row from the table.mp4

06:13

6. Stock-Market-Watch-List

1. 07-01-App presentation.mp4

06:22

2. 07-02-General setup and folder structure.mp4

02:25

3. 07-03-Create the HTML markup.mp4

03:49

4. 07-04-Create short-news section.mp4

04:13

5. 07-05-Create stocks crypto and forex maps section.mp4

07:31

6. 07-06-Create detailed analytics section.mp4

05:10

7. 07-07-Style the side navigator.mp4

07:08

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

09:30

7. Budget Planner App

1. App presentation.mp4

03:27

2. General setup and folder structure (HTML, CSS, JS).mp4

03:11

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

08:54

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

5. Create and styles the `btn.css` components.mp4

6. Style the `header-container.css` and `inputs-container.css`.mp4

7. Create the HTML markup for the budget list.mp4

08:02

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

9. Get DOM elements and create global variables.mp4

02:25

10. Manage the ADD button click event.mp4

05:24

11. Calculate total the budget.mp4

05:23

12. Calculate the total per category.mp4

10:29

13. Create and Style the Alert components.mp4

16:50

14. Update the budget list and add to category.mp4

08:53

15. Remove elements form the budget list.mp4

03:39

16. Edit elements from the budget list.mp4

05:29

17. Save and load data from local storage.mp4

06:58

18. Clear budget list when requested.mp4

02:51

8. Savings-Goal-Tracker

1. App presentation.mp4

03:20

2. General setup and folder structure (HTML, CSS, JS).mp4

02:45

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

05:00

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

5. Create and styles `form.css`.mp4

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

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

03:33

8. Calculate and display the goal amount.mp4

05:26

9. Calculate and display current savings.mp4

08:58

10. Calculate and display monthly contribution.mp4

11:01

11. Toggle interest rate input.mp4

02:21

12. Calculate months with interest.mp4

11:32

13. Bars style.mp4

06:31

14. Form group validation.mp4

03:03

9. Loan calculator

1. 10-01-App presentation.mp4

01:32

2. 10-02-General setup and folder structure (HTML, CSS, JS).mp4

01:58

3. 10-03-Create the HTML markup for .app-container, and Loan conditions.mp4

07:42

4. 10-04-Create `style.css`, `variables.css` and style the `app-container.css`.mp4

5. 10-05-Create and styles `form.css`..mp4

6. 10-06-Get DOM elements and manipulate input values.mp4

06:00

7. 10-07-Calculate loan `calculateLoan.js` - create a function that calculates the.mp4

8. 10-08-Display and style `results.js`.mp4

9. 10-09-Create and style Pie Chart.mp4

08:43

10. Investment-Portfolio-Tracker

1. 11-01-App presentation.mp4

03:42

2. 11-02-General setup and folder structure (HTML, CSS, JS).mp4

02:06

3. 11-03-Investment Container HTML Markup.mp4

05:14

4. 11-04-Style main App and add CSS variables.mp4

11:22

5. 11-05-Style the investment container.mp4

08:01

6. 11-06-Create HTML Markup and CSS Style for Adding Stoks.mp4

05:13

7. 11-07-Create Portfolio HTML Markup and CSS Style.mp4

09:15

8. 11-08-Create and Style the Portfolio analysis section.mp4

07:56

9. 11-09-Utility functions showAlert and formatNumbers.mp4

06:57

10. 11-10-Add Stocks to LocalStorage.mp4

10:40

11. 11-11-Display Stock Portfolio.mp4

15:55

12. 11-12-Edit and Delete Stocks from the Portfolio.mp4

08:46

13. 11-13-Add investment to list and dinsplay list.mp4

12:53

14. 11-14-Edit and Delete investments from the list.mp4

10:01

15. 11-15-Analyse Gain Loss Retunr.mp4

07:13

16. 11-16-Create and Show Custom Pie Chart.mp4

13:03

17. 11-17-Save Investment data to a CSV file.mp4

06:18

11. Income and Expense tracker app

1. 12-01-App presentation.mp4

02:58

2. 12-02-General setup and folder structure (HTML, CSS, JS).mp4

02:07

3. 12-03-HTML section structure and gerenal CSS style for the app.mp4

06:24

4. 12-04-Entries form HTML Markup and CSS Style.mp4

09:42

5. 12-05-Summary table HTML Markup and CSS Style.mp4

07:20

6. 12-06-Entries List HTML Markup and CSS Style.mp4

09:12

7. 12-07-Get DOM Elements and add event-listeners.mp4

04:42

8. 12-08-Change the input color when the user selects a type.mp4

02:57

9. 12-09- Add, delete and display antries in the list.mp4

11:19

10. 12-10-Display chart entries with colors and percentages.mp4

10:25

11. 12-11-Save load and clear all entries from the list.mp4

04:26

12. E12-12-Display only icons on Mobile devices.mp4

01:51

13. 12-13-Export to HTML and PDF.mp4

11:17

12. ES6 Modules Explained - Optional

1. ES6 Crash course with project.mp4

37:26

13. HTML CSS and JS Crash Course with Web App Project - Optional

1. Section overview.mp4

02:35

2. Setup your code space.mp4

02:56

3. Create index.html file and add basic HTML tags.mp4

09:09

4. Add ids classes and props to HTML Tags.mp4

09:31

5. Create style.css.mp4

14:35

6. Create CSS variables.mp4

03:09

7. Style the form.mp4

04:32

8. Style Table Buttons and input.mp4

08:00

9. Create a JavaScript file.mp4

06:10

10. Add event listeners to the input.mp4

03:04

11. Add event listeners to the form.mp4

04:21

12. Create variables and calc the discount.mp4

04:28

13. Change the quant using the buttons.mp4

03:29

14. Handle the form submit.mp4

02:16

15. Calculate the final including the discount.mp4

03:12

16. Out the result to the DOM.mp4

05:24

17. Style the output and result.mp4

02:58

18. Refactor the code.mp4

07:28

14. Credit score checker app

1. App presentation.mp4

03:33

2. General setup and folder structure.mp4

01:12

3. Create the HTML markup.mp4

04:10

4. Create the CSS styles `credit-score` form.mp4

5. DOM elements module and global variables.mp4

06:35

6. Form submission & validation parameters.mp4

02:23

7. Create a validation module.mp4

02:12

8. Validate input value & type.mp4

04:09

9. Create the alert component module.mp4

05:23

10. Style and add the alert component to the DOM.mp4

05:36

11. Check validation & Show the result (html only).mp4

03:34

12. Style the result.mp4

07:49

13. Create the `checkCreditScore` function.mp4

14. Remove the result and recheck the credit score.mp4

07:49

15. Create the responsive design for mobile, tablet and desktop devices.mp4

03:03

Description

Lean HTML, CSS and JS by building 10 real world financial web applications using HTML, CSS and JavaScript.

What You'll Learn?

How to create real life Web appications, using html css and js
Modern web app UI/ UX design
Modular based web applications using JavaScrip ES6 Modules
New CSS features

Who is this for?

Beginner web developers

Junior web developers

What You Need to Know?

More details

Description
Welcome to "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"!

Hope you ready to dive into the world of front-end web development while creating 10 real world financial web applications using HTML, CSS and JavaScript? In this course, you will embark on an enriching journey to master HTML, CSS, and JavaScript by building practical financial web applications.
Throughout this course, you will learn the fundamentals of front-end development while focusing on the integration of financial tools and applications. By the end of our journey together, you will have created 10+ financial web apps, each designed to enhance your understanding of web development and financial concepts.
Our first project, "Currency Converter," sets the stage for your learning adventure. In this initial application, you will harness the power of HTML to structure the content of your web page, CSS to style and design your interface, and JavaScript to implement dynamic functionality.
As you progress through the course, you will unlock the secrets behind creating interactive and user-friendly financial web applications. From budget calculators to investment trackers, you will gain invaluable hands-on experience in crafting robust front-end solutions tailored to financial needs.
Are you ready to transform your passion for coding into tangible skills that merge technology with finance? Join us as we embark on this exhilarating journey of discovery and creation in "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"! Let's code our way to financial innovation together.

1.Â Â Expense Tracker: Keep tabs on your spending habits with this intuitive expense tracking application.
Investment Portfolio Tracker: Monitor and manage your investments seamlessly with our portfolio tracking tool.
Loan Calculator: Explore various loan scenarios and calculate repayment plans effortlessly.
Savings Goal Tracker: Set, track, and achieve your financial goals with precision and ease.
Budget Planner: Plan your finances effectively and stay on top of your budget with this indispensable tool.
Stock Market Watch List: Stay informed about your favorite stocks and market trends with our customizable watch list.
Retirement Calculator: Plan for your golden years confidently with our comprehensive retirement planning tool.
Tax Calculator: Estimate your tax liability and plan your finances intelligently with our user-friendly tax calculator.
Credit Score Checker: Monitor and improve your credit health with our insightful credit score checking application.

What you will learn:
- HTML advance tag elements
- CSSÂ latest feature and selectors
- JavaScript modules and ES6

Throughout the course, you'll utilize essential tools and resources, including Visual Studio Code for coding, Node.js for server-side JavaScript, Git for version control, Google Fonts and Font Awesome for enhancing the visual appeal of your applications, and ChartJS for creating interactive data visualizations. Additionally, you'll leverage the Exchange rate API for currency conversion functionalities.
Are you ready to unlock the full potential of front-end development while revolutionizing the way we interact with financial data? Join us as we embark on this transformative journey in "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"! Let's code our way to financial innovation together.

There is also a complete crash Cours on HTMLÂ CSSÂ and JavaScript which should get you up and running if you are completely new to them.

If you have any kind of questions pleas ask them and I will get write back to you.

With this being sad,
I wish you all happy coding!
Norbert BM
Who this course is for:
Beginner web developers
Junior web developers

User Reviews

Rating

average 0

Total votes0

Focused display

Hi I am a Self-taught Web Developer and I am a multimedia content creator with over 3k subscribers on YouTube.Join me on this journey and constantly evolve yourself. Enrich your Knowledge with the foundations of Web Development by learning HTMNL5, CSS3 and JavaScript and Applying them through Building from Easy to progressively more complex Responsive Web Pages.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.