Describe the course structure, with 11 sections and ten apps, plus optional ES6 and crash course modules. Access GitHub source code and boilerplate starter files for every app.

install Visual Studio Code as the required editor, download the correct OS version, and set up the workspace. use essential extensions, live server, and optional git and node tools.

Learn folder structure and boilerplate setup for HTML, CSS, and JS apps by building apps/ boilerplate with index.html, style.css, script.js, and src folders; include readme and git ignore basics.

Access the course resources by cloning or downloading the dedicated GitHub repository, explore the boilerplate and markdown notes, and learn git basics like add, commit, and push.

Create a currency converter UI in index.html with an amount input, from and to currency selects, and a result area. Add a world map placeholder and basic flex styling.

Build a simple currency converter in JavaScript using an exchange rate API, wiring up the UI with DOM elements, a convert button, input validation, and numeric conversion to display results.

Learn to pull all countries from a world map SVG, select a country on click, and map it to its currency for display in a live currency converter.

Create a modular css structure by adding a variables file and component css files (currency converter, currency header, world map) and importing them into a main style file.

Learn to define and use CSS variables, naming conventions, and color presets like primary and secondary colors, with practical examples using var(--name) for app containers and opacity with rgba.

Style the world map paths by setting height, colors, margins, padding, and text alignment; implement hover states and a selected class with currency color before styling the currency converter.

Learn to style the simple currency converter with flex layouts, themed colors, and accessible controls; implement a full-width action button, responsive form groups, and a scale-up show animation for results.

Style the world currencies convertor demonstrates flex header layout, margins and colors, a scrollable conversion list with webkit scrollbar, and hover plus fade animations for currency items.

Copy the boilerplate, rename and organize folders for the income tax calculator, and set the title and index. Rename the script folder to modules and create the app module.

Create the main app.js and a get dom elements module using destructuring to export and import global dom references like income, status, calculate button, text amount, results, and standard deduction.

Learn to compute and display the standard deduction for filing statuses (single, married, head of household) using a JS object, template literals, and dynamic status updates.

Style the alert by creating alert.css, import it, and apply a show class to display it in the DOM, then add a shake animation via animations.css with defined keyframes.

Create a standard deduction object for single, married, and head of household, and display the amount using template literals with the selected status.

Calculate income tax using tax brackets (single, married, head of household) in a front-end web app by loading brackets from data.json, applying standard deductions, and computing tax with bracket rates.

Create a close results button component in JavaScript that clears inputs, resets status to single, updates standard deduction and text amount displays, hides results, and refocuses the input.

Learn how to start a new project by importing boilerplate, renaming folders to utilities, organizing scripts, configuring the index file, and launching a live server for a retirement calculator app.

Create and import calculator-container.css, style four form groups with labels and inputs, and implement a column-reverse layout, focus-based label color, and responsive sizing for the calculator container and results.

Validate each individual input in a financial web app by validating age, retirement age, monthly savings (0-10,000), and annual interest rate (0-100) with alerts and dynamic label focus.

Create and style an alert component with alert.css and showAlert.js, including danger and success variants with color variables. Integrate the alert into the retirement calculation path to display timed messages.

Calculate and display retirement savings by computing years until retirement, monthly interest, total months, and future value, then render the result with dollar formatting on the page.

Create and insert a new table row from input values (age, retirement, monthly savings, interest rate, result) into the table body, with delete controls and row styling.

Learn to reset the form after adding rows by clearing all inputs, clearing results, and resetting labels, while removing error and success states to prepare for a new calculation.

Delete a row from a dynamic table by wiring a delete button to a delete row function, confirming the action, and updating the table body and ui states.

Build a feature-packed stock market watch list app with heat maps, sectors, stocks, crypto, and forex data. Analyze with configurable charts, RSI indicators, and analytics across markets.

Set up a boilerplate and folder structure for a stock market watcher HTML web app, consolidating to one script and one style file while integrating free widgets from grading viewer.

Create and structure the HTML markup with semantic sections, a navigation system, and two main views—maps and chart and detailed-chart—using a sticky header and Font Awesome icons.

Create a sticky top short news section using a ticker tape widget, customize symbols and theme, and configure embedded code to display financial data in a front-end web app.

