Are you curious about the questions asked in the full-stack round? Explore the 30 most asked full-stack interview questions for freshers below!

Tech Interview

Tech interview rounds for freshers assess programming skills, problem-solving ability, and knowledge of basic algorithms and data structures, often including coding challenges. They may evaluate your understanding of basic concepts, interest in tech trends, and behavioural aspects like communication and teamwork. Preparation includes practising coding problems, reviewing core concepts, and being ready to discuss your projects and experiences.

20 Most Asked Full-Stack Interview Questions

HTML Most Asked Interview Questions

Q1. What are the basic building blocks of HTML?

Ans. The basic building blocks of HTML are:

  • Elements: Elements are the fundamental components of HTML, represented by tags enclosed in angle brackets ‘(<>)’. They define the structure and content of a web page.
  • Tags: Tags are used to enclose content within an element. They come in pairs – an opening tag (‘<tag>’) and a closing tag (‘</tag>’), with the content placed between them.
  • Attributes: Attributes provide additional information about an element and are included within the opening tag. They are typically in the form of name-value pairs (‘name=”value”’) and modify the element’s behavior or appearance.
  • Text Content: Text content refers to the actual text displayed on a web page. It can be included directly within elements or as attributes.
  • Comments: Comments allow developers to add notes or annotations within the HTML code without affecting the rendered output in the browser. They are enclosed within ‘<!– ‘ and ‘ –>’.
<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Example</title>
</head>
<body>
    <!-- This is a comment -->
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <img src="example.jpg" alt="This is image">
    <a href="https://www.example.com">This is a link</a>
</body>
</html>

Q2. What are some common HTML tags?

Ans: Some common HTML tags are,

  • ‘<p>’: Defines a paragraph.
    • Example: ‘<p>’ This is a paragraph.‘<p>’
  • ‘<a>’: Creates hyperlinks.
    • Example: ‘<a href=”https://www.example.com”>Visit Example</a>’
  • ‘<img>’: Embeds images.
    • Example: <img src=”image.jpg” alt=”Description”>
  • ‘<h1>’ to ‘<h6>’: Headings of different levels.
    • Example: ‘<h1>Main Heading</h1>’
  • ‘<ul>’, ‘<ol>’, ‘<li>’: Creates unordered lists, ordered lists, and list items, respectively.

Example:

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

‘<form>’, ‘<input>’, ‘<button>’: Constructs forms, input fields, and buttons.

Example:

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

‘<head>’, ‘<title>’, ‘<meta>’: Provides metadata and title for the document.

Q3. What is the purpose of the href attribute in the tag?

Ans. The href attribute in the tag specifies the destination of a hyperlink. It defines the URL to which the user will be directed when clicking the link.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee Example</title>
</head>
<body>
    <marquee behavior="scroll" direction="left" scrollamount="5">
        This text is scrolling from left to right.
    </marquee>
</body>
</html>

<a href="https://example.com">Visit Example Website</a>

Q4. What is the purpose of the <span> tag in HTML?

Ans. The <span> tag in HTML is a generic inline container used to apply styles or manipulate specific parts of text within a larger block of content without adding any semantic meaning.

<!DOCTYPE html>
<html>
<head>
  <title>Example Using span</title>
  <style>
    /* CSS to style the span */
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>

<p>This is a <span class="highlight">highlighted</span> text.</p>

</body>
</html>

The <span> tag is used to highlight a specific word within a paragraph. The class=”highlight” attribute is added to the <span> to apply CSS styles and change the color and weight of the text.

Q5. How many types of headings does an HTML contain?

Ans. HTML includes six heading levels designated by the <h1> to <h6> tags. Each heading tag presents text at a distinct size, with <h1> being the largest and <h6> the smallest. For instance:

  • <h1>Heading no. 1</h1>    
  • <h2>Heading no. 2</h2>    
  • <h3>Heading no. 3</h3>    
  • <h4>Heading no. 4</h4>    
  • <h5>Heading no. 5</h5>    
  • <h6>Heading no. 6</h6> 

Q6. What is a marquee?

