Angular Front End Development Legacy V2-V18 (module/zone.js)

Learn the theory of HTML basics, starting with the doctype tag and HTML5, then explore basic tags, heading and div elements, organizational tags header, body, and footer, plus comments, images, and anchors.

Create the Angular course code folder and an HTML subfolder with mkdir and cd, then launch Visual Studio Code to begin building the Angular project in the terminal.

Create index.html and add the doctype html tag to declare html5 for modern browsers, while noting that angular parsing may not require it later but it's useful now.

Learn to use basic HTML tags such as h1 and p, understand opening and closing tags, and create line breaks with br while mastering how whitespace affects rendering.

Learn to structure an html page with header, body, and footer tags, including a header title, body content, and notes on css to push the footer down and angular components.

Explore how HTML comments hide code from the page and how to use VS Code's comment shortcut to toggle blocks. Emphasizes clean code, indentation, and meaningful names for readability.

Display images in HTML using the img tag with a src attribute, loading from both web links and local relative paths using dot notation, and verify sources with browser devtools.

Apply the anchor tag to create hyperlinks with an href attribute, link to an image source, and test navigation by clicking or opening in a new tab.

Master HTML intermediate concepts by learning nested lists with list and list-item elements, tables with rows and header or data cells, and CSS styling, plus buttons, inputs, and title tag.

Learn to build unordered lists using the ul and li tags to display bulleted content, and compare them with ordered lists that show numbers.

Learn how to convert an unordered list to an ordered list in HTML by switching ul to ol and updating the closing tag, then see auto-numbered items in the browser.

Master the basics of HTML tables, building a two-row, two-column structure with tr, th, and td, and learn the header and data cells, and how CSS grids can replicate tables.

Explore how buttons function as essential interaction elements, from simple text inside a button tag to div-based implementations, and understand how clicking triggers JavaScript functions via click events.

Explore the HTML input element to build a login form with username and password fields, using labels, type attributes, default values, and layout divs for clean presentation.

Explore the text area element, its differences from input, and its default multi-line content. See how enter and shift+enter affect lines and how JavaScript controls form submission.

Learn how the head and title tags define a page's title and metadata for browsers and search engines, and how Angular can dynamically update the title.

Learn the theory of css basics, comparing style tags and external style sheets, and apply background color, margins, padding, width and height, font styles, text color, alignment, and decoration.

Learn to use the style tag and css background-color to style elements, experiment with color values such as rgb and hex, and apply styles to h1 and h4 elements.

Create a separate CSS file and link it to the page, replacing the style tag with a linked style sheet using rel and href to styles.css.

Learn how margins and padding control space around and inside elements, with margins outside. Use clockwise notation for top, right, bottom, left and inspect changes in browser devtools.

Set the height and width of h4 elements with CSS to 50 and 150 pixels, note padding and margin affect total height, and prepare for shared styles with classes.

Learn to create css classes with dot syntax, name them clearly (purple box), and apply them to specific elements for fine-grained styling.

Master how to align and decorate text with CSS, covering text-align, centering with auto margins, vertical alignment using line-height, and decorations like underline, italic, oblique, and bold weight.

Explore the theory of CSS layout tools, including display, position, flex and grid, borders, shadows, opacity, gradients, and responsive media queries, with emphasis on dynamic styling and hover effects.

Learn how display and position CSS shape page layouts, exploring display inline, block, none, and the powerful roles of flex and grid, plus fixed and absolute positioning.

Learn how to apply box shadows and text shadows with x axis, y axis, color, blur, and spread to create a 3d effect and improve readability on web elements.

Master CSS gradients with linear gradients, using background-image to fade from one color to another. Adjust direction (to bottom, to top, bottom right) and include multiple colors for rich transitions.

Use a single opacity value to control how see-through an element is. Try 70% for partial transparency or 30% for a nearly invisible overlay behind a pop up.

Learn to use cursor and hover styling in CSS to signal clickability with a pointer cursor and to change gradients on hover for a purple box.

Explore the theory of javascript variables, learn how to run javascript in node js and the browser console, and understand var, let, and const declarations and mutability via console log.

