Untitled

• The document contains common interview questions and answers, separated into frontend, backend, full stack development, database management, API and third-party integration, debugging, testing, optimization, and collaboration best practices.

The Box Model in CSS

• The box model contains four layers for webpage elements: content, padding, border, and margin.
• Content is the actual text or image inside of the element.
• Padding is the space around the content.
• Border is a line surrounding the padding.
• Margin is the space outside the border to separate elements.
• The box model is important because it helps in designing layouts by controlling element spacing and size.

Semantic HTML Tags

• Semantic tags clearly describe the purpose of elements.
• <header> is used for the top section of a page.
• <article> represents an independent piece of content.
• <footer> is used for the bottom section of a page.
• Semantic tags improve SEO, make code easier to read, and help screen readers understand the page.

Website Loading Speed Optimization

• Minimize file sizes of images, CSS, and JavaScript to improve loading speed.
• A CDN (content delivery network) loads files from servers close to users.
• Caching involves storing files locally in the browser to avoid reloading them.
• Lazy loading involves loading images only when needed.

Event Delegation in JavaScript

• Instead of adding an event to every button, add a single event to their parent.
• Event delegation improves performance.
• Handles dynamic elements (new buttons added later still work).

Closures in JavaScript

• A closure is when a function remembers the variables from its parent function even after the parent function is gone.
• Closures keep data private, like a secure counter.
• Closures also save memory.

Asynchronous Operations in JavaScript

• Callbacks are a function inside another function.
• Promises (.then()) wait for the task to complete.
• Async/await is a cleaner way to handle promises.

React vs. Angular vs. Vue

• React uses Virtual DOM and is component-based
• Angular is a complete framework supporting two-way data binding, used by large companies
• Vue is lightweight, simple, and good for small projects.

React's Virtual DOM

• The Virtual DOM is like a copy of the real webpage
• React updates this copy first and then changes only the necessary parts in the real DOM.
• Using the virtual DOM makes updates faster, and reduces unnecessary re-rendering.

Hooks in React

• Hooks let one use state and other features without writing class components.
• useState() stores and updates values.
• useEffect() runs code when the component updates.

REST API vs GraphQL

• REST API uses fixed URLs.
• GraphQL lets the client ask for exactly the data it needs.

Middleware in Backend Development

• Middleware is a function that runs between the request and the final response.
• Middleware is used for logging requests.
• Middleware is used for checking if a user is logged in before allowing access.

Preventing SQL Injection

• Use prepared statements instead of inserting user input directly.
• Escape input data (sanitize values).
• Use ORM frameworks, like Sequelize in Node.js.

SQL vs. NoSQL Databases

• SQL uses tables and relationships.
• NoSQL stores data in JSON-like documents.

Database Indexing

• An index is like a table of contents for a book and helps find data faster.
• Without an index, the database searches all rows, which is slow.

The MVC Architecture

• Separates a web app into Model, View, and Controller.
• Model handles data (database).
• View displays data (UI).
• Controller processes user input and updates Model & View.

Role of a Web Server

• A web server like Apache or Nginx receives user requests and sends back the correct webpage or data.

Deploying a Web App on AWS or Azure

• Setup a server (EC2 on AWS).
• Upload code (via Git, FTP).
• Setup a database (like MySQL or MongoDB).
• Configure security (firewalls, HTTPS).

Optimizing a Full-Stack Application

• Use caching to reduce database queries.
• Minify and compress files for faster loading.

Using a CDN

• A CDN can be used to serve static files.

Common Git Workflows

• Feature branching involves each feature having its own branch.
• Git Flow uses main, develop, feature, and release branches.

Handling Git Conflicts

• Use git diff to see changes.
• Manually edit conflicting files.
• Use git rebase or git merge.

Microservices vs. Monolithic Architecture

• Microservices breaks the application into small, independent services.
• Monolithic, the whole application is one big unit.

Docker Containers

• Docker creates lightweight, isolated environments to run applications.

OAuth Authentication

• OAuth lets users log in with Google, Facebook, etc., instead of creating new accounts.
• Users authorize the app to access their data.
• The app gets an access token to make API calls.

Web Security Vulnerabilities

• SQL Injection injects harmful code into databases.
• Cross-Site Scripting (XSS) injects JavaScript into web pages.
• CSRF (Cross-Site Request Forgery) tricks users into performing actions.
• Preventing vulnerabilities involves validating input.
• Use HTTPS
• Sanitize user data

HTML Element Types

• Inline elements take up only as much space as needed, e.g., <span>.
• Block elements take the full width of the container, e.g., <div>.
• Inline-block elements behave like inline elements but allow setting width and height.

CSS Flexbox vs Grid

• Flexbox is best for one-dimensional layouts (either row or column).
• Grid is better for two-dimensional layouts (both rows and columns).

Optimizing Website Performance

• Minimize CSS and JavaScript files, use lazy loading, optimize images, and use caching.

React vs. Angular vs Vue

• React is a lightweight UI library.
• Angular is a full-fledged framework with built-in features.
• Vue.js is easy to learn and combines React's and Angular's best features.

React's Virtual DOM Performance

• The Virtual DOM improves performance by updating only the changed parts of the UI instead of re-rendering the whole page.

React Hooks

• Hooks allow using state and lifecycle features in functional components with useState, useEffect.

