HTML, CSS, & JS Review

Determine which style will be applied by correctly calculating CSS specificity and understanding cascade order.

Explain the difference between the content-box and border-box box models and their impact on layout.

Distinguish between static, relative, absolute, fixed, and sticky positioning with practical examples.

Define and use CSS custom properties (variables) with fallback values for theming.

Differentiate pseudo-classes (:nth-child, :focus-within, :has) from pseudo-elements (::before, ::after, ::placeholder).

Choose the appropriate CSS unit (rem, em, vh, vw, %, ch) for various responsive and typographic use cases.

Create CSS transitions to provide smooth feedback for UI state changes (e.g., hover, focus).

Define and apply multi-step animations using @keyframes for complex UI effects.

Control the sizing of flex items using flex-grow, flex-shrink, and flex-basis.

Align and distribute items using Flexbox alignment properties (justify-content, align-items, align-self, gap).

Define two-dimensional layouts using grid-template-columns, grid-template-rows, and grid-template-areas.

Use auto-fill vs auto-fit with minmax() to create responsive grids that adapt without media queries.

Implement a mobile-first responsive design strategy using media queries with appropriate breakpoints.

Explain the utility-first philosophy and identify when Tailwind is a good fit versus vanilla CSS or other frameworks.

Apply responsive design using Tailwind's breakpoint prefixes (sm:, md:, lg:, xl:).

Use state variants (hover:, focus:, active:, disabled:) and group variants (group-hover:, group-focus:) for complex component styling.

Implement dark mode using Tailwind's dark: variant.

Customize the tailwind.config.js file to extend theme values like colors and spacing.

Use arbitrary values to apply one-off styles that are not part of your design system.

Use the @apply directive to extract component classes and articulate the trade-offs of this approach.

Explain the differences between var, let, and const in terms of scope, hoisting, and reassignment.

Predict the output of code involving the hoisting of variables and function declarations.

Define a closure and demonstrate its use in creating private variables and function factories.

Determine the value of 'this' in different execution contexts: global, object method, arrow function, and event handler.

Explain prototypal inheritance and how the prototype chain is used to resolve property lookups.

Identify the pitfalls of type coercion and explain when to strictly use '===' over '=='.

Use destructuring for arrays and objects, including nested destructuring and default values.

Apply the spread and rest operators in function arguments, array manipulation, and object cloning.

Use optional chaining (?.) and the nullish coalescing operator (??) to write safer code when dealing with potentially null or undefined values.

Explain the key differences between arrow functions and regular functions, particularly regarding 'this' binding and the 'arguments' object.

Use Map and Set data structures and explain when to prefer them over plain Objects and Arrays.

Explain the concept of weak references and use WeakMap and WeakSet for memory-sensitive caching.

Work with ES modules, including named exports, default exports, and dynamic imports with import().

Explain the components of the event loop: call stack, Web APIs, task queue, and microtask queue.

Predict the execution order of synchronous code, setTimeout, and Promise resolutions.

Create a new Promise using the constructor, including the resolve and reject callbacks.

Chain promises and handle errors using .then(), .catch(), and .finally().

Differentiate between Promise.all, Promise.race, Promise.allSettled, and Promise.any with practical use cases.

Rewrite promise chains using the async/await syntax with try/catch blocks for error handling.

Use the Fetch API to make HTTP requests, handle JSON responses, and manage network errors.

Traverse and manipulate the DOM using methods like querySelector, closest, and classList.

Explain event bubbling and capturing, and implement event delegation for performance and simplicity.

Use the IntersectionObserver API to implement performance optimizations like lazy loading of images or infinite scrolling.

Store and retrieve data using localStorage and sessionStorage, and describe their differences and limitations.

Use the History API (pushState, replaceState, popstate) to manage browser history for client-side routing.

Explain the problems jQuery solved (e.g., DOM abstraction, cross-browser compatibility) and why it was revolutionary.

Describe the industry's shift from multi-page applications to single-page applications (SPAs) and the role of AJAX.

Explain the benefits of component-based architecture over imperative DOM manipulation.

Describe the virtual DOM concept and why it was initially considered a performance improvement.

Explain the reasons for the resurgence of server-side rendering (SSR) in the post-SPA era (SEO, initial load performance).

Compare Client-Side Rendering (CSR) with Server-Side Rendering (SSR), explaining the core trade-offs.

Differentiate between Static Site Generation (SSG) and Incremental Static Regeneration (ISR).

Describe the concept of React Server Components and how they differ from traditional SSR and Client Components.

Explain how JSX is compiled into JavaScript and how React elements differ from DOM elements.

Use useState and useReducer for local component state, and determine when to prefer one over the other.

Manage side effects with useEffect, correctly using its dependency array and cleanup function to avoid common pitfalls.

Use useRef to access DOM elements directly and to persist values across renders without causing a re-render.

Distinguish between controlled and uncontrolled components in forms.

Optimize component performance using useMemo and useCallback, and explain when such optimizations are necessary.

Create custom hooks to encapsulate and reuse stateful logic between components.

Use React Context to share state across the component tree and identify its performance limitations.

Explain file-based routing in the App Router, including the roles of layout.js, page.js, loading.js, and error.js.

Distinguish between Server Components and Client Components, and know when to apply the 'use client' directive.

Implement data fetching in Server Components using async/await, removing the need for client-side data fetching hooks.

Configure routes for static generation (generateStaticParams) versus dynamic rendering and understand the caching implications.

Create API endpoints using Route Handlers in the 'app/api' directory.

Use Next.js Middleware to implement request-level logic like authentication checks and redirects.

Optimize images using the next/image component and explain its benefits over a standard <img> tag.

Implement form submissions and data mutations using Server Actions for a cohesive full-stack experience.

Explain what a monorepo is and its advantages over a multi-repo setup for certain projects.

Describe Turborepo's core function as a task-based build system with intelligent caching.

Configure a basic Turborepo workspace containing multiple packages and applications.

Define task pipelines in turbo.json using 'dependsOn', 'outputs', and cache settings to optimize build processes.

Share code (e.g., UI components, utility functions) between applications using internal packages.

Explain how Turborepo's local and remote caching works to avoid redundant computation and speed up CI/CD.