Learn to build a three-map section for stocks, crypto, and forex by embedding TradingView widgets in HTML, styling with CSS, and toggling display with a show class.

Construct the HTML markup for the app container, header, and inputs container, including a category select, load and save actions, name and amount inputs, add button, and a total display.

Learn to style the header and inputs sections by building header-container.css and inputs-container.css, using grid and flex layouts, typography, spacing, and cross-browser input enhancements for a polished front-end UI.

Learn to manage the add button click by reading name, amount, and category, validating inputs, creating a budget item, updating the budget list, calculating the total, and resetting the form.

Create a calculate total per category function that uses a switch to sum each budget category, including income and expenses, and update the dom with the totals.

Create and style alert components to show validation messages in a front-end web app, wiring up show alert functionality and color variants for success, warning, danger, and more.

Edit items in the budget list by selecting an item, updating its name, amount, and category, and re-calculating totals, with alerts, button updates, focus management, and local storage later.

Save and load budget data in local storage using JSON.stringify and JSON.parse, triggered on page load and via save and load buttons, updating the budget list and displaying success alerts.

Learn to implement a clear budget list feature with a confirmation prompt, reset the budget list array, recalculate the total, and show a success alert via a button click.

Add auto save and export options for the budget planner app, including save as excel, csv, and json. Implement interval auto save and load functionality with HTML, CSS, and JavaScript.

Learn to save budget data as json by stringifying data and downloading a json file, then load new json files to update totals.

Track savings goals with real-time updates on current savings, monthly contributions, and time to reach the goal, while learning how disabled fields guide user input and recalculate with interest.

Set up a front-end project from boilerplate, switch scripts to modules, and scaffold a savings tracker app with a main module, form groups, and live server testing.

Create and import a variables.css with main color schemes, style the app-container.css with a centered 450px column layout, and implement a form group and disabled input behavior for alerts.

Create a ul with class goal-list containing four list items for financial goals, then import goal-list.css to style the container and enable bar visuals with JavaScript.

Learn to build a dom elements module that exports a Dom elements function to grab key elements by ID and via querySelector, then import and destructure them in app.js.

Build a loan calculator web app using HTML, CSS, and JavaScript to track savings, calculate monthly payments and total interest, and visualize results with an API-powered pie chart.

Set up a module-based loan calculator project by organizing the folder structure, configuring app.js and index as modules, and building a form with number inputs, sliders, and a two-value chart.

Create and import CSS variables in variables.css to define main, background, and accent colors, then style the app container with a responsive grid, borders, and shadows in app-container.css.

Create and style a form using form.css, customizing range inputs and sliders with CSS variables, borders, padding, and placeholder color; implement flex layout and form groups before adding JavaScript.

Learn to grab dom elements and select all number and range inputs with querySelectorAll, attach input listeners, and synchronize their values for dynamic range and numeric inputs.

Create and style a results panel with results.css, using flex layout, borders, padding, and box shadows; customize monthly payment and interest rate blocks with css variables and cascading colors.

Create and style a pie chart (donut) using Chart.js in a front-end web app. Extract loan amount and total interest, then configure labeled data and CSS styling.

Explore building a web investment portfolio app with HTML, CSS, and JavaScript that lets you add, track, edit, and delete investments, view returns and value, and export data to CSV.

Create the add stock form markup and css to capture stock symbol, name, shares, buy-in price, and current price, with a full-width submit button and grid styling in add-stock.css.

Build a portfolio section with a nine-column stocks table (symbol, name, shares, buy-in, current price, value, return, gain/loss, actions) and responsive, scrollable styling for the portfolio container.

Develop and use utility functions showAlert and formatNumbers to create alerts of various types and format numbers with separators, including auto dismissal and fade animations.

Display the stock portfolio by rendering added stocks in a dynamic table, support multiple stocks, compute current value and gain or loss, and persist data in local storage.

Implement edit and delete stock functions for the portfolio, match by symbol, update fields from the DOM, filter the portfolio, save to local storage, and refresh the display.

Create a dynamic investment list stored in local storage and displayed on page load. Add investments, update the total invested, and render each item with edit and delete controls.

Analyze portfolio performance with a pie chart, computing free cash, total invested, portfolio value, gain/loss, and total return, then update the UI on button click.