Tech Q&A

Q. What is the Box Model in CSS?
A: The box model includes:

• Content → the actual element content

• Padding → space around content

• Border → around padding

• Margin → space outside the border

Q. What is the difference between em and rem units?
A:

• em is relative to the parent element’s font size.

• rem is relative to the root (html) font size.

Q. What is the difference between position: relative, absolute, fixed, and sticky?
A:

• relative: Moves relative to its normal position.

• absolute: Positioned relative to the nearest positioned ancestor.

• fixed: Sticks to the viewport.

• sticky: Acts like relative until a point, then sticks.

Q. What are pseudo-elements?
A: Special selectors that style parts of an element.
     Examples: ::before, ::after, ::first-letter, ::selection

Q. What is specificity in CSS?
A: Determines which style rule wins when multiple apply.
Order: Inline styles > ID selectors > Class/Pseudo-class > Element

Q. What’s the difference between display: none and visibility: hidden?
A:

• display: none: Element is removed from layout.

• visibility: hidden: Element is invisible but takes up space.

Q. What is a media query?
A: A CSS technique used to apply styles based on screen size or device type.
Example: @media (max-width: 600px) { body { font-size: 14px; } }

Q. What is the difference between inline, inline-block, and block elements?
A:

• inline: No line break, no width/height.

• inline-block: Behaves like inline but supports width/height.

• block: Starts on new line, takes full width.

Q. What is z-index in CSS?
A: Controls the stacking order of elements. Higher z-index appears on top.

Q. What does !important do in CSS?
A: Forces a style to override any other conflicting rules, regardless of specificity.

Q. How do you center an element with Flexbox?
A: display: flex; justify-content: center; align-items: center;

Q. What are pseudo-classes?
A: Special states of elements.
Examples: :hover, :focus, :nth-child(), :first-child

Q. What is the default position value in CSS?
A: static — elements follow normal document flow.

Q. What is the difference between min-width, max-width, and width?
A:

• width: Fixed value.

• min-width: Sets the minimum possible width.

• max-width: Limits the maximum width.

Q. How do you create a responsive layout in CSS?
A: Use flexbox, grid, and media queries to adapt layout to different screen sizes.

Q. What is Bootstrap?
A: Bootstrap is a popular front-end CSS framework for developing responsive and mobile-first websites quickly using prebuilt components and layout utilities.

Q. What are the key features of Bootstrap?
A:

• Responsive grid system

• Prebuilt components (buttons, cards, modals)

• Utility classes

• JavaScript plugins

• Mobile-first approach

Q. What is the Bootstrap grid system?
A: A 12-column responsive layout system using rows and columns to structure content across all screen sizes.

Q. What is the difference between .container and .container-fluid?
A:

• .container: Fixed-width and responsive

• .container-fluid: Full-width across all screen sizes

Q. How do breakpoints work in Bootstrap?
A: Breakpoints define screen sizes for responsive behavior:

• sm: ≥576px

• md: ≥768px

• lg: ≥992px

• xl: ≥1200px

• xxl: ≥1400px

Q. What are Bootstrap utility classes?
A: Single-purpose helper classes to style spacing, text, background, borders, etc., without custom CSS.
Example: .p-3, .text-center, .bg-primary

Q. How do you create a button in Bootstrap?
A: <button class="btn btn-primary">Click Me</button>


Q. How do you make a responsive image in Bootstrap?
A: Add .img-fluid to an <img> tag. <img src=“image.jpg” class=“img-fluid” alt=“Responsive”>

Q. What is a Jumbotron in Bootstrap 4?
A: A large, attention-grabbing section used for hero banners. (Deprecated in Bootstrap 5; use utilities instead)

Q. How can you hide/show elements in Bootstrap?
A: Use display utility classes like .d-none, .d-block, .d-sm-none, .d-lg-block, etc.

Q. What is the difference between d-none and invisible?
A:

• d-none: Hides the element and removes it from the layout.

• invisible: Hides the element but keeps its space.

Q. How do you create a responsive navbar in Bootstrap?
A: Use .navbar, .navbar-expand-*, and toggle button for collapse on smaller screens.

