HTML, CSS, and JavaScript Web Development Fundamentals

What is an HTML element or tag?

Elements and Tags - define different parts of a webpage, they are the building blocks of the page. For example,

begins a paragraph element and

closes it.

What is a void element in HTML?

img is an example of a 'self-closing element', meaning it does not require an ending tag More precisely HTML calls and
void elements; they never have closing tags.

What is the basic HTML document structure?

defines the page document type and version; is the root element; is where metadata is defined; is where we include content that will be visible to the user The doctype triggers standards mode in modern browsers; visible page content generally belongs in .

What is the difference between elements and attributes?

Elements and Tags - define different parts of a webpage, they are the building blocks of the page. Attributes - modifiers that either apply identification to an element or alter the elements behavior or styling. For example, href specifies where an link points.

Explain Attributes.

Attributes - modifiers that either apply identification to an element or alter the elements behavior or styling. For example, id identifies an element and alt provides text for an image.

Explain Inline vs. Block Elements.

div takes up all of the available width of its container element; span does NOT take up all the width of its container element A div is block-level by default; a span is inline by default. CSS can alter their display.

Explain Block-Level Elements.

Behavior: They always start on a new line and take up the full width available (stretching from left to right). Structure: They can contain both other block-level elements and inline elements. You should be able to explain a simple webpage example.

Explain Inline Elements.

Behavior: They do not start on a new line. They only take up as much width as their content requires. Structure: They should generally only contain data or other inline elements; putting a block-level element inside an inline element is usually invalid HTML. You should be able to explain a simple webpage example.

Explain Links and Media.

: Anchor (creates hyperlinks using the href attribute). : Image (embeds images using the src and alt attributes). You should be able to explain a simple webpage example.

What is the action attribute in an HTML form?

Action - where the form data goes The action attribute gives the submission URL; method selects GET or POST.

What is an HTML checkbox?

Checkboxes Checkboxes let a user choose multiple independent options; selected values are included when submitted.

What is an HTML radio button?

Radio Selection Radio inputs sharing a name form a group where only one choice can be selected.

What is an HTML submit button?

A button of type 'submit' is required for the form A submit button triggers a form submission; pressing Enter may also submit a form in some contexts.

Explain Additional Input Attributes.

Beyond name and value, a few attributes are common enough to know up front. You should be able to explain a simple webpage example.

Explain Labels and Textareas.

provides a text caption for a control. It is essential for accessibility: screen readers announce the label, and clicking the label focuses or toggles its associated control. The for attribute links the label to a control's id. You should be able to explain a simple webpage example.

What is ?

is the multi-line sibling of . It is used for longer free-form text (comments, messages, bios). Its size is set with the rows and cols attributes. You should be able to explain a simple webpage example.

Explain Specialized Inputs: Select and Multi-Select.

When options are limited and predefined, and elements provide a cleaner user experience than raw text inputs. You should be able to explain a simple webpage example.

What is CSS?

CSS - Cascading Style Sheets (CSS) is used to describe the presentation of HTML elements on a web page. CSS controls colors, spacing, typography and layout, separating appearance from HTML structure.

Explain Targeting Elements: Selectors.

CSS rules are applied to nodes within the DOM Selectors determine which page elements receive a style declaration.

Explain Combinators & Sibling Selectors.

Sometimes, you want to style an element based on its relationship to another element in the HTML tree. Descendant Selector (space): Targets an element inside another element. Relate this to which element gets styled and why.

In CSS, explain Child Selector (>).

Targets only the immediate children of an element. Relate this to which element gets styled and why.

What is CSS specificity?

Specificity - rules that determine which style to apply when an element has multiple conflicting styles For competing declarations at the same cascade priority, ID selectors generally outrank class selectors, which outrank type selectors.

Explain CSS Variables (Custom Properties).

CSS Variables allow you to store specific values (like a brand color) in one place and reuse them throughout your entire stylesheet. This makes large-scale styling much easier to maintain. Relate this to which element gets styled and why.

Explain Positioning.

The position property in CSS determines how an element is positioned in the document and how it behaves relative to other elements. static is normal flow; relative offsets itself; absolute uses a containing block; fixed anchors to the viewport; sticky responds to scrolling.

In CSS, what does fixed mean?

Removes the element from the flow and positions it relative to the viewport (the visible browser window). It stays put when the page scrolls. Relate this to which element gets styled and why.

What is Flexbox?

Flexbox - is a CSS layout system designed to make it easier to arrange and align elements inside a container. It lays out items along a main axis and a cross axis; justify-content aligns along the main axis.

Explain CSS Grid.

CSS Grid is a two-dimensional layout system. It allows you to work with both rows and columns simultaneously. It is the best tool for building the "macro" layout of an entire webpage. Relate this to which element gets styled and why.