React State Management

• Application state can be managed with useState, and libraries like Redux for global state.

Angular's Two-Way Data Binding

• It automatically updates the UI when the data changes and vice versa.

Lifecycle Methods in React and Angular

• Lifecycle methods control the component's behavior at different stages, like mounting, updating, and unmounting.

Frontend Form Validation

• Form validation is done using JavaScript validation methods or libraries like Formik in React.

Synchronous vs. Asynchronous Programming

• Synchronous code runs step by step, while asynchronous code can run in parallel.

Advantages of Node.js for Backend

• Is used for developing fast, non-blocking, and it is great for real-time applications.

RESTful APIs vs. GraphQL

• REST sends multiple requests for different data, while GraphQL fetches all needed data in one request.

Middleware in Express.js

• Middleware functions process requests before they reach the final handler.

Backend Authentication

• Authentication is done using login credentials, sessions, or tokens like JWT.

JWT (JSON Web Token)

• JWT is a secure token that helps verify users without storing sessions.

Microservices vs. Monolithic Architectures

• Microservices break an app into smaller services, while monolithic apps are built as a single unit.

Error Handling in Backend

• Application errors can be handled using try-catch blocks, logging errors, and returning meaningful error messages.

Relational vs. Non-Relational Databases

• Relational databases (SQL) store structured data, while non-relational databases (NoSQL) store flexible data.

Indexing Database Performance

• Database indexing speeds up search queries by creating a quick lookup structure.

Transactions in Databases

• A transaction is a sequence of operations that must succeed together or fail together.

Optimizing Database Performance

• Indexing, avoiding unnecessary columns, and optimizing SQL queries, optimize database performance.

Making API Calls

• API calls are made Using fetch() or built-in browser APIs.

CORS (Cross-Origin Resource Sharing)

• CORS allows a web app to access resources from a different domain.

Third-Party Authentication

• The OAuth authentication and APIs like Firebase Auth, authenticate through third-party apps.

WebSockets vs REST APIs

• WebSockets allow real-time communication, unlike REST, which sends requests and responses.

Debugging JavaScript

• Debug most efficiently using console.log(), browser dev tools, and breakpoints.

Testing Types

• Unit tests check small pieces of code, integration tests check multiple components, and end-to-end tests check the full system.

Testing Tools

• Jest, Mocha, Cypress, and Selenium are used for testing.

API Endpoint Testing

• Using Postman or automated tools like Jest and Supertest.

Memory Leaks in JavaScript

• Memory Leaks happen when unused memory isn't released.
• Prevent Memory Leaks by clearing event listeners and variables.

Optimizing Web Application Speed

• Compress files, optimize images, use caching, and reduce HTTP requests.

Version Control with Git

• Using commands like git init, git add, git commit, and git push.

Git Merge vs. Rebase

• Merge combines changes with a new commit, while rebase moves changes onto another branch.

Resolving Merge Conflicts

• Resolve merge conflicts, by manually choosing which changes to keep and committing them.

Agile and Scrum

• Agile is a flexible development approach, and Scrum is a framework for managing Agile projects.

Ensuring Web Application Security

• Web application security is ensured Using HTTPS, validating user input, and preventing SQL injections and XSS attacks.

Improving Code Maintainability

• Code maintainability is improved by writing clean, well-documented code and following coding standards.

localStorage vs sessionStorage vs cookies

• localStorage stores data permanently.
• sessionStorage clears data when the session ends.
• Cookies send data with every request.

Making a Website Responsive

• Use media queries, flexible layouts, and CSS frameworks like Bootstrap or Tailwind.

Position Types in CSS

• relative moves the element from its normal position.
• absolute positions it relative to the nearest ancestor.
• fixed keeps it in place on the screen.

CSS Pseudo-Classes vs Pseudo-Elements

• Pseudo-classes style elements based on state (e.g., :hover).
• Pseudo-elements style specific parts of an element (e.g., ::before).

ES5 vs ES6 in JavaScript

• ES6 introduced features like let, const, arrow functions, template literals, and modules.

Event Delegation in JavaScript

• Allows handling events at a parent level instead of adding event listeners to individual child elements.

Web Components

• Web components are reusable Ul elements built with custom elements, shadow DOM, and templates.

Handling Browser Compatibility Issues

• Using feature detection (Modernizr), polyfills, and CSS prefixes.

Lazy Loading

• It loads images or resources only when needed, improving page performance.

MVC vs. MVVM Architecture

• MVC separates data, UI, and logic.
• MVVM enhances Ul handling with data binding.

RESTful API

• it follows HTTP methods (GET, POST, PUT, DELETE) to communicate between a client and a server.

NoSQL vs. SQL Databases

• SQL databases use structured tables.
• NoSQL databases store flexible JSON-like data.

ORM (Object-Relational Mapping)

• Allows interacting with databases using code instead of SQL.

Key Differences Between Python and PHP

• Python is more readable and widely used in Al
• PHP is specialized for web applications.

Cron Job

• A cron job is a scheduled task that runs at specific intervals, like sending emails or cleaning up databases.

Rate Limiting

• Controls the number of API requests a user can make, using tools like express-rate-limit in Node.js.

Handling File Uploads

• Using Multer in Node.js, Django FileField in Python, or move_uploaded_file() in PHP.