Frontend Developer Interview Questions and Answers

What is HTML?

Html stands for HyperText Markup language used to create and design web pages and its content.

What is the difference between HTML and XHTML?

Xhtml is stricter version of html and it is stricter in terms of syntax and elements.

What HTML tags ?

Html tags are used to define the structure of web pages and its content.

What is the role of Doctype in HTML?

The doctype(Document Type) declaration specifies the version of html used in the document.
It tells the browser which version of html it is and how to interpret the code.

<DOCTYPE html> -- version 5

What are Meta tags? what are 5 types of meta tags

Meta tags are used to provide metadata or additional information about the document. 5 types :
charset(character Encoding):helps browsers to interpret the different characters in the documents <meta charset="UTF-8"> attributes ensures that the browser interprets the document correctly.
viewport(viewport):helps browsers to adjust the page to fit the screen size (creating responsive web design). <meta name="viewport" content ="width=device-width, initial-scale=1.0">
description(Description):helps browsers to display a description of the document.Search engine may use this for search result. <meta name="description" content="Interview preparation">
keywords(Keywords):helps browsers to display relevant keywords for the document. <meta name="keywords" content="HTML, CSS, JavaScript">
author(Author):helps browsers to display the author of the document. <meta name="author" content="Apsara">

what is block and inline elements ?

Block elements:
- They start on a new line and take up the full width available.
- They can contain other block elements and inline elements.
- They have a default width that is equal to the width of the parent container.
- Can set width and height for block elements.
- <div>,<section>,<article>,<header>,<footer> are some examples of block elements.
Inline elements:
- They do not start on a new line and only take up as much width as necessary.
- They can only contain other inline elements.
- They have a default width that is equal to the width of the content.
- Can't set width and height for inline elements.
- <span>,<a>,<img>,<input> are some examples of inline elements.

What is the difference between <div> and <span>?

<div> is a block-level element and <span> is an inline element. -<div>is container used to group and structure the content on a webpage. -<span> is an inline container and is used to apply style or scripting a specific section of text ot content .

** what is semantic and non-semantic elements?**

Semantic elements:
- They provide meaning to the content and structure of the document.
- They are descriptive and convey the meaning of the content to both humans and machines.
- Examples: <header>,<main>,<address>,<nav>,<article>,<section>,<footer>
Non-semantic :
- They do not provide any meaning or structure to the content.
- They are used to provide structure to the document without any meaning.
- Examples: <div>,<span>,<br>,<hr>,<img>,<table>,<input>