What are CSS media queries?

Media Queries - let us apply different styles depending on the host device's characteristics, such as screen size, resolution, or orientation. Use @media rules to adjust a layout at different viewport widths.

What is JavaScript?

JavaScript is a high-level, interpreted programming language primarily used to make web pages interactive and dynamic. It handles events, updates the DOM, and communicates with servers; JavaScript is dynamically typed.

What are the JavaScript primitive types?

String - text values; Number - integers and decimals; Boolean - true or false; Undefined - variables that are declared but never assigned a value; Null - intentional 'empty' value; Symbol - unique identifier; BigInt - for very large integers beyond Number's limit These are JavaScript primitive types; typeof helps inspect many values, though typeof null is 'object'.

Explain Primitives vs. Objects.

Understanding the conceptual boundary between Primitives and Objects is crucial for mastering JavaScript memory management and behavior. Value vs. Reference: Primitives are passed by value. When you assign one primitive to another, a copy of the value is created. Objects are passed by reference. When you assign one object to another, both variables point to the same memory address. Try to explain a short JavaScript code example.

What is == vs ===?

== equal to; === equal to and equal data type == may perform type coercion, while === compares without coercion; e.g. 5 == '5' is true but 5 === '5' is false.

What is variable scope in JavaScript?

Variable Scope determines where a variable may be referenced var is function-scoped; let and const are block-scoped.

In JS Fundamentals, explain Block Scope.

Variables declared within a {} block (like if statements or for loops). This was introduced in ES6 to provide more granular control. Try to explain a short JavaScript code example.

What is hoisting?

Hoisting is a behavior in which variables and function declarations are moved (or hoisted) to the top of their containing scope during compilation, before the code is executed. In practice, declarations are processed before execution: var reads as undefined before assignment, while let/const remain in the temporal dead zone.

Explain Strict Mode.

Strict Mode is a way to opt in to a stricter set of rules that help us write cleaner and safer code. JavaScript modules run in strict mode automatically; it rejects some error-prone behaviors.

What is a function?

Function - A reusable block of code that can be executed (called) when needed A function may accept parameters and return a result.

What is an arrow function?

Arrow Functions are a concise way to write functions compared to traditional function expressions For example, (a, b) => a + b; arrow functions also capture this lexically.

Explain Closures: Function + Lexical Environment.

A Closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). This allows an inner function to access variables from an outer function even after the outer function has finished executing. Try to explain a short JavaScript code example.

What is this?

this is one of the most misunderstood concepts in JavaScript. It is a keyword that refers to an execution context—essentially, it points to the object that is currently "owning" or executing the code. Try to explain a short JavaScript code example.

Explain Template Literals.

Template Literals are a modern, more powerful way to work with strings in JavaScript. Introduced in ES6, they replace the older method of string concatenation (using the + operator) with a much cleaner, more readable syntax using backticks ( ). Try to explain a short JavaScript code example.

What is a JavaScript array?

Array is a special type of variable that can store multiple values in a single container Elements are ordered and zero-indexed, e.g. scores[0] reads the first item.

Explain Exception Handling: try...catch...finally.

To prevent a single error from crashing your entire application, you use a try...catch block. This creates a "safety net" around risky code. Try to explain a short JavaScript code example.

What is the DOM?

The Document Object Model (DOM) - represents a web page as a tree of objects, allowing CSS & JavaScript to access, manipulate, and modify the content and styling For example, document.querySelector('p') selects the first matching paragraph.

How do you select DOM elements in JavaScript?

getElementById() - returns single element; getElementsByClassName() - returns a HTML collection; querySelector() - returns first matching element based on CSS selector; querySelectorAll() - returns a NodeList with all matching elements using a CSS selector Use querySelector('#header') for one element or querySelectorAll('.item') for all matching items.

How can JavaScript add or remove DOM elements?

createElement() - creates an element with specified tag; appendChild() - attaches an element as a child of the specified element; removeChild() - removes a specified element from the DOM For example, create a

, set its textContent, then append it to a

.

Explain Creating and Removing Elements.

To build new parts of the UI: 1. Create: const newDiv = document.createElement('div'); 2. Configure: newDiv.textContent = 'I am new!'; 3. Inject: parentElement.appendChild(newDiv); or parentElement.prepend(newDiv); Try to explain a short JavaScript code example.

What is an event listener?

Event Listeners 'listen' for events and execute a function when they occur addEventListener('click', handler) attaches the handler to clicks.

What are capturing and bubbling?

