This study guide covers possible questions for the Quiz Retake. These are the most frequently missed questions from Quizzes 1-4. I answered each question based on my understanding to help me prepare.
Sources:
Q1. What does the "domain" part of a URL represent?
The domain identifies the server where a website is hosted and points users to where the files are stored.
Q2. Why are web standards important in client-side development?
Web standards ensure that websites work consistently across different browsers, devices, and platforms. They are agreements between browser makers about how HTML, CSS, and JavaScript should be interpreted, so developers can write code once and have it render reliably everywhere.
Q3. What is the concept of Universal Design in web development?
Designing websites so they can be used by as many people as possible, including people with disabilities, without needing special adaptations.
Q4. Which principle is NOT part of the Web Content Accessibility Guidelines (WCAG)?
The four WCAG principles are Perceivable, Operable, Understandable, and Robust (POUR). "Aesthetic" or "Visually appealing" is NOT one of the principles — WCAG focuses on functionality and access, not visual design preferences.
Q5. What is the main benefit of using semantic HTML elements?
Describes meaning and structure so browsers, screen readers, and search engines understand it better — improves accessibility.
Q6. Why is semantic HTML important for accessibility?
Semantic elements like <nav>, <main>, <header>, and <footer> provide meaningful structure that screen readers use to help users navigate the page. Without them, assistive technologies cannot determine the role or organization of content, making the page harder to use for people with disabilities.
Q7. Which statement about block and inline HTML elements is correct?
Block elements (like <div>, <p>, <h1>) start on a new line and take up the full available width. Inline elements (like <span>, <a>, <em>) only take up as much width as their content and do not start a new line.
Q8. What is the role of the <head> section in an HTML document?
Contains metadata: page title, character set, and links to stylesheets (used by browsers and search engines).
Q9. What is the purpose of the <label> element in an HTML form?
Associates text with an input field, improving usability and accessibility.
Q10. What is the purpose of the aria-label attribute in HTML?
Provides an accessible name for elements so screen readers can describe them properly.
Q11. On the command line, what does the command cd .. do?
Moves you up one directory to the parent folder.
Q12. What is the difference between an absolute path and a relative path?
Absolute: Full location from root (e.g., /Users/joe/index.html)
Relative: Location based on current directory (e.g., ../index.html)
Q13. What is a git repository (repo)?
A folder that stores a project's files along with their version history, managed using Git. It can exist locally or be hosted online like on GitHub.
Q14. What does a git commit represent?
A saved snapshot of the project at a specific point in time, with a message describing what changed.
Q15. Why is it important to write clear commit messages when using git?
Clear commit messages help collaborators understand what changed and why. They make it easier to track project history, review code, and revert changes when needed. Good messages describe the purpose of the change, not just what files were modified.
Q16. What is the correct sequence of git commands to merge an experiment branch into the main branch?
git checkout main → git merge branch-name. Only commit if conflicts occur.
Q17. What is a merge conflict in git?
When Git cannot automatically combine changes because the same part of a file was edited in different ways.
Q18. Which of the following is the correct process for resolving a merge conflict in git?
Open the conflicted file, manually choose or combine changes, remove conflict markers, then git add and git commit.
Q19. What should you do if someone else has pushed to a remote repository, but you want to push your changes?
Pull the remote changes first, resolve any conflicts if needed, then push your changes.
Q20. What is the primary reason for writing CSS rules in a different file than the HTML?
Separation of concerns, easier maintenance, and reuse. It also keeps HTML cleaner and allows caching of the CSS file.
Q21. What happens if you forget the semicolon at the end of a CSS property declaration?
The browser will usually stop parsing correctly at that point in the rule. Often the next declaration breaks too, so you lose multiple properties, not just one.
Q22. What does the term "cascade" in CSS refer to?
It is how the browser decides which CSS rule wins when multiple rules match the same element, using priority based on specificity and source order.
Q23. Which symbol is used to denote a grouping selector in CSS?
A comma. Example: h1, h2, h3 { ... } applies the same rules to all listed selectors.
Q24. Which selector targets all <p> elements inside a <header>?
header p which is a descendant selector.
Q25. Which selector correctly targets every even-numbered <li> element in an ordered list (with counting starting at 1)?
li:nth-child(even) because counting starts at 1.
Q26. What happens if two CSS rules have the same specificity?
The one that appears later in the stylesheet wins, because later source order overrides earlier when specificity is tied.
Q27. In which scenario would it be most appropriate to use an absolute unit like px in CSS?
Use px when you need a fixed, precise size that should not scale with text size or container size, like thin borders, hairline rules, icon alignment tweaks, or small shadows. For text sizing and layout spacing, relative units are usually better for responsiveness.
Q28. In CSS, what is the difference between padding and margin?
Padding: Space inside the element, between the content and the border.
Margin: Space outside the element, between the border and other elements.
Q29. Which of the following scenarios is the most appropriate scenario to use a Flexbox?
When you want to lay items out in a row or column and control alignment, spacing, and distribution, like a navbar, a card row, or centering content both horizontally and vertically.
Q30. Which CSS property removes an element from both the visible page flow and screen reader's perceived content?
display: none removes it from layout and accessibility tree, so it is not read by screen readers.
Q31. What happens if you use a shorthand property AFTER setting its individual component property earlier in the same rule?
The shorthand will override the earlier component properties for any components it sets, because it is applied later in the same rule. Example: setting margin-left then later setting margin will override margin-left.
Q32. What is the main objective in making a web page responsive?
To make the layout and content usable across different screen sizes, especially small screens first, without forcing horizontal scrolling or tiny unreadable text.
Q33. What does the following media query do? @media (min-width: 768px)
It applies the CSS inside the media query only when the viewport width is at least 768px. At widths below 768px, those rules do not apply.
Q34. Which of the following is most appropriate as a mobile-first design strategy?
Write the default CSS for the smallest screens first, then add min-width media queries to enhance the layout for larger screens.
Q35. What is the recommended way to organize media queries in a CSS stylesheet?
Use a mobile-first approach: write base styles first, then add min-width media queries in increasing order so larger screen overrides come later and are easier to reason about.
Q36. What is a CSS framework?
A pre-built set of CSS classes, patterns, and sometimes components that gives you a consistent design system and layout tools so you do not start from zero. Bootstrap is a common example.
Q37. Why should you use a minified version of a CSS framework file (e.g., bootstrap.min.css) when including it in a webpage?
It is smaller to download, so it loads faster in the browser.
Q38. When using Bootstrap, what is the effect does giving an element the class col-md-6?
At medium screens and larger, the element takes 6 of 12 columns, meaning about half width. Below the medium breakpoint, it falls back to the default stacking behavior unless you also specify smaller breakpoint classes.
Q39. Which of the following best describes JavaScript as a programming language?
JavaScript is a dynamically-typed, interpreted language. Variables adopt the type of their current value (no type declarations needed), and type is determined at runtime. It supports multiple paradigms including object-oriented and functional programming.
Q40. What is the purpose of declaring 'use strict'; at the beginning of a JavaScript file?
It enables strict mode, which catches common coding errors that would otherwise fail silently. For example, assigning to an undeclared variable throws an error in strict mode instead of creating a global variable. It helps prevent bugs and enforces better coding practices.
Q41. Which of the following statements about the const keyword is true?
const declares a variable whose reference cannot be reassigned. However, if the value is an object or array, you CAN still modify its properties or elements — const only prevents reassigning the variable itself. For truly immutable data, you'd need additional techniques like Object.freeze().
Q42. Which of the following statements is NOT true about Object properties in JavaScript?
Object properties can be accessed with dot notation (obj.key) or bracket notation (obj['key']). Bracket notation is required when the key is stored in a variable or contains special characters. Properties can be added, modified, or deleted at any time. It is NOT true that object properties must be declared in advance.
Q43. What is a callback function?
A callback function is a function passed as an argument to another function, which then "calls back" to execute it when needed. For example, in setTimeout(myFunction, 1000), myFunction is the callback that gets executed after 1 second. Don't use parentheses when passing — that would call it immediately.
Q44. What is a closure in JavaScript?
A closure occurs when a function "remembers" and can access variables from its surrounding scope, even after that outer scope has finished executing. This allows functions to preserve data without relying on global variables. The inner function "closes over" the variables it references.
Q45. Why must a callback function passed to the map() method return a value?
The map() method creates a new array by collecting the return value of the callback for each element. If the callback doesn't return anything, undefined will be placed in the new array for that element. The whole point of map is to transform values, so the callback must return the transformed value.
Q46. Which array method is best used when you want to create a new array that contains only a subset of elements?
filter() creates a new array containing only elements for which the callback returns true. It acts as a "whitelist" mechanism. For example: numbers.filter(n => n > 5) keeps only numbers greater than 5.
Q47. Which of the following is NOT a benefit of using pure functions in JavaScript?
Pure functions are easier to test, reason about, and debug because they always produce the same output for the same input and have no side effects. However, pure functions are NOT beneficial when you need to modify external state, interact with the DOM, or perform I/O operations — those require impure functions.
Q48. What does the Document Object Model (DOM) represent?
The DOM is a tree-like structure of element nodes that represents the HTML document. It's the browser's interpretation of the HTML, and JavaScript can access and manipulate this tree programmatically through the document object. The DOM IS the rendered HTML, not the source code.
Q49. What does the document.querySelector() method return when used in JavaScript?
It returns the first element that matches the specified CSS selector, or null if no match is found. It's the most flexible selection method because it accepts any valid CSS selector (ID, class, tag, descendant, etc.).
Q50. How can you change the CSS class of an element using JavaScript?
Use element.classList.add('class'), element.classList.remove('class'), or element.classList.toggle('class') to modify CSS classes. This is preferred over directly manipulating inline styles because it maintains separation between JavaScript behavior and CSS presentation.
Q51. What does calling event.preventDefault() do in an event handler?
It stops the browser's default behavior for that event. For example, calling it on a form's submit event prevents the page from reloading, and calling it on a link's click event prevents navigation to the href URL. This lets you handle the event with custom JavaScript logic instead.
Q52. What is an ARIA live region used for?
An ARIA live region (using aria-live="polite") notifies screen readers when content changes dynamically on the page. When content inside the live region updates, the screen reader announces the change to the user. Always use "polite" to avoid interrupting current content.
Q53. Which of the following statements about when to use arrow functions vs. function declarations is accurate?
Arrow functions should be the default choice for callbacks because they retain the lexical this context, preventing common bugs. Function declarations are better for top-level named functions, methods that need their own this, or when you need hoisting. Use arrow functions for short callbacks passed to array methods or event handlers.
Q54. What does destructuring do in JavaScript?
Destructuring unpacks values from arrays or properties from objects into separate variables in a single statement. For arrays: const [x, y] = [1, 2]. For objects: const {name, age} = person. It can also be used in function parameters to extract specific properties from an argument object.
Q55. What is the spread operator (...) used for in JavaScript?
The spread operator ... expands array or object contents into a new context. Common uses include: copying arrays ([...arr]), copying objects ({...obj}), merging arrays ([...arr1, ...arr2]), and passing array elements as function arguments. It creates shallow copies.
Q56. Which keyword is used to make a variable in a module publicly accessible in ES6?
The export keyword makes variables, functions, or classes publicly accessible to other modules. Use export const foo = ... for named exports or export default for the default export. Without export, declarations are private to the module.
Q57. What is the difference between named and default exports in ES6 modules?
Named exports: Use export const foo = ... and import with braces: import {foo} from './module.js'. You can have multiple named exports per file.
Default exports: Use export default value and import without braces: import anyName from './module.js'. Only one default export per file. Named exports are generally preferred.
Q58. What is the main advantage of using React compared to DOM functions?
React automatically tracks data changes and efficiently re-renders only the parts of the UI that need updating through its virtual DOM. With vanilla DOM functions, you must manually create, update, and remove elements. React's declarative approach lets you describe the desired UI state, and it handles the DOM manipulation.
Q59. What content is usually found in a React application's index.html file?
A minimal HTML file containing a single <div id="root"></div> element where all React components are injected. It also loads the entry point script (src/main.jsx) which bootstraps the React application using ReactDOM.createRoot().
Q60. What is JSX?
JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code directly in JavaScript. It gets transpiled (converted) into React.createElement() calls by tools like Babel/Vite. JSX uses className instead of class, requires self-closing tags for void elements, and uses curly braces {} for JavaScript expressions.
Q61. Which of the following best describes what values can be included inside a JSX inline expression?
Any JavaScript expression that produces a value can go inside curly braces {}: variables, function calls, ternary operators, arithmetic, array methods like .map(). Statements like if/else, for loops, or variable declarations cannot be used directly inside JSX expressions.
Q62. Which of the following is NOT true about React components?
It is NOT true that components can be called as regular functions (e.g., MyComponent()). Components must be rendered as JSX elements: <MyComponent />. Components ARE: functions that return JSX, reusable, composable, and must start with a capital letter.
Q63. How does one define props that should be passed into a React component?
Props are passed as XML-style attributes when rendering the component: <MyComponent name="Ada" age={36} />. Inside the component, they are accessed through the props parameter object: props.name, props.age. You can also use destructuring: function MyComponent({ name, age }).
Q64. How is the map() function commonly used in React components?
The map() function transforms an array of data into an array of React components for rendering. For example: props.items.map((item) => <ListItem key={item.id} data={item} />). Each mapped element needs a unique key prop so React can efficiently track changes.
Q65. Why is the key prop important when rendering lists?
The key prop gives each list item a stable, unique identity so React can efficiently track which items have changed, been added, or removed during re-renders. Without keys, React must re-render the entire list. Keys should be unique identifiers from the data (like IDs), not array indices.
Q66. Which is the recommended way to define an event handler for a React component?
Define the handler as a function inside the component, then pass it by reference (without parentheses) to the event prop: const handleClick = () => { ... }; return <button onClick={handleClick}>. Don't use onClick={handleClick()} as that calls the function immediately during render.
Q67. What does a React component's state represent?
State represents internal, changeable data within a component that changes over time, usually due to user interaction. When state changes, React automatically re-renders the component to reflect the updated data. State is private to the component that owns it.
Q68. What does the useState() function return?
It returns an array with exactly two elements: the current state value and a setter function to update it. Use array destructuring to assign them: const [count, setCount] = useState(0). The setter function name conventionally follows the pattern setVariableName.
Q69. What happens when you call a state setter function?
React schedules a re-render of the component with the new state value. The component function is called again, and the JSX is regenerated with the updated data. The state update is asynchronous, so the new value is not immediately available in the same event handler where the setter was called.
Q70. Why should you never update state directly using an assignment operator?
Directly mutating state (e.g., stateVar = newValue or stateArray.push(item)) does NOT trigger a re-render. React only knows to update the UI when the setter function is called. You must always create new copies of objects/arrays using spread operator and pass them to the setter: setItems([...items, newItem]).
Q71. What is the main difference between props and state?
Props are passed from a parent component and are read-only (immutable) from the receiving component's perspective. State is internal data managed within the component that changes over time, usually through user interaction. Props flow down, state is local. If data doesn't change, use props; if it changes over time, use state.
Q72. Which of the following should NOT be stored in a component's state?
Values that can be derived (computed) from existing state or props should NOT be stored in state. For example, if you have a list in state, don't also store the list length in state since you can compute it with list.length. Also avoid storing props in state, and don't use state for values that never change.
Q73. What does "lifting state up" mean in React?
It means moving shared state to the closest common ancestor (parent) of the components that need it. The parent owns the state and passes it down as props. Children that need to modify the state receive callback functions as props. This ensures a single source of truth for the data.
Q74. How should a child component update its parent's state?
By calling a callback function that was passed down as a prop from the parent. The parent defines a handler function that calls its own state setter, then passes that handler to the child. The child invokes props.onAction(data) when needed. This maintains unidirectional data flow.
Q75. Why should you use controlled inputs in a React form?
Controlled inputs keep React state as the single source of truth for form data, preventing React and the DOM from getting out of sync. This makes it easy to validate, transform, or submit form data since it's always available in state. It also enables features like disabling a submit button until the form is valid.
Q76. What is the primary purpose of the useEffect() hook in React?
The useEffect() hook handles side effects in function components, such as fetching data from APIs, setting up subscriptions, or directly manipulating the DOM. It runs after the component renders and can be controlled with a dependency array to determine when it re-runs.