HTML, CSS & JavaScript Fundamentals: Web Development Study Guide
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/250
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced | Call with Kai | Chat |
|---|
No analytics yet
Send a link to your students to track their progress
251 Terms
Term
Definition
Explain HTML Tags.
Tags are the fundamental building blocks of HTML. They are used to mark the beginning and end of an element.
Explain Self-Closing Tags (Void Elements).
Some elements do not have a closing tag because they do not wrap around any content. These are called void elements or self-closing tags. ; : A line break. : An image.
Explain HTML Document Structure.
Every professional HTML document must follow a specific, standardized structure to be interpreted correctly by browsers.
Explain Elements and Attributes.
An Element is the combination of the tags and the content. An Attribute provides additional information about an element.
Explain Attributes.
Attributes are always placed inside the opening tag and usually come in name/value pairs like name="value". Common Attributes: id: A unique identifier for an element. No two elements in a document should share the same ID.
Explain Inline vs. Block Elements.
In the CSS box model, every element is either a Block-level element or an Inline element. This determines how they flow and stack on the page.
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.
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.
Explain Text Content.
to : Headings (h1 is the most important, h6 the least).
: Paragraph for blocks of text. : Indicates strong importance (usually rendered as bold).
Explain Structural/Container Tags.
In HTML Forms, what does action mean?
The URL of the server-side script that will process the form data.
In HTML Forms, what does checkbox mean?
Allows selecting one or more options from a list.
In HTML Forms, what does radio mean?
Allows selecting only one option from a group.
In HTML Forms, what does submit mean?
A button that triggers the form submission.
Explain Additional Input Attributes.
Beyond name and value, a few attributes are common enough to know up front.
Explain Labels and Textareas.
What is
. It is used for longer free-form text (comments, messages, bios). Its size is set with the rows and cols attributes.
Explain Specialized Inputs: Select and Multi-Select.
When options are limited and predefined,
Explain Multi-Select Capabilities.
To allow a user to select more than one option, simply add the multiple attribute to the
Explain Data Encoding (The enctype Nuance).
Choosing the correct enctype is critical for successful server-side processing.
What is CSS (Cascading Style Sheets)?
CSS (Cascading Style Sheets) is the language used to describe the presentation of a document written in a markup language like HTML. While HTML provides the structure (the bones), CSS provides the style (the skin, clothes, and layout).
Explain Targeting Elements: Selectors.
Selectors are the patterns used to "select" the HTML elements you want to style.
Explain Basic Selectors.
Most styling begins with the most fundamental ways to target elements.
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.
In CSS, explain Child Selector (>).
Targets only the immediate children of an element.
Explain Advanced Selectors.
Modern CSS provides powerful "pseudo-class" selectors to target elements based on their state or position.
Explain Specificity.
Specificity is the mathematical weight used by the browser to decide which CSS rule "wins" when multiple rules target the same element. It is calculated using a three-column scoring system: ID, CLASS, and TYPE.
Explain Complex Selectors & Exceptions.
Combinators: Operators like +, >, ~, and (space) help target specific elements but add zero weight to the specificity score. The Universal Selector () and :where(): These have a specificity of 0-0-0. They are useful for resetting styles without affecting the weight of other rules.
Explain Resolving Ties (When Scores are Equal).
If two selectors have the exact same score (e.g., both are 0-1-1), the browser uses two tie-breaking rules: 1. Scoping Proximity: (Advanced) The selector closer to the element in the DOM tree wins.
Explain Core CSS Properties.
Properties are the individual instructions you give to a selector. Typography: font-family, font-size, font-weight, text-align, line-height. Color & Background: color, background-color, background-image, opacity.
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.
Explain Positioning.
The box model and layout systems control how elements flow, but position controls where an element is placed — including lifting it out of the normal flow entirely. The position property has four commonly used values
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.
Explain Flexbox (Flexible Box Layout).
Flexbox is a one-dimensional layout system. It is designed to lay out items in a single direction—either a row or a column. It is perfect for components like navigation bars, centering items, or distributing space evenly.
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.
Explain Adaptive Design: Responsive Web Design.
Responsive Web Design (RWD) is the practice of creating websites that "respond" to the user's screen size, orientation, and platform. The core pillars of RWD are: 1. Fluid Grids: Using relative units (like %, vw, vh) instead of fixed units (like px) so elements resize proportionally.
What is Responsive Web Design (RWD)?
Responsive Web Design (RWD) is the practice of creating websites that "respond" to the user's screen size, orientation, and platform.
Explain Choosing Units.
When deciding between fixed and relative units, prefer relative ones for anything that should adapt to the screen. Two of the most useful relative units are: em: Relative to the parent element's font size. Good for sizing things in relation to their context.
Explain JavaScript Introduction.
JavaScript is a high-level, interpreted (just-in-time compiled) programming language that conforms to the ECMAScript specification. It is a multi-paradigm language, supporting event-driven, functional, and imperative programming styles.
Explain Datatypes.
In JavaScript, data is categorized into two primary groups: Primitives and Objects.
Explain Primitives.
Primitives are immutable and represent a single value. String: Textual data. Number: Integers and floating-point numbers. Boolean: true or false. Undefined: A variable that has been declared but not assigned a value.
Explain Objects.
Objects are collections of properties (key-value pairs) and are mutable. This includes Arrays, Functions, and Dates.
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.
Explain Loose vs. Strict Equality.
Equality is where coercion most often bites. The loose operators (== / !=) coerce both sides before comparing, while the strict operators (=== / !==) compare type and value with no coercion.
Explain Variable Scopes.
Scope determines the accessibility (visibility) of variables within different parts of your code. Understanding scope is fundamental to preventing variable collisions and managing memory efficiently.
In JS Fundamentals, explain Global Scope.
Variables declared outside any function or block. They are accessible from anywhere in the script.
In JS Fundamentals, explain Function Scope.
Variables declared within a function. They are only accessible within that specific function.
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.
Explain Hoisting.
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase. This allows some functions to be called before they appear to be defined in the code.
Explain Strict Mode.
Strict Mode ("use strict";) is a way to opt into a restricted variant of JavaScript. It is not a separate language, but a mode that makes the engine enforce stricter parsing and error handling, helping you write more secure and optimized code.
Explain Functions.
Functions are the fundamental building blocks of JavaScript. They are reusable blocks of code designed to perform specific tasks, allowing for abstraction, modularity, and the implementation of complex logic through composition.
Explain Function Declarations vs. Expressions.
The way a function is defined in JavaScript significantly impacts its behavior, particularly regarding hoisting and scope.
Explain Arrow Functions and Default Parameters.
Modern JavaScript (ES6+) introduced more concise ways to write functions, specifically targeting common patterns like short callbacks and parameter handling.
Explain Arrow Functions.
Arrow functions provide a compact syntax and, crucially, lexical this binding. Unlike traditional functions, they do not create their own this context; instead, they inherit it from the enclosing scope.
Explain Default Parameters.
To prevent errors caused by undefined arguments, Default Parameters allow you to specify fallback values directly in the function signature.
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.
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.
Explain Explicit Binding (call, apply, bind).
You can manually "force" a function to use a specific object as its this context.
Explain Constructor Binding (new).
When you use the new keyword, JavaScript creates a new object and sets this to point to that object.
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 ( ).
Explain Arrays.
Arrays are high-level, list-like objects used to store ordered collections of multiple values under a single variable name. Unlike many other languages, JavaScript arrays are dynamic—they can grow or shrink in size automatically, and they can hold a mix of different data types (though keeping them homogeneous is a best practice for clarity).
Explain A. Copying and Merging Arrays.
Instead of using complex loops, you can use spread to create shallow copies or combine multiple arrays.
Explain B. Merging Objects.
Spread works on objects too, allowing you to combine properties or overwrite existing ones.
Explain A. Gathering Function Arguments.
When you don't know how many arguments will be passed to a function, use Rest to capture them all.
Explain B. Destructuring with Rest.
Rest is powerful when you want to extract specific pieces of data and group "everything else" together.
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.
Explain DOM Structure.
The DOM represents an HTML document as a Tree Structure. Every element, attribute, and piece of text in your HTML becomes a Node in this tree.
Explain Selecting Elements from the DOM.
To change something, you must first find it. JavaScript provides several methods to locate nodes within the tree.
In JavaScript DOM, what does querySelector() mean?
The first element matching a CSS selector.
Explain Live vs. Static Collections.
One of the most common pitfalls in DOM manipulation is the difference between these two collection types: 1. HTMLCollection (Live): If you select all .item elements and then add a new .item to the page via JavaScript, the collection automatically updates to include the new one.
Explain DOM Manipulation.
Manipulation involves changing the content, attributes, or style of the nodes you have selected.
Explain Modifying Attributes and Styles.
You can interact with an element's properties directly or through dedicated methods. Attributes: Use element.setAttribute('name', 'value') and element.getAttribute('name').
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);
Explain Traversing the DOM.
Traversing is the act of moving from one node to another based on their relationship in the tree (Parent, Child, or Sibling).
Explain Events and Listeners.
Events are signals that something has happened in the browser (a click, a keypress, a scroll). Event Listeners are the functions that "listen" for these signals and execute code in response.
Explain Common Event Types.
Mouse Events: click, dblclick, mouseenter, mouseleave, mousemove. Keyboard Events: keydown, keyup, keypress. Form Events: submit, change, input, focus, blur.
Explain Bubbling & Capturing.
When an event happens on an element, it doesn't just trigger on that one element. It travels through the DOM tree in a specific pattern.
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.
Explain Stopping the Flow.
Sometimes you want to prevent an event from bubbling up to parents. e.stopPropagation(): Stops the event from moving further up (or down) the tree. e.preventDefault(): Prevents the browser's default behavior (e.g., stops a link from navigating or a form from submitting).
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.
In JS HTTP, what does Parsing Speed mean?
Very Fast (native JSON.parse())
In JS HTTP, what does Data Types mean?
Supports Strings, Numbers, Booleans, Objects, Arrays, Null
Explain Managing Asynchronicity: From Callbacks to Async/Await.
In JavaScript, an HTTP request is an asynchronous operation. If JavaScript waited for a server to respond before moving to the next line of code, the entire website would "freeze." We use different patterns to manage this "waiting" period.
Explain Handling Different HTTP Methods.
While fetch defaults to a GET request, you can perform POST, PUT, PATCH, or DELETE by passing an options object.
Explain What Is TypeScript?.
TypeScript is an open-source programming language developed and maintained by Microsoft. It is a syntactic superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code.
Explain JavaScript vs. TypeScript.
The fundamental difference between these two languages lies in when and how types are validated.
Explain When Should I Use TypeScript?.
While TypeScript is incredibly powerful, it is not a "one-size-fits-all" solution. Deciding when to adopt it depends on the scale and nature of your project.
Explain ✅ Use TypeScript When.
Building Large-Scale Applications: As the number of files and contributors increases, the "safety net" of types becomes indispensable for preventing regression bugs. Working in Teams: Types serve as living documentation. When a teammate changes a function signature, the compiler informs everyone else immediately via build errors.
What is TypeScript?
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It is a superset of JavaScript, meaning all valid JavaScript is also valid TypeScript. Instead of running directly in the browser, TypeScript code must be transpiled into JavaScript via the TypeScript Compiler (tsc).
Explain What is TypeScript?.
While JavaScript is dynamically typed (types are checked at runtime), TypeScript is statically typed (types are checked at compile-time). This allows you to catch errors during development rather than in production.
Explain Simple or Variable Types.
TypeScript provides several primitive types that represent the simplest forms of data.
In TS Basics, what does array mean?
A collection of elements of the same type.
Explain Special Types.
Beyond primitives, TypeScript includes special types to handle more nuanced scenarios, such as "nothingness" or "anything."
In TS Basics, what does any mean?
Opt-out of type checking.
In TS Basics, what does unknown mean?
The "safe" version of any.
Explain Union Types.
A Union Type lets a value be one of several possible types, using the | (pipe) operator.
Explain Object Types.
In TypeScript, you can define the shape of an object directly.
Explain Type Aliases.
A Type Alias allows you to give a name to a type definition, making it reusable and much easier to read.