First, the event starts at the root of the DOM (document) and traverses down to the element that triggered the event. This is called the Capturing Phase. Then, when at the element that triggered the event, we are in the Target Phase. Finally, the event moves back up the DOM towards the root, this is the Bubbling Phase. Ordinary addEventListener handlers run in the bubbling phase unless capture: true is specified.

Explain Event Delegation: A Powerful Pattern.

Instead of adding a listener to every single child element (which is slow and memory-intensive), you can add one listener to a common parent. Because events bubble up, the parent will catch the event as it passes through. Try to explain a short JavaScript code example.

How do preventDefault and stopPropagation differ?

event.stopPropagation() - stops the event from continuing further; event.stopImmediatePropagation() - also stops other listeners on the same element; event.preventDefault() - prevents the default action For a form, preventDefault() can stop the browser's normal submission/navigation behavior.

What is JSON (JavaScript Object Notation)?

JSON (JavaScript Object Notation) is the universal language of web APIs. While it is derived from JavaScript object syntax, it is a text-based, language-independent data format used to serialize and deserialize data during HTTP transmission. Try to explain a short JavaScript code example.

What is async/await?

Async/Await - is a modern syntax for working with asynchronous code in a way that looks and behaves more like synchronous code An async function returns a Promise; await pauses that function until the awaited promise settles.

What is TypeScript?

TypeScript is JavaScript + Types TypeScript checks types during development and is compiled/transpiled into JavaScript for execution.

Explain JavaScript vs. TypeScript.

The fundamental difference between these two languages lies in when and how types are validated. Type checking happens during development, before JavaScript runs.

Explain Simple or Variable Types.

TypeScript provides several primitive types that represent the simplest forms of data. Type checking happens during development, before JavaScript runs.

Explain Special Types.

Beyond primitives, TypeScript includes special types to handle more nuanced scenarios, such as "nothingness" or "anything." Type checking happens during development, before JavaScript runs.

In TS Basics, what does unknown mean?

The "safe" version of any. Type checking happens during development, before JavaScript runs.

Explain Union Types.

A Union Type lets a value be one of several possible types, using the | (pipe) operator. Type checking happens during development, before JavaScript runs.

Explain Object Types.

In TypeScript, you can define the shape of an object directly. Type checking happens during development, before JavaScript runs.

What is a TypeScript type alias?

We can create type aliases with the 'type' keyword: ID is either a string OR a number Example: type ID = string | number; defines a reusable name for a union type.

What is a TypeScript interface?

We use interfaces to define reusable types An interface describes an object's required properties; e.g. interface User { name: string; age: number; }.

Explain Casting (Type Assertions).

With TypeScript we assign types A type assertion such as value as string tells the compiler how to treat a value but does not convert it at runtime.

Explain Classes.

With TypeScript we assign types A class defines a reusable object blueprint with constructors, properties, and methods.

What is a TypeScript generic?

'T' represents a generic type Example: function identity(value: T): T returns the same type it receives.

Explain Utility Types.