What is the difference between Absolute and Relative URLs`?

Absolute URLs:

They can be used to link to any resource on the web.
They are useful for linking to external resources.
They start with the protocol (e.g. Absolute URLs: URL_ADDRESS.example.com">

Relative URLs:

They are relative to the current URL.

What is the difference between <img> and <iframe>?

<img> is used to embed an image into a document.

They have a src attribute that specifies the URL of the image.
They can have attributes like width and height to specify the size of the image.
They can have attributes like alt to provide alternative text for the image. <iframe> is used to embed another document or webpage into the current document.
They have a src attribute that specifies the URL of the webpage.
They can have attributes like width and height to specify the size of the iframe.
They can have attributes like sandbox to restrict the content of the iframe.

HTML Multiple Choice Questions

What does HTML stand for?
- A) Hyper Text Markup Language
- B) High Text Markup Language
- C) Hyperlink and Text Markup Language
- D) Home Tool Markup Language
- Answer: A) Hyper Text Markup Language
Which tag is used to define a hyperlink in HTML?
- A) <a>
- B) <link>
- C) <href>
- D) <hyperlink>
- Answer: A) <a>
Which tag is used to create an unordered list in HTML?
- A) <ol>
- B) <list>
- C) <ul>
- D) <unordered>
- Answer: C) <ul>
Which tag is used to define an image in HTML?
- A) <image>
- B) <img>
- C) <picture>
- D) <src>
- Answer: B) <img>
Which tag is used to define a table in HTML?
- A) <table>
- B) <tr>
- C) <td>
- D) <tab>
- Answer: A) <table>
What is the correct HTML for creating a checkbox?
- A) <check>
- B) <input type="check">
- C) <checkbox>
- D) <input type="checkbox">
- **Answer: D) <input type="checkbox">**
Which attribute is used to specify the URL of the page that the link goes to?
- A) url
- B) src
- C) href
- D) link
- Answer: C) href
What is the correct HTML for inserting a line break?
- A) <break>
- B) <lb>
- C) <br>
- D) <linebreak>
- Answer: C) <br>
Which tag is used to define a paragraph in HTML?
- A) <paragraph>
- B) <p>
- C) <para>
- D) <ph>
- Answer: B) <p>
Which HTML attribute specifies an alternate text for an image, if the image cannot be displayed?
- A) alt
- B) title
- C) src
- D) href
- Answer: A) alt
Which tag is used to define a header in HTML?
- A) <header>
- B) <h>
- C) <head>
- D) <heading>
- Answer: B) <h>
What is the purpose of the HTML <meta> tag?
- A) To define a hyperlink
- B) To define metadata about an HTML document
- C) To create a list
- D) To define a section in an HTML document
- Answer: B) To define metadata about an HTML document
Which HTML tag is used to define an input field for entering a password?
- A) <password>
- B) <input type="password">
- C) <input type="text">
- D) <input>
- Answer: B) <input type="password">
What is the correct way to add comments in HTML?
- A) 
- B) // This is a comment
- C) /* This is a comment */
- D) # This is a comment
- Answer: A) 
Which HTML element is used to specify a footer for a document or section?
- A) <footer>
- B) <foot>
- C) <end>
- D) <bottom>
- Answer: A) <footer>
Which tag is used to define an abbreviation or acronym in HTML?
- A) <abbr>
- B) <acronym>
- C) <abbrv>
- D) <acro>
- Answer: A) <abbr>
What is the purpose of the HTML <iframe> element?
- A) To embed external content into a webpage
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To embed external content into a webpage
Which HTML tag is used to define an unordered list item?
- A) <li>
- B) <ul>
- C) <list>
- D) <item>
- Answer: A) <li>
What is the correct way to define a hyperlink that opens in a new tab?
- A) <a href="url" target="_new">Link</a>
- B) <a href="url" target="_blank">Link</a>
- C) <a href="url" newtab>Link</a>
- D) <a href="url" blank>Link</a>
- Answer: B) <a href="url" target="_blank">Link</a>
Which HTML attribute is used to specify the language of the content?
- A) lang
- B) language
- C) lingo
- D) locale
- Answer: A) lang
Which HTML tag is used to define a section in a document?
- A) <section>
- B) <div>
- C) <part>
- D) <segment>
- Answer: A) <section>
What is the correct HTML for creating a hyperlink?
- A) <a href="url">Link</a>
- B) <link href="url">Link</link>
- C) <href="url">Link</href>
- D) <hyperlink url="url">Link</hyperlink>
- Answer: A) <a href="url">Link</a>
What does the HTML <canvas> element do?
- A) Defines a container for navigation links
- B) Defines a container for image maps
- C) Defines a container for graphics
- D) Defines a container for videos
- Answer: C) Defines a container for graphics
What is the correct HTML for creating a button?
- A) <button>
- B) <btn>
- C) <button></button>
- D) <button />
- Answer: C) <button></button>
Which HTML element is used to define a list of navigation links?
- A) <nav>
- B) <navigation>
- C) <links>
- D) <list>
- Answer: A) <nav>
Which HTML tag is used to define a paragraph break?
- A) <p>
- B) <br>
- C) <paragraph>
- D) <break>
- Answer: B) <br>
What is the purpose of the HTML <video> element?
- A) To define a video clip
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To define a video clip
Which HTML tag is used to define a form in HTML?
- A) <form>
- B) <input>
- C) <button>
- D) <submit>
- Answer: A) <form>
What is the correct HTML for creating an email link?
- A) <a href="mailto:email@example.com">Email</a>
- B) <mail>email@example.com</mail>
- C) <email>email@example.com</email>
- D) <a>email@example.com</a>
- Answer: A) <a href="mailto:email@example.com">Email</a>
Which HTML tag is used to define an italicized text?
- A) <italic>
- B) <i>
- C) <italicize>
- D) <italics>
- Answer: B) <i>
What is the purpose of the HTML <script> element?
- A) To define a section of text
- B) To create a hyperlink
- C) To define client-side JavaScript
- D) To define a table
- Answer: C) To define client-side JavaScript
Which HTML tag is used to define a navigation link within a navigation list?
- A) <item>
- B) <nav>
- C) <li>
- D) <link>
- Answer: C) <li>
What is the correct HTML for inserting a horizontal line?
- A) <line>
- B) <hr>
- C) <hl>
- D) <horizontal>
- Answer: B) <hr>
Which HTML tag is used to define a division or a section in an HTML document?
- A) <division>
- B) <div>
- C) <section>
- D) <part>
- Answer: B) <div>
What is the purpose of the HTML <iframe> element?
- A) To embed external content into a webpage
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To embed external content into a webpage
Which HTML element is used to define a section in a document?
- A) <section>
- B) <div>
- C) <part>
- D) <segment>
- Answer: A) <section>
What is the correct way to define a hyperlink that opens in a new tab?
- A) <a href="url" target="_new">Link</a>
- B) <a href="url" target="_blank">Link</a>
- C) <a href="url" newtab>Link</a>
- D) <a href="url" blank>Link</a>
- Answer: B) <a href="url" target="_blank">Link</a>
Which HTML attribute is used to specify the language of the content?
- A) lang
- B) language
- C) lingo
- D) locale
- Answer: A) lang
Which HTML tag is used to define a header in HTML?
- A) <header>
- B) <h>
- C) <head>
- D) <heading>
- Answer: B) <h>
What is the purpose of the HTML <meta> tag?
- A) To define a hyperlink
- B) To define metadata about an HTML document
- C) To create a list
- D) To define a section in an HTML document
- Answer: B) To define metadata about an HTML document
Which HTML tag is used to define an input field for entering a password?
- A) <password>
- B) <input type="password">
- C) <input type="text">
- D) <input>
- Answer: B) <input type="password">
What is the correct way to add comments in HTML?
- A) 
- B) // This is a comment
- C) /* This is a comment */
- D) # This is a comment
- Answer: A) 
Which HTML element is used to specify a footer for a document or section?
- A) <footer>
- B) <foot>
- C) <end>
- D) <bottom>
- Answer: A) <footer>
Which tag is used to define an abbreviation or acronym in HTML?
- A) <abbr>
- B) <acronym>
- C) <abbrv>
- D) <acro>
- Answer: A) <abbr>
What does the HTML <canvas> element do?
- A) Defines a container for navigation links
- B) Defines a container for image maps
- C) Defines a container for graphics
- D) Defines a container for videos
- Answer: C) Defines a container for graphics
What is the correct HTML for creating a button?
- A) <button>
- B) <btn>
- C) <button></button>
- D) <button />
- Answer: C) <button></button>
Which HTML element is used to define a list of navigation links?
- A) <nav>
- B) <navigation>
- C) <links>
- D) <list>
- Answer: A) <nav>
Which HTML tag is used to define a paragraph break?
- A) <p>
- B) <br>
- C) <paragraph>
- D) <break>
- Answer: B) <br>
What is the purpose of the HTML <video> element?
- A) To define a video clip
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To define a video clip
Which HTML tag is used to define an italicized text?
- A) <italic>
- B) <i>
- C) <italicize>
- D) <italics>
- Answer: B) <i>

Certainly! Here are 30 multiple-choice questions (MCQs) and 5 coding tasks with questions, answers, and solutions for your React trainee examination:

Multiple Choice Questions React basic (MCQs):

What is the purpose of React in web development?
- A) Backend scripting
- B) Database management
- C) Frontend user interface
- D) Server configuration
- Answer: C) Frontend user interface
Which of the following is NOT a core concept of React?
- A) Component
- B) State
- C) Props
- D) Looping
- Answer: D) Looping
Which method is called when a component is removed from the DOM?
- A) componentWillUnmount
- B) componentDidUnmount
- C) componentWillUnmounted
- D) componentWillUnmounting
- Answer: A) componentWillUnmount
What hook is used to perform side effects in functional components?
- A) useState
- B) useEffect
- C) useContext
- D) useReducer
- Answer: B) useEffect
Which of the following is a popular library for state management in React?
- A) Redux
- B) Reactivity
- C) Flux
- D) Reflux
- Answer: A) Redux
What does JSX stand for?
- A) JavaScript XML
- B) JavaScript Extension
- C) JSX Syntax
- D) JavaScript Extension Language
- Answer: A) JavaScript XML
Which method is called before rendering a component?
- A) componentWillMount
- B) componentWillRender
- C) componentDidMount
- D) componentWillUpdate
- Answer: A) componentWillMount
What is the purpose of React Router?
- A) State management
- B) Component styling
- C) Routing in React applications
- D) API fetching
- Answer: C) Routing in React applications
What is the main function of useState hook in React?
- A) Fetch data from an API
- B) Manage component lifecycle
- C) Manage state in functional components
- D) Handle events in functional components
- Answer: C) Manage state in functional components
Which method is used to change the state of a component in React?
- A) setState()
- B) changeState()
- C) modifyState()
- D) updateState()
- Answer: A) setState()
In React, what is the purpose of keys in lists?
- A) To uniquely identify elements and improve performance
- B) To style elements based on their position
- C) To add animation effects to elements
- D) To dynamically generate elements
- Answer: A) To uniquely identify elements and improve performance
Which method is used to fetch data from an API in React?
- A) fetch()
- B) axios()
- C) getData()
- D) request()
- Answer: A) fetch()
What is the significance of the virtual DOM in React?
- A) It allows for direct manipulation of the DOM
- B) It provides a lightweight version of the DOM for testing
- C) It improves performance by minimizing DOM updates
- D) It enables server-side rendering of React components
- Answer: C) It improves performance by minimizing DOM updates
Which of the following is NOT a valid way to style components in React?
- A) Inline styles
- B) External CSS files
- C) CSS Modules
- D) React Stylesheet
- Answer: D) React Stylesheet
What is the purpose of props in React?
- A) To manage component state
- B) To handle component events
- C) To pass data from parent to child components
- D) To define component styles
- Answer: C) To pass data from parent to child components
What does Redux offer for managing application state in React?
- A) Local component state management
- B) Centralized state management
- C) Event handling
- D) Routing
- Answer: B) Centralized state management
Which hook is used to perform data fetching and side effects in React?
- A) useState
- B) useEffect
- C) useContext
- D) useReducer
- Answer: B) useEffect
What is the purpose of React.Fragment?
- A) To create reusable components
- B) To improve performance by reducing unnecessary re-renders
- C) To group multiple elements without adding extra nodes to the DOM
- D) To optimize DOM traversal
- Answer: C) To group multiple elements without adding extra nodes to the DOM
Which of the following lifecycle methods is invoked just before a component is unmounted from the DOM?
- A) componentWillUnmount
- B) componentWillUnmount
- C) componentDidUpdate
- D) componentWillUnmounted
- Answer: A) componentWillUnmount
What is the purpose of the useCallback hook in React?
- A) To memoize functions and prevent unnecessary re-renders
- B) To manage component state
- C) To perform data fetching
- D) To handle user input
- Answer: A) To memoize functions and prevent unnecessary re-renders
Which method is used to render multiple child components in React?
- A) renderChildren()
- B) mapChildren()
- C) forEachChild()
- D) React.Children.map()
- Answer: D) React.Children.map()
What is the purpose of shouldComponentUpdate lifecycle method in React?
- A) To render components based on conditions
- B) To prevent unnecessary re-renders for performance optimization
- C) To fetch data from an API
- D) To handle component errors
- Answer: B) To prevent unnecessary re-renders for performance optimization
Which of the following is used to handle forms in React?
- A) useState
- B) useEffect
- C) useContext
- D) useForm
- Answer: A) useState
What is the purpose of keys in React when rendering lists?
- A) To provide unique identifiers to

list items - B) To style list items individually - C) To group list items - D) To iterate over list items - Answer: A) To provide unique identifiers to list items

What is the main advantage of using React hooks over class components?
- A) Class components offer better performance
- B) Hooks allow for more concise and readable code
- C) Hooks are only used for state management
- D) Class components are deprecated
- Answer: B) Hooks allow for more concise and readable code
What does the useContext hook in React provide?
- A) Access to the Redux store
- B) Access to the component's context
- C) Access to the DOM context
- D) Access to the browser's history
- Answer: B) Access to the component's context
Which method is used to render React components on the server side?
- A) ReactDOM.renderToString()
- B) ReactDOM.renderToServer()
- C) ReactDOM.renderOnServer()
- D) ReactDOM.renderToStaticMarkup()
- Answer: A) ReactDOM.renderToString()
What is the purpose of the useRef hook in React?
- A) To create references to DOM elements
- B) To manage component state
- C) To fetch data from an API
- D) To handle user input
- Answer: A) To create references to DOM elements
Which of the following is NOT a valid way to define event handlers in React?
- A) onClick={() => handleClick()}
- B) onClick={handleClick}
- C) onClick={this.handleClick}
- D) onClick={handleClick()}
- Answer: D) onClick={handleClick()}

Coding Tasks:

Coding Task 1:

Prompt: Create a React component called Toggle that toggles the visibility of its content when a button is clicked. Initially, the content should be hidden.

import React, { useState } from "react";

const Toggle = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Content</button>
      {isVisible && <div>This content is now visible!</div>}
    </div>
  );
};

export default Toggle;

Coding Task 2:

Prompt: Create a React component called Timer that displays a timer that starts at 0 when the component mounts and increments every second.

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <h2>Timer: {seconds} seconds</h2>
    </div>
  );
};

export default Timer;

Coding Task 3:

Prompt: Create a React component called ColorPicker that allows the user to select a color from a dropdown menu and changes the background color of the component accordingly.

import React, { useState } from "react";

const ColorPicker = () => {
  const [selectedColor, setSelectedColor] = useState("");

  const handleChange = (event) => {
    setSelectedColor(event.target.value);
  };

  return (
    <div style={{ backgroundColor: selectedColor, padding: "20px" }}>
      <h2>Color Picker</h2>
      <select value={selectedColor} onChange={handleChange}>
        <option value="">Select a color</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select>
    </div>
  );
};

export default ColorPicker;

Coding Task 4:

Prompt: Create a React component called TodoList that allows the user to add and remove items from a todo list.

import React, { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const handleAddTodo = () => {
    if (inputValue.trim() !== "") {
      setTodos([...todos, inputValue]);
      setInputValue("");
    }
  };

  const handleRemoveTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}{" "}
            <button onClick={() => handleRemoveTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Coding Task 5:

Prompt: Create a React component called Accordion that displays a list of items. When an item is clicked, its content expands or collapses.

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [expandedIndex, setExpandedIndex] = useState(null);

  const toggleItem = (index) => {
    setExpandedIndex(index === expandedIndex ? null : index);
  };

  return (
    <div>
      <h2>Accordion</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            <button onClick={() => toggleItem(index)}>{item.title}</button>
            {expandedIndex === index && <div>{item.content}</div>}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Accordion;