Explore numeric variable types in JavaScript, compare var, let, and const, and learn how numbers are handled and block scoped, including precision caveats and basic operators.

Learn to declare non-numeric variables in JavaScript, including strings and dates, using let and console log; explore creating and parsing date values and the Unix epoch.

Explain the theory of javascript operators and conditionals, covering mathematical and comparison operators, then introduce conditional statements like if, else, ternary, switch, and try and catch.

Learn how to use mathematical operators in JavaScript with variables, including add, subtract, multiply, divide, and modulus. Explore the Math object for powers, square roots, and cube roots.

Explore JavaScript conditional operators, including greater than, less than, equality comparisons. Learn loose vs strict equality with double and triple equals, and how case sensitivity affects string and number comparisons.

Master if else and else if control flow using conditional statements, equality comparisons, and else blocks. Learn how to convert a string to a number and explore one-liner ternary approaches.

Master ternary expressions and nullish coalescing in JavaScript by using the question mark and colon for inline conditions and defaults when values are null or undefined.

Master error handling with try catch in JavaScript: trigger errors with throw, handle them in catch, and use finally to keep the program running.

Explore arrays and objects in JavaScript, focusing on zero-based indices and how to access and edit items. Learn JSON, including parse and stringify, for data transfer between systems.

Explore JavaScript arrays by creating a mixed-type array, accessing items via indices, and using length, at, and index of to retrieve values, including nested arrays.

Edit arrays by changing values at indices, appending with push, inserting in the middle with splice, and removing items with pop or splice.

Explains how assigning an array copies the reference rather than values, demonstrates slice versus splice behavior, and clarifies ending indices for slice before moving to split and join.

Edit javascript objects by adding, updating, and deleting keys with the delete keyword, and explore json stringify and parse for object and array conversion in angular typescript models.

Setting a new variable to an existing object creates a reference to the same object, so edits affect both. Learn object copy and reference semantics in JavaScript.

Learn how json stringify and parse convert objects into strings and back, creating independent cloned objects, enabling easy storage in text files, browser storage, or an API.

Master for loops to iterate arrays in JavaScript, initialize index i, use length-based end condition, and increment or decrement, printing items with console log, and compare to for each.

Discover how to use the for each loop in JavaScript to iterate arrays, access values with an arrow function, and identify the last item by its index.

Learn how the while loop mirrors the for loop, needing a declared index and increment to avoid infinite loops. It logs array elements and introduces the upcoming do-while loop.

Explore the do-while loop and see how it differs from a while loop by executing the block at least once before evaluating the condition, with a clear code example.

Explore the continue keyword in loops, showing how it skips remaining code and advances to the next iteration, in contrast to break. Examples demonstrate with while, for and do-while loops.

Learn how to declare reusable JavaScript functions using the function keyword, understand hoisting, and call functions with parentheses to execute code like console.log.

Explore how immediately invoked function expressions run on creation, using anonymous arrows or named functions, and learn how hoisting affects execution and one-time calls.

Explore how arguments drive dynamic functions by testing even and odd numbers, combining multiple inputs, and displaying results with modulus and console logs.

Set default values for function arguments to enable omission. Shows the ad numbers function with a zero default for the third argument, enabling two numbers as inputs to yield 19.

Learn how to return a value from a function with the return keyword, store results, and understand dynamic functions that can be passed or returned.

Learn how to pass a function as an argument and use a callback. Distinguish calling the callback from passing it, with examples of dynamic function arguments.

Learn to return a function from another function using anonymous arrow functions, pass callbacks, and create dynamic nested functions in JavaScript, setting up for promises in the next lecture.

Discover how promises control asynchronous flow in JavaScript by creating a promise, using resolve, and delaying with setTimeout, and handle completion using then, await, and async.

Clarify queues and stacks by contrasting first in, first out versus last in, first out, using line and book metaphors, and note recursion builds a stack and potential overflow.

Understand how recursive functions call themselves and add layers to the call stack. Learn why loops are often safer than recursion and how stack overflow can occur.