TypeScript provides a set of built-in Utility Types to perform common type transformations. These are essential for keeping your code DRY (Don't Repeat Yourself) and managing complex data structures. Type checking happens during development, before JavaScript runs.

Explain Keyof Operator.

The keyof operator takes an object type and produces a string or numeric literal union of its keys. It is a powerful way to ensure that a value is a valid property name of a specific type. Type checking happens during development, before JavaScript runs.

Explain Decorators.

Decorators are a special kind of declaration that can be attached to a class, method, accessor, property, or parameter. They use the @expression form and are essentially functions that receive the thing they are decorating as an argument. Type checking happens during development, before JavaScript runs.

Explain Functions.

Typing functions correctly is critical for ensuring that data flows through your application without errors. TypeScript allows you to define the types of parameters, the return type, and even the function signatures in specific contexts. Type checking happens during development, before JavaScript runs.

Explain Function Type Expressions.

Sometimes you want to define a type that describes a function's signature so it can be passed as a variable or a callback. Type checking happens during development, before JavaScript runs.

Explain Optional and Default Parameters.

TypeScript allows you to mark parameters as optional using the ? symbol or provide default values. Type checking happens during development, before JavaScript runs.

Explain Function Overloads.

When a function can be called in multiple ways with different parameter types or counts, you can use Function Overloads to provide specific signatures for each case. Type checking happens during development, before JavaScript runs.

Explain Const Assertions (as const).

The as const assertion is a powerful tool used to tell the TypeScript compiler to treat an expression with maximum literal precision, preventing Type Widening. Type checking happens during development, before JavaScript runs.

Explain Type Guards.

Type Guards are mechanisms that allow you to narrow down the type of a variable within a specific logic branch. This bridges the gap between runtime reality and compile-time assumptions. Type checking happens during development, before JavaScript runs.

Explain User-Defined Type Guards.

For complex logic, you can create a function that returns a Type Predicate (parameterName is Type). Type checking happens during development, before JavaScript runs.

Explain Interface vs. Type.

One of the most frequent points of confusion in TypeScript is deciding between interface and type. While they often overlap, they serve different architectural purposes. Type checking happens during development, before JavaScript runs.

What is tsconfig.json?

tsc --init -> generates tsconfig.json file (compiler settings) tsconfig.json controls how TypeScript checks and emits project code.

In TS Config, explain strictNullChecks.

Forces you to explicitly handle null and undefined values, preventing the dreaded "Cannot read property of undefined" errors. Type checking happens during development, before JavaScript runs.

Why use string union types instead of enums?

We typically use 'type' syntax instead of defining an actual enum with 'enum' keyword String literal unions like type Status = 'loading' | 'success' | 'error' have no generated enum object at runtime.

What is Angular?

Angular is a powerful, open-source web application framework led by Google. It is designed specifically for building scalable, high-performance, and enterprise-grade web applications. Unlike lightweight libraries that focus only on the "View" layer, Angular is a Full-Featured Framework, providing a comprehensive suite of tools for routing, forms, client-server communication, and more. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Single Page Applications (SPA).

To understand why Angular is used, one must first understand the architecture of Single Page Applications (SPA). Explain where this fits in a component, service, or template in an Angular SPA.

Explain Angular Setup.

To begin developing with Angular, you must first prepare your local development environment. Prerequisites: 1. Node.js: The runtime environment required to run Angular tools and manage packages. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Angular CLI.

The Angular CLI (Command Line Interface) is the backbone of Angular development. It is a powerful tool that automates almost every aspect of the development lifecycle. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Component Fundamentals.

A component consists of a TypeScript Class decorated with the @Component decorator. This decorator provides the metadata that tells Angular how to process the class. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Component Lifecycle.

Angular manages the entire life of a component through a series of Lifecycle Hooks. These are special methods that allow you to "tap into" specific moments in a component's existence. Explain where this fits in a component, service, or template in an Angular SPA.

In Angular Components, what does ngOnChanges mean?

When an @Input() property value changes. Explain where this fits in a component, service, or template in an Angular SPA.

In Angular Components, what does ngOnDestroy mean?

Just before the component is destroyed. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Component Styles.

Angular provides View Encapsulation, a mechanism that prevents the CSS of one component from "leaking" out and affecting other parts of the application. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Emulated vs. ShadowDom.

While both provide isolation, Emulated is the default because it works even in older browsers that don't support native Shadow DOM. ShadowDom offers a "cleaner" separation but can make it harder to style child components from the outside. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Change Detection.

Change Detection is the process by which Angular detects that a value has changed and updates the DOM accordingly. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Change Detection Strategies.

To optimize performance, Angular provides two primary strategies to control how often this check happens: 1. ChangeDetectionStrategy.Default: Behavior: The component is checked every single time any change detection cycle runs anywhere in the app. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Dynamic Components.

Dynamic Components are components that are not hard-coded into a template but are instantiated programmatically at runtime. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Modern Shift: Standalone Components.

With the move toward Standalone Components, the need for NgModules is drastically reduced. A standalone component manages its own dependencies via the imports array in its @Component decorator, effectively acting as its own mini-module. Explain where this fits in a component, service, or template in an Angular SPA.

Explain NgModule vs. Standalone.

The transition from NgModules to Standalone Components represents a fundamental shift in how Angular applications are architected and scaled. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Templates.

An Angular template can be defined in two primary ways: Inline or External. The choice between them usually depends on the complexity and size of the component's view. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Template Statements.

Template Statements are expressions embedded within the template that allow you to perform actions, such as responding to user events or updating component properties. They are the "glue" that makes your UI interactive. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Interpolation vs. Property Binding.

It is important to distinguish between showing data and setting properties. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Template Reference Variables.

A Template Reference Variable is a local variable that allows you to access a specific DOM element or an Angular component/directive directly within the template. This is incredibly useful for reading values from inputs or passing an element into a function without needing to bind it to a class property first. Explain where this fits in a component, service, or template in an Angular SPA.

Explain Content Projection.

Content Projection is a pattern that allows you to "insert" or "project" HTML content from a parent component into a specific location within a child component. This is the mechanism that makes Angular components truly reusable, acting much like the element in Web Components. Explain where this fits in a component, service, or template in an Angular SPA.

Explain One-Way Data Binding.

One-Way Data Binding is a unidirectional flow where information moves in exactly one direction. In Angular, this typically means data flows from the Component Class to the Template. Explain where this fits in a component, service, or template in an Angular SPA.