Ans: A marquee is an element that creates a scrolling or moving text or image effect within a web page. It’s primarily used for displaying dynamic content that moves horizontally or vertically across the screen.

The ‘<marquee>’ element creates a scrolling effect for the text “This text is scrolling from left to right.” The ‘behavior’ attribute specifies the scrolling behavior (in this case, scrolling), the direction attribute determines the scrolling ‘direction’ (left), and the ‘scrollamount’ attribute sets the scrolling speed.

Most Asked Full-Stack Interview Questions for Freshers

CSS Most Asked Interview Questions

Q7. What is CSS? ‎ ‎‎    

Ans. CSS stands for Cascading Style Sheets. It’s a style sheet language used to describe the presentation of a document written in markup languages like HTML or XML. Essentially, CSS is responsible for how a web page looks, including layout, colors, fonts, and animations. It allows web designers to separate the structure and content of a web page from its visual presentation, making it easier to manage and maintain websites. CSS selects HTML elements and applies styling rules to them, either directly within the HTML document or in an external CSS file.

Syntax:

selector {
    Property: value;
}

Q8. What are the methods to incorporate CSS into a webpage?

Ans: To include CSS on a web page, you typically use one of these methods:

  1. Inline CSS: Apply styles directly to HTML elements using the style attribute.
<p style=”color: blue; font-size: 16px;”>This is a paragraph.</p>
  1. Internal CSS: Define styles within the <style> element in the <head> section of the HTML document.
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
  1. External CSS: Create a separate CSS file and link it to the HTML document using the <link> element.
<head>
    <link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>

Q9. Which type of CSS holds the highest priority?

Ans. In CSS, the type of selector with the highest priority is the inline style. Here’s the order of specificity, from highest to lowest:

  • Inline styles: Styles applied directly to an HTML element using the style attribute. They have the highest specificity and override any other styles applied to the element.
  • ID selectors: Selectors targeting an element by its unique id attribute. They have higher specificity than class selectors and element selectors.
  • Class selectors, attribute selectors, and pseudo-classes: Selectors targeting elements based on class names, attributes, or pseudo-classes like :hover or :nth-child(). They have lower specificity than IDs but higher than element selectors.
  • Element selectors: Selectors targeting elements based on their HTML tag name. They have the lowest specificity and are overridden by any other types of selectors with higher specificity.

Q10. How would you select all direct children elements of a particular type?

Ans. To select all direct children of a specific type in CSS, you can use the > child selector combined with the desired element to build the selector.
For example, to select all the direct children that are <li> elements within an <ul> element, you would use the following CSS:

ul > li {
  /* Styles here */
}

Q11. What does * { box-sizing: border-box; } do? What are its advantages?

Ans. The CSS rule * { box-sizing: border-box; } applies the box-sizing property with a border-box value to all elements on a web page.

This rule changes the box model used by elements. Normally, when you set the width or height of an element, it only applies to the content area, and padding and borders are added to the specified width or height. With box-sizing: border-box, the width and height specified for an element include padding and borders, making layout calculations more intuitive.

Advantages:

  • Consistency: Ensures consistent box model behavior across all elements, making predicting and controlling layout easier.
  • Simplified Layout: This layout calculation is simplified by including padding and a border within the specified width and height, reducing the need for complex adjustments.
  • Ease of Maintenance: Makes it easier to maintain and update CSS, as you don’t need to adjust styles to accommodate padding and border widths.

Using box-sizing: border-box; promotes cleaner and more maintainable CSS code, streamlining the development process.

Q12. What is the CSS float property?

Ans. The CSS float property is used to align elements horizontally within their container. When an element is floated, it is removed from the document’s normal flow and positioned to the left or right of its container, allowing other content to wrap around it. This property is commonly used for creating layouts, such as multi-column designs or floating images within text.

.container {
    border: 1px solid black;
    overflow: hidden; /* Clearfix to contain floated elements */
}

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

Java Script Most Asked Interview Questions

Q13. What is an event in JavaScript?

Ans. In JavaScript, an event refers to an action or occurrence that takes place within the browser or web page. User interactions like clicks, inputs, or page loading trigger web events; they allow developers to create interactive web apps by modifying page elements based on user actions.