Q. What are Bootstrap components?
A: Pre-designed UI elements like cards, alerts, modals, navbars, badges, and carousels.

Q. What is the use of .order-* classes in Bootstrap?
A: They change the visual order of flex/grid items across different screen sizes.

Q. What version of Bootstrap is most used today?
A: Bootstrap 5 is the latest stable version, with utility-focused updates and removal of jQuery dependency

Q. What is Tailwind CSS?
A: Tailwind CSS is a utility-first CSS framework that lets you build custom designs using predefined classes directly in your HTML.

Q. How is Tailwind CSS different from Bootstrap?
A:

• Tailwind is utility-first (you style with classes).

• Bootstrap is component-based (you use pre-styled UI components).
  Tailwind offers more design flexibility; Bootstrap is faster for prototypes.

Q. What does “utility-first” mean in Tailwind?
A: It means styling is done using single-purpose classes like p-4, text-center, bg-blue-500 instead of writing custom CSS rules.

Q. How do you customize Tailwind CSS?
A: By editing the tailwind.config.js file to define custom colors, spacing, breakpoints, fonts, etc.

Q. What are some core features of Tailwind CSS?
A:

• Utility classes

• Responsive design with breakpoints

• Dark mode support

• PurgeCSS integration

• Plugin system

• Custom theming

Q. How do you apply responsive design in Tailwind?
A: By prefixing classes with screen sizes.
Example: <p class=“text-sm md:text-lg lg:text-xl”>Responsive text</p>

Q. How do you enable dark mode in Tailwind CSS?
A: In tailwind.config.js, set: darkMode: 'class' Then use: <div class=“dark:bg-black dark:text-white”>

Q. What is JIT (Just-In-Time) mode in Tailwind?
A: JIT compiles styles on-demand as you use them, making builds faster and allowing arbitrary values like mt-[23px].

Q. How do you conditionally apply styles in Tailwind?
A: Use libraries like clsx or classnames in React/Vue to dynamically apply Tailwind classes.

Q. How can you reuse styles in Tailwind CSS?
A:

• Use @apply in custom CSS to group utilities

• Use components in frameworks (React, Vue)

• Use Tailwind plugins for abstraction

Q. How do you center a div using Tailwind?
A: <div class="flex items-center justify-center">Centered</div>

Q. How do you apply hover or focus styles in Tailwind?
A: <button class="bg-blue-500 hover:bg-blue-700 focus:outline-none">Click</button>

Q. How does Tailwind handle breakpoints?
A: Uses mobile-first breakpoints like:

• sm – 640px

• md – 768px

• lg – 1024px

• xl – 1280px

• 2xl – 1536px
  Example: md:p-4 applies padding only on medium and up.

Q. How do you install Tailwind CSS in a project?
A: npm install -D tailwindcss
npx tailwindcss init Then include it in your CSS: @tailwind base; @tailwind components; @tailwind utilities;

Q. What is PurgeCSS (now “content” in Tailwind v3)?
A: It removes unused styles during build to reduce CSS file size.
Set it in tailwind.config.js: content: [“./src/**/*.{html,js,jsx}”]

Q. What is the difference between var, let, and const in JavaScript?
A:

• var: Function-scoped, can be re-declared and updated.

• let: Block-scoped, can be updated but not re-declared in the same scope.

• const: Block-scoped, cannot be re-assigned or re-declared.

Q. Explain the concept of closures in JavaScript with an example.
A: A closure is a function that remembers its outer lexical environment even after the outer function has closed.

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
const counter = outer();
counter(); // 1
counter(); // 2

Q. How does the this keyword work in JavaScript?
A:

• Refers to the object calling the function.

• In global scope: this is the global object (window in browsers).

• In strict mode: this is undefined.

• In arrow functions: this is lexically inherited.

Q. What are higher-order functions, and can you provide an example?
A: Functions that take other functions as arguments or return functions.

function greet(name) {
return `Hello, ${name}`;
}
function processUser(name, callback) {
return callback(name);
}
processUser(“John”, greet); // “Hello, John”

Q. What is the difference between synchronous and asynchronous JavaScript?
A:

