Frontend Interview Preparation.txt

Frontend Interview Preparation
1. Basic Web Concepts
   1. Page rendering cycle
   2. http/https/https2
   3. CORS
   4. Local storage/Session storage
   5. Web Vitals
   6. Cookie
   7. JWT
   8. XHR
   9. Micro Frontend
   10. REST/GraphQL/Socket connection
   11. Browser Concepts
   12. Debugging Application
   13. Chrome Dev Tool Features
2. HTML
   1. Semantic HTML5 Elements
   2. HTML Forms and Validation
   3. Accessibility (A11y)
   4. Responsive Design with HTML and CSS
   5. HTML APIs and Integrations
   6. HTML Templates and Shadow DOM
   7. Microdata and Schema.org
   8. Performance Optimization
   9. Forms and Accessibility
   10. Web Security Fundamentals
3. CSS
   1. Class and other selectors
   2. Pseudo Classes
   3. Box Model
   4. Pseudo Elements
   5. CSS type - flex, grid, normal
   6. How to centre
   7. pseudo classes and elements
   8. All element states - active, hover
   9. Media queries
   10. Pre-processors - SCSS or LESS
   11. mixins
   12. CSS constants
   13. BEM
   14. Import
4. Javascript
   1. Basic
      1. Data types
      2. Functions
      3. Scope in JavaScript
      4. Closure
      5. Event loop
      6. Prototype and prototype chain
      7. Class and inheritance
      8. DOM
      9. bind/call/apply
      10. Promise
      11. WebAPI
      12. Task queue
      13. Call stack
      14. Async/await
      15. Generators
      16. Typescript
   2. Advance
      1. OOPs concept
      2. Design Patterns
         1. Singleton
         2. Provider
         3. Prototype
         4. Observer
         5. Module
         6. HOC
      3. Understanding V8 in depth
         1. JIT
         2. Interpreter
         3. Execution
         4. Compiler
      4. Currying
5. React
   1. eBook (100 interview ques) - https://drive.google.com/file/d/1QDqDFytObucUS5z7mAv20qMSSjByUuzw/view?usp=sharing
   2. Basic
      1. Introduction JSX
      2. React Component
      3. Component State and Props
      4. Adding Style (CSS)
      5. Functional and Class components
      6. React Lifecycle Methods
      7. Virtual DOM
      8. React Hooks
      9. Custom Hooks
      10. Context API
      11. Synthetic Events
      12. Routing
      13. Data Flow (Redux/Flux)
      14. Server-Side Rendering
      15. Unit Testing
      16. Jest & React Testing library
      17. Mocking Data
      18. Understanding Webpack (Bundler)
      19. Babel, env, prettier, linter
6. Redux
   1. What are the core principles of Redux?
   2. How does Redux differ from the Context API in React?
   3. Can you explain the role of middleware in Redux and name some commonly used middleware?
   4. What is the purpose of combineReducers in Redux?
   5. Describe the steps of a typical Redux data flow.
   6. How do you handle asynchronous actions in Redux?
   7. What is the significance of immutability in Redux, and how do you ensure state immutability?
   8. What are selectors in Redux, and why are they useful?
   9. Can you provide an example of how to structure a large-scale Redux application?
   10. How do you debug a Redux application?









2HTML answers : -------------------------------------------------------------------------------------


I'd be happy to provide detailed answers on these HTML and web development topics. Let's go through them one by one:

Semantic HTML5 Elements

Semantic HTML5 elements are tags that convey meaning about the structure and content of a web page to
 both browsers and developers. They improve accessibility, SEO, and code readability. Key semantic
  elements include:

<header>: Introductory content or navigational links
<nav>: Navigation links
<main>: Main content of the page
<article>: Self-contained content that could be distributed independently
<section>: Thematic grouping of content
<aside>: Content tangentially related to the surrounding content
<footer>: Footer of a section or page
<figure> and <figcaption>: For images, diagrams, etc., with a caption
<time>: For dates and times
<mark>: Highlighted text

Using these elements properly helps search engines understand your content and assists screen 
readers in navigating the page structure.

HTML Forms and Validation

HTML forms allow users to input data that can be sent to a server for processing. Key aspects include:
Form elements:

<form>: Container for form controls
<input>: Various types (text, password, checkbox, radio, etc.)
<textarea>: Multi-line text input
<select> and <option>: Dropdown menus
<button>: Clickable button

Form validation:

HTML5 introduced built-in form validation attributes:

required: Field must be filled
minlength and maxlength: Minimum and maximum text length
min and max: Minimum and maximum values for numerical inputs
pattern: Regular expression pattern for input format
type: Specific input types (email, url, number, etc.) have built-in validation



Example:
htmlCopy<form>
  <input type="email" required>
  <input type="number" min="0" max="100">
  <input type="text" pattern="[A-Za-z]{3}">
  <button type="submit">Submit</button>
</form>

Accessibility (A11y)

Accessibility ensures that websites are usable by people with disabilities. Key principles include:

Proper use of semantic HTML
Providing text alternatives for non-text content (alt text for images)
Ensuring keyboard navigation
Using ARIA (Accessible Rich Internet Applications) attributes when necessary
Maintaining sufficient color contrast
Providing clear and descriptive link text
Using proper heading hierarchy
Ensuring forms are accessible (labels, error messages, etc.)

Example of an accessible image:
htmlCopy<img src="cat.jpg" alt="A tabby cat sitting on a windowsill">

Responsive Design with HTML and CSS

Responsive design ensures that web pages render well on various devices and screen sizes. Key techniques include:

Using viewport meta tag:
htmlCopy<meta name="viewport" content="width=device-width, initial-scale=1">

CSS media queries to apply different styles based on screen size
Flexible grid layouts (often using CSS Flexbox or Grid)
Fluid images (max-width: 100%)
CSS units like em, rem, vw, vh for flexible sizing

Example of a media query:
cssCopy@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

HTML APIs and Integrations

HTML5 introduced several APIs that allow for rich web applications:

Geolocation API: Access user's geographical location
Web Storage API: Store data in the browser (localStorage and sessionStorage)
Canvas and WebGL: 2D and 3D graphics rendering
Web Workers: Run scripts in background threads
Drag and Drop API: Native drag and drop functionality
History API: Manipulate browser history
Web Audio API: Process and synthesize audio
WebRTC: Real-time communication without plugins

Example of using localStorage:
javascriptCopylocalStorage.setItem('username', 'John');
let username = localStorage.getItem('username');