Public24 cardsby @donk

Web Development Fundamentals

HTML structure, CSS selectors and the box model, JavaScript basics, the DOM, HTTP methods, and how the browser, server, and database fit together.

Cards (24)

1
Front
What does HTML stand for and what is its primary purpose?
Back
HyperText Markup Language. It defines the structure and content of web pages using elements represented by tags.
2
Front
What is the correct basic structure of an HTML document?
Back
<!DOCTYPE html>, <html>, <head> (metadata, title, links), and <body> (visible content) elements, in that nesting order.
3
Front
What is the difference between an HTML element and an HTML attribute?
Back
An element is a tag pair and its content (e.g., <p>text</p>). An attribute is extra information inside the opening tag (e.g., href='url' in <a>).
4
Front
What is the difference between block-level and inline HTML elements?
Back
Block-level elements (e.g., <div>, <p>) start on a new line and take full width. Inline elements (e.g., <span>, <a>) flow within text and take only as much width as needed.
5
Front
What are semantic HTML elements and why do they matter?
Back
Semantic elements like <header>, <nav>, <main>, <article>, and <footer> describe meaning, improving accessibility and SEO compared to generic <div> tags.
6
Front
What is CSS specificity and how is it calculated?
Back
Specificity determines which CSS rule applies when multiple rules target the same element. It is calculated as (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements), with higher values winning.
7
Front
What is the difference between a CSS class selector and an ID selector?
Back
A class selector (.name) can be applied to multiple elements. An ID selector (#name) must be unique per page. IDs have higher specificity than classes.
8
Front
What are CSS combinators? Name the four types.
Back
Combinators define relationships between selectors: descendant (space), child (>), adjacent sibling (+), and general sibling (~).
9
Front
What are the four components of the CSS box model, from innermost to outermost?
Back
Content, padding, border, and margin.
10
Front
What is the effect of setting box-sizing: border-box in CSS?
Back
It makes the element's specified width and height include padding and border, so adding padding or border does not increase the element's total size.
11
Front
What is the difference between CSS margin and padding?
Back
Padding is the space between the content and the element's border (inside the box). Margin is the space outside the border, separating the element from others.
12
Front
What are the three ways to include CSS in an HTML document?
Back
Inline styles (style attribute on elements), internal styles (<style> tag in <head>), and external stylesheets (linked with <link rel='stylesheet'>).
13
Front
What is the difference between var, let, and const in JavaScript?
Back
var is function-scoped and hoisted. let is block-scoped and not hoisted to usable state. const is block-scoped, not hoisted to usable state, and cannot be reassigned.
14
Front
What is the difference between == and === in JavaScript?
Back
== checks for value equality with type coercion. === checks for both value and type equality without coercion (strict equality).
15
Front
What is a JavaScript callback function?
Back
A function passed as an argument to another function, to be executed after a certain event or operation completes.
16
Front
What is the difference between null and undefined in JavaScript?
Back
undefined means a variable has been declared but not assigned a value. null is an explicit assignment indicating 'no value' or an intentional absence of an object.
17
Front
What is the DOM in web development?
Back
The Document Object Model is a tree-structured, in-memory representation of an HTML document that browsers create, allowing JavaScript to read and modify page content, structure, and styles.
18
Front
What does document.querySelector() do and how does it differ from document.querySelectorAll()?
Back
querySelector() returns the first element matching a CSS selector. querySelectorAll() returns a NodeList of all matching elements.
19
Front
What is event bubbling in the DOM?
Back
When an event fires on a child element, it propagates upward through ancestor elements, triggering any matching event listeners on each ancestor in order.
20
Front
What are the four main HTTP methods and their intended uses?
Back
GET (retrieve data), POST (submit/create data), PUT (replace/update data), DELETE (remove data).
21
Front
What is the difference between an HTTP 4xx and a 5xx status code?
Back
4xx codes indicate client-side errors (e.g., 404 Not Found, 401 Unauthorized). 5xx codes indicate server-side errors (e.g., 500 Internal Server Error).
22
Front
What is the role of a web server in the browser-server-database architecture?
Back
The web server receives HTTP requests from the browser, processes or routes them (often running application logic), communicates with the database if needed, and returns an HTTP response.
23
Front
What is the role of a database in a web application?
Back
The database persistently stores and manages application data. The server queries or updates it in response to client requests and returns the relevant data to form a response.
24
Front
What happens step-by-step when a user types a URL and presses Enter in a browser?
Back
The browser performs a DNS lookup to resolve the domain to an IP address, opens a TCP connection to the server, sends an HTTP GET request, the server processes it and returns an HTTP response, and the browser parses HTML/CSS/JS to render the page.

Study this deck free

Create a free account to flip through these flashcards, quiz yourself, play match, and track what you've mastered — or fork the deck to make it your own.

Get started free Log in