Frontend Development Interview Mock: HTML, CSS, JavaScript, and React 💻

Introduction & Experience

• Ainash Kumar with 2.5 years experience in frontend development.
• Skills: HTML, CSS, JavaScript, React, Context API for State Management.

Interview Segments

1. Theoretical Questions: Explain concepts and functionalities.
2. Output-based Questions: Analyze and predict outputs from code snippets.
3. Machine Coding Round: Implement a given problem statement.

Theoretical Questions

HTML Questions

• Why use DOCTYPE? Tells the browser the version of HTML being used.
• Head Tag Usage: Includes meta tags for SEO, title of the document, external script, and CSS files.
• Script Tag Placement: Preferably just before the closing body tag for scripts interacting with the DOM. defer attribute allows placing in head by deferring execution until DOM is parsed.

JavaScript Loading Attributes

• Defer: Downloads script in advance but defers execution till DOM is fully parsed.
• Async: Downloads and executes script as soon as it is ready, potentially interrupting HTML parsing, making the behavior unpredictable if accessing DOM elements.

Custom HTML Elements

• Custom Element Names: Can create custom elements, will default to inline display behavior.

Inline vs Block Elements

• Inline Elements: Cannot set width/height; margins only for left/right; padding affects content shift.
• Block Elements: Can set width/height; takes full width of parent container; occupies line space.

CSS Questions

• Box Model: How browser calculates element height and width. Two main properties: content-box (default, excludes margin and border) and border-box (includes margin and border).

Image Display

• Images: Inline elements, but can set width and height due to being 'replaced elements'.

JavaScript Questions

Data Types

• Primitive: Number, String, Boolean.
• Non-Primitive: Array, Functions, Object.

Classes in JavaScript

• Type of Class: typeof operator returns 'function' for classes.
• Type of Function: Returns 'function' for functions.
• Type of Array: Returns 'object' for arrays.

Promises

• Definition: Special object representing eventual completion of an asynchronous operation. Three states: pending, resolved, rejected.
• Example: Created promise, resolving it on button click.
• Promise Behavior: Stopped execution at await, restarted after resolution from the same line.

Output-based Questions

Importing Scripts & Execution Order

• Execution Order: Import statements execute before other scripts in file, importing script files before execution of console logs.
• Scope in Modules: Introduction to module scope vs global scope.

Machine Coding Round: Creating Circles on Click and Checking Intersection

• Create circles with random radius (between 10 – 100 px) on click, centered at the click point.
• Maximum of two circles displayed; third click removes the first two circles.
• Check if two circles intersect using distance formula:

  const isIntersecting = (x0, y0, r0, x1, y1, r1) => 
    Math.hypot(x1 - x0, y1 - y0) < (r0 + r1);
  

Reflection & Feedback

Key Points

• Conceptual Depth: Proficiency in HTML, CSS, JavaScript, and foundational knowledge in React.
• Problem Solving: Effective use of debugging techniques and logical reasoning.
• Suggestions: Improve variable naming conventions for better readability in collaboration.

Overall Rating

• Self-assessed as 7/10, however, performance deserves 9/10.
• Demonstrated competence and readiness for higher responsibility in frontend development roles.

Learning Path & Recommendations

• Next Steps: Deep dive into advanced topics in JavaScript, explore backend using Node.js, consistent hands-on practice on frameworks like Next.js.