Some common types of events in JavaScript include Mouse Events, Keyboard Events, Form Events, Document and Window Events, and Touch Events.

Q14. What is JSON and its common operations?

Ans. JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. As an alternative to XML, it is commonly used to transmit data between a server and a web application.

JSON is a text-based format that uses key-value pairs. Keys must be strings, while values can be strings, numbers, arrays, objects, booleans, or null. JSON data structures are similar to JavaScript object literals.

Common operations with JSON include:

  • Parsing: Converting a JSON string into a JavaScript object. This is done using the JSON.parse() method.
    • const jsonString = ‘{“name”: “Tina”, “age”: 30}’;
    • const jsonObject = JSON.parse(jsonString);
    • console.log(jsonObject); // Output: { name: ‘Tina’, age: 30 }
  • Stringifying: Converting a JavaScript object into a JSON string. This is done using the JSON.stringify() method.
    • const jsonObject = { name: ‘Tina’, age: 30 };
    • const jsonString = JSON.stringify(jsonObject);
    • console.log(jsonString); // Output: ‘{“name”:”Tina”,”age”:30}’
  • Accessing Data: This involves accessing values stored in a JSON object. It can be done using dot notation or square bracket notation.
    • const jsonObject = { name: ‘Tina’, age: 30 };
    • console.log(jsonObject.name); // Output: ‘Tina’
    • console.log(jsonObject[‘age’]); // Output: 30
  • Modifying Data: Modifying values in a JSON object.
    • const jsonObject = { name: ‘Tina’, age: 30 };
    • jsonObject.age = 35;
    • console.log(jsonObject); // Output: { name: ‘Tina’, age: 35 }

Q15. What will be the output of the following code?

var a = [1, 2, 3];

var b = [1, 2, 3];

Ans. console.log(a == b); // Output: false;

Arrays in JavaScript are reference types, which means that even if two arrays have the same values, they are not considered equal because they are stored in different memory locations. When comparing two arrays using the abstract equality operator (==), the comparison checks whether both operands refer to the same array object in memory, which is not the case here. So, the output will be false.

 Q16. How do we define comments in JavaScript?

Ans. Comments in Javascript define as,

  • For Single line comments:-“//” is used.
  • For Multi-line comments:-“/* is used for multi-line comment */”.

Q17. What is a unary function?

Ans. A unary function is a function that takes exactly one argument. In mathematics and computer science, unary operations or functions are operations or functions that take a single input.

For example, consider the following unary function in JavaScript:

const square = (x) => x * x;

In this function, ‘square’ is unary because it takes only one argument ‘x’.

Unary functions can be found in various contexts, including mathematics, programming, and logic. They are fundamental building blocks in many algorithms and computations.

Q18. How do you decode or encode a URL in JavaScript?

Ans. You can decode or encode a URL using the decodeURIComponent() and encodeURIComponent() functions, respectively.

  • Decode a URL: Use decodeURIComponent() to decode a URL string.

let url = “https://www.example.com/?q=%C3%A9%20%C3%A0”;

let decodedUrl = decodeURIComponent(url);

console.log(decodedUrl);

// Output: “https://www.example.com/?q=é à”

  • Encode a URL: Use encodeURIComponent() to encode a URL string.

let url = “https://www.example.com/?q=é à”;

let encodedUrl = encodeURIComponent(url);

console.log(encodedUrl);

// Output: “https%3A%2F%2Fwww.example.com%2F%3Fq%3D%C3%A9%20%C3%A0”

Note: If you wish to encode characters like / ? : @ & = + $ #, you should utilize encodeURIComponent().

Q19. What is ClickJacking?

Ans. Clickjacking is a type of attack that tricks a user into clicking a webpage element which is invisible or disguised as another element.

Q20. Mention the difference between MySQL and MongoDB

Ans. MySQL implements SQL, which is based on table-based databases, while MongoDB implements NoSQL, which is based on BSON (binary encoded JSON) data, which can include tables, objects and other types of data.

Want to practice more?

Get registered for the Full-Stack interview premium package now!

Click here to view more most asked full-Stack interview questions for freshers.