• Synchronous: Executes line-by-line, blocking.

• Asynchronous: Executes without blocking, uses callbacks, promises, or async/await.

Q. Explain the difference between forEach and map methods in arrays.
A:

• forEach: Iterates over elements, returns undefined.

• map: Iterates and returns a new array with transformed items.

Q. What is the purpose of promises, and how do you use them?
A: Promises handle asynchronous operations, providing .then() and .catch() methods.

Q. What are arrow functions, and how do they differ from regular functions?
A:

• Shorter syntax

• No this binding (inherits this from parent scope)

• Cannot be used as constructors

const add = (a, b) => a + b;

Q. How does event delegation work in JavaScript?
A: Instead of adding event listeners to individual elements, you attach a single listener to a common parent and handle events via event.target.

Q. What are REST APIs?
A: REST (Representational State Transfer) APIs follow stateless, client-server architecture using HTTP methods like GET, POST, PUT, DELETE to perform CRUD operations.

Q. How do you ensure the security of an API?
A:

• Use HTTPS

• Implement authentication (e.g., JWT, OAuth)

• Validate inputs

• Use rate limiting and throttling

• Sanitize data to prevent injections

Q. Explain the purpose of HTTP status codes in API responses.
A: Status codes tell the client the result of the HTTP request. Examples:

• 200: OK

• 201: Created

• 400: Bad Request

• 401: Unauthorized

• 404: Not Found

• 500: Server Error

Q. How would you optimize API performance?
A:

• Use caching (e.g., Redis, CDN)

• Minimize payload size

• Optimize database queries

• Use pagination

• Enable gzip compression

Q. What is the difference between GET and POST methods in REST APIs?
A:

• GET: Retrieves data, parameters sent in URL, idempotent.

• POST: Sends data to create something, parameters sent in body, not idempotent.

Q. What is the virtual DOM, and how does React use it?
A: The virtual DOM is an in-memory representation of the real DOM. React uses it to detect changes and efficiently update only the parts of the actual DOM that changed, improving performance.

Q. Explain the difference between functional components and class components in React.
A:

• Functional Components: Simpler, stateless, use Hooks for state/lifecycle.

• Class Components: Use this, can hold state and lifecycle methods without hooks.

Q. What is the purpose of useState and useEffect hooks?
A:

• useState: Adds state to functional components.

• useEffect: Handles side effects like data fetching, subscriptions, or DOM manipulation.

Q. How does props differ from state in React?
A:

• Props: Read-only, passed from parent to child.

• State: Local, mutable data managed within the component.

Q. What are controlled and uncontrolled components in React?
A:

• Controlled: Form inputs controlled by React state (value and onChange).

• Uncontrolled: DOM handles form inputs using refs.

Q. How do you handle forms in React?
A:

• Use useState to store input values.

• Update values via onChange.

• Submit form with onSubmit.

Q. What is React Context, and how does it help in state management?
A: Context provides a way to share state globally (like theme or user data) without prop drilling. It uses Provider and useContext() to consume the values.

Q. How would you optimize a React application for performance?
A:

• Use React.memo for memoization

• Use useMemo and useCallback

• Code splitting (React.lazy)

• Avoid unnecessary re-renders

• Virtualize long lists (react-window)

Q. What is the difference between useMemo and useCallback hooks?
A:

• useMemo: Caches the result of a function.

• useCallback: Caches the function itself.
  Use them to avoid recalculating or re-creating functions on every render.

Q. Explain React’s lifecycle methods and their equivalents in hooks.
A:

• componentDidMount → useEffect(() => {}, [])

• componentDidUpdate → useEffect(() => {}, [deps])

• componentWillUnmount → useEffect(() => return () => {}, [])

Q. What is Redux and why is it used?
A: Redux is a state management library that maintains a single source of truth for application state, useful for large-scale apps where state sharing is complex.

Q. What are the core principles of Redux?
A:

• Single source of truth (store)

• State is read-only (immutable)

• Changes via pure functions (reducers)

Q. What are actions and reducers in Redux?
A:

• Actions: Plain objects that describe what happened (type + payload)

• Reducers: Pure functions that take current state and action to return new state

Q. How do you connect Redux to a React component?
A:

• Use useSelector() to read from state

• Use useDispatch() to send actions

• Wrap app with <Provider store={store}>

Q. What is the purpose of middleware in Redux?
A: Middleware (like redux-thunk) allows you to handle asynchronous logic (e.g., API calls) before actions reach the reducer.

Q. What are the three core principles of Redux?

A:
The three core principles of Redux are:

1. Single Source of Truth

   • The entire application state is stored in a single JavaScript object within the Redux store.

2. State is Read-Only

   • You cannot change the state directly.

   • The only way to change the state is by dispatching an action, which describes the change.

3. Changes are Made with Pure Functions (Reducers)

   • To specify how the state changes in response to actions, you write pure reducer functions.

   • Reducers take the current state and an action, and return the new state.

Q. Explain the structure of a Redux application

A: A typical Redux application consists of the following components:

1. Store

   • Holds the state of the entire application.

   • Created using createStore() (or configureStore() in Redux Toolkit).

2. Actions

   • Plain JavaScript objects with a type property.

   • Describe what happened.

   { type: ‘INCREMENT’ }

3. Action Creators

   • Functions that return actions.

       const increment = () => ({ type: ‘INCREMENT’ });

4. Reducers

   • Pure functions that take the current state and action, and return the new state.

   function counter(state = 0, action) {
      switch (action.type) {
          case ‘INCREMENT’:
          return state + 1;
         default:
         return state;
       }
   }

5. Dispatching Actions

   • The store’s dispatch() method is used to send actions.

   store.dispatch({ type: ‘INCREMENT’ });

6. Connecting to React

   • Use the Provider component from react-redux to pass the store to your app.

   • Use useSelector() to read state and useDispatch() to send actions.

Q. What is Angular?

A: Angular is a TypeScript-based open-source front-end framework developed by Google for building web applications with HTML, CSS, and TypeScript.

Q. What are components in Angular?

A: Components are the basic building blocks of an Angular app. They control a portion of the UI and consist of:

• a TypeScript class,

• an HTML template,

• and a CSS style.

Q. What is a module in Angular?

A: An Angular module (NgModule) groups related components, directives, pipes, and services. The root module is AppModule.

Q. What is data binding in Angular?

A: Data binding connects the component’s logic to the view. Types:

• Interpolation: {{ title }}

• Property binding: [src]="imgUrl"

• Event binding: (click)="handleClick()"

• Two-way binding: [(ngModel)]="name"

Q. What is a directive in Angular?

A: Directives add behavior to elements.

• Structural: *ngIf, *ngFor

• Attribute: ngClass, ngStyle

• Custom: User-defined behavior

Q. What is dependency injection in Angular?

A: Angular’s built-in DI system provides services to components and other services, improving modularity and testability.

Q. What are services in Angular?

A: Services are classes that handle business logic, data sharing, or API communication, often injected into components using DI.

Q. What is routing in Angular?

A: Angular Router enables navigation between views. Routes are defined in RouterModule, and navigation uses <router-outlet> and routerLink.

Q. What is the purpose of lifecycle hooks in Angular?

A: Lifecycle hooks like ngOnInit(), ngOnChanges(), and ngOnDestroy() allow developers to tap into different stages of a component’s lifecycle.

Q. What is ngOnInit() used for?

A: It’s a lifecycle hook that runs once after the component’s data-bound properties are initialized—commonly used for API calls and initialization logic.

Q. How does Angular handle form validation?

A: Angular supports:

• Template-driven forms: simple and suitable for basic use cases.

• Reactive forms: more robust, using FormGroup, FormControl, and validators.

Q. What is ngModel?

A: ngModel enables two-way data binding in template-driven forms:

Q. What is a pipe in Angular?

A: Pipes transform data in templates. Example:

Custom pipes can be created using @Pipe.

Q. What is lazy loading in Angular?

A: Lazy loading loads feature modules only when needed, improving app performance by reducing the initial bundle size.

Q. How do you make HTTP requests in Angular?

A: Use Angular’s HttpClient service from @angular/common/http to make HTTP requests.