Skip to main content

​
1. HTML Fundamentals

HTML (HyperText Markup Language) structures the content of web pages using elements and tags. It defines the page layout and content hierarchy for browsers and SEO.
Semantic HTML uses meaningful tags like <header>, <footer>, <article> that describe their role in the document, improving accessibility and SEO.
Meta tags provide metadata such as page description, viewport settings, and character encoding. Example: <meta name='viewport' content='width=device-width, initial-scale=1.0' />.
Block elements (like <div>, <p>) start on new lines and take full width. Inline elements (like <span>, <a>) sit within text without breaking flow.
<!DOCTYPE html> tells the browser to use the HTML5 standard mode, ensuring consistent rendering across browsers.

​
2. CSS & Styling

Relative: moves relative to its normal position.
Absolute: positions relative to the nearest positioned ancestor.
Fixed: sticks to viewport regardless of scrolling.
Flexbox provides a one-dimensional layout system for aligning and distributing space in a container. Core properties: display: flex, justify-content, align-items, flex-direction.
Grid is two-dimensional (rows and columns). Use display: grid and properties like grid-template-rows, grid-template-columns, gap.
Determines which rule takes precedence. Order: inline styles > IDs > classes > elements. The higher specificity wins.
Minify CSS, use critical CSS for above-the-fold content, limit nesting, and prefer utility frameworks like Tailwind for scalability.

​
3. JavaScript Core Concepts

Variables and function declarations are moved to the top of their scope before code execution. Only declarations are hoisted, not initializations.
var has function scope and can be re-declared;
let and const have block scope;
const cannot be reassigned after initialization.
Attaching a single event listener to a parent element to manage events on its children using event bubbling.
A closure is a function that remembers variables from its outer scope even after that scope has returned.
Synchronous: executes line-by-line.
Asynchronous: allows tasks (like fetching data) to run in the background using Promises or async/await.

​
4. React Fundamentals

React is a declarative JavaScript library for building reusable UI components with virtual DOM and one-way data flow.
Virtual DOM is an in-memory representation of the real DOM. React compares diffs and updates only changed parts for performance.
Props are read-only data passed from parent to child; state is mutable data within a component that triggers re-render when updated.
Controlled components use React state to manage input values.
Uncontrolled components use refs to access DOM values directly.
Keys help React identify which items changed, added, or removed. Always provide a unique key when rendering lists.

​
5. React Hooks & Lifecycle

Handles side effects such as fetching data or subscriptions. Dependency array controls re-run logic; cleanup prevents memory leaks.
useMemo memoizes computed values, useCallback memoizes functions. Both prevent unnecessary re-renders for performance.
Use controlled components with onChange and state, or libraries like Formik/React Hook Form for validation and handling.
Context allows sharing global data (like theme, user) without prop drilling, using createContext and useContext.
React compares new and old virtual DOM trees and efficiently updates only changed nodes — this is called diffing.

​
6. Next.js & Advanced Frontend

Next.js is a React framework providing server-side rendering (SSR), static generation (SSG), routing, and API routes for full-stack apps.
SSR: Rendered on server for better SEO.
SSG: Pre-rendered at build time for static sites.
CSR: Fully client-rendered via React.
File-based routing using [param].js inside the pages folder. Example: pages/users/[id].js for dynamic user pages.
Use next/image for lazy loading, getStaticProps for pre-rendering, code-splitting, and caching via headers.
Use .env.local and access via process.env.NEXT_PUBLIC_... for client-side variables.

​
7. TypeScript in Frontend

TypeScript adds static typing to JavaScript, reducing bugs, improving IDE support, and enabling better code maintainability.
Both define shapes of objects, but interface supports declaration merging, while type can define unions and complex types.
Generics create reusable components and functions that work with multiple types. Example: function identity<T>(arg: T): T { return arg; }
Built-in helpers like Partial, Pick, Omit, Readonly that modify existing types dynamically.
It enforces prop types, detects errors early, and improves IntelliSense. Example: interface Props { name: string } const Hello = ({ name }: Props) => <div>{name}</div>

​
8. Frontend Performance & Optimization

Use lazy loading, code splitting, image optimization, memoization, and caching. Minimize re-renders and reduce bundle size.
Load components only when needed using React.lazy() and Suspense. Reduces initial load time.
Debounce delays execution until a pause in input (e.g., search). Throttle limits execution rate of a function.
Divides large JS bundles into smaller chunks loaded on demand, improving load performance and caching efficiency.
Use WebP format, responsive images (srcset), and lazy loading (loading='lazy'). Next.js Image handles this automatically.

​
9. Accessibility & Testing

Ensuring web apps are usable by everyone, including people with disabilities. Follow WCAG guidelines, use ARIA attributes.
Use Jest and React Testing Library. Test user interactions, not implementation details. Example: screen.getByText('Submit').
Captures component output and compares it in future runs to detect UI changes automatically.
Add labels to inputs, use proper focus states, and provide keyboard navigation support.
Lighthouse, axe-core, Wave, or Chrome DevTools Accessibility panel.

​
10. Deployment & Best Practices

Deploy via Vercel, Netlify, or AWS. Build using npm run build, then upload static files or SSR output.
Use HTTPS, sanitize user input, implement CSP headers, avoid storing tokens in localStorage, prefer HttpOnly cookies.
Automate testing and deployment using GitHub Actions, Jenkins, or Vercel pipelines for faster iteration and reliability.
Keep .env out of version control, use deployment environment configs (Vercel, Netlify secrets).
Use consistent styling, modular components, meaningful naming, linting, and maintain clear folder structure.

​
Conclusion & Interview Tips

This guide covers key frontend interview topics — from HTML to React, Next.js, and TypeScript.

​
Preparation Tips

  • Master fundamentals (HTML, CSS, JS) before frameworks
  • Build real projects (e.g., dashboards, portfolios, e-commerce)
  • Focus on clean UI/UX and performance
  • Practice live coding and debugging

​
During the Interview

  • Talk through your thought process
  • Explain trade-offs and optimizations
  • Discuss scalability and maintainability
  • Be clear and confident
Front-end interviews test not only your technical skills but also design thinking, accessibility awareness, and attention to user experience.
Good luck with your Frontend Developer interviews!