Front-end Developer Interview Questions and Answers

HTML

1. What is HTML?

--> HTML (HyperText Markup Language) is the standard language for creating web pages.
--> It provides the structure of a webpage using elements like <p>, <div>, <h1>, etc.

2. Why HTML5?

--> HTML5 is a powerful and flexible technology for building modern web applications.
--> It enhances usability, performance, and interactivity by introducing semantic elements, multimedia support, form validation, graphics, storage, and APIs.

3. What are semantic elements in HTML5?

--> Semantic elements provide meaning to the web structure.

Examples:
<header> – Defines a page header.
<article> – Represents independent content.
<section> – Groups related content.
<footer> – Defines the page footer.

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

`<div>` is a block-level element used for grouping content.
`<span>` is an inline element used to style small parts of text.

5. What is the difference between absolute, relative, and self-closing tags?

Absolute Tags: Need both an opening and closing tag. Example: `<p></p>`.
Relative Tags: Depend on other elements, like `<li>` inside `<ul>`.
Self-closing Tags: Do not require a closing tag. Example: `<img>, <input>,<br>,<hr>`.

6. What is the difference between <link> and <script> tags?

`<link>` is used to connect external CSS files.
`<script>` is used to include JavaScript code.

<link rel="stylesheet" href="style.css">  
<script src="script.js"></script>

7. What is the Use of the <meta> Tag?

The <meta> tag provides important information about a webpage to browsers and search engines. This information is called metadata (data about data).

It helps in:

• Helps search engines understand the page.
• Improves SEO (Search Engine Optimization).
• Controls how the page behaves on different devices.
• Helps browsers load the page correctly.

CSS:

1. What are the different types of CSS?

• Inline CSS – Applied directly within an HTML tag.

<p style="color: red;">Hello</p>

• Internal CSS – Defined inside a tag.</li> </ul> <p><code>&lt;style&gt; p { color: blue; } &lt;/style&gt;</code></p> <ul> <li>External CSS – Written in a separate .css file and links that file to html file.</li> </ul> <p><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;</code></p> <p><strong>Priority hierarchy:</strong></p> <ol> <li>External CSS (<link rel="stylesheet">)</li> <li>Internal CSS (<style>...)
• Inline CSS (style="...") (Highest normal priority)

2. What is the difference between id and class in CSS?

• id: Unique identifier, applied to a single element.

#header { color: red; }

• class: Can be used for multiple elements.

.button { background: blue; }

Note:
--> ID has higher priority than Class.
--> If both ID and Class are applied, the ID styles will override class styles.

3. What do you mean by css selectors?Name a few.

CSS selectors are used to target and style specific elements in HTML.

1️) Universal Selector (*) → Selects all elements.
2️) Element Selector (tag) → Selects all elements of a specific type (e.g., all <p> or <h1>).
3️) Class Selector (.class) → Selects all elements with a specific class.
4️) ID Selector (#id) → Selects a unique element with a specific ID.

4. What is Flexbox in CSS?

Flexbox is a layout model used for aligning elements efficiently.

• justify-content: Aligns items horizontally.
• align-items: Aligns items vertically.

5. How do you make a website responsive?

• Use media queries (@media).
• Use relative units (%, em, rem, vw, vh).
• Use Flexbox or Grid Layout.

Javascript

1. What is JavaScript?

--> JavaScript (JS) is a high-level, interpreted programming language that enables developers to create dynamic and interactive web applications.
--> It is a core technology of the web, alongside HTML (structure) and CSS (styling).
--> Originally designed for client-side scripting, JavaScript has evolved to support server-side programming with Node.js.
--> It is widely used in web development, game development, mobile apps, and more.

2. What is the difference between let, const, and var?

var: Function-scoped, can be redeclared.
let: Block-scoped, cannot be redeclared.
const: Block-scoped, cannot be reassigned.

Example:

var x = 10;  // Function scope
let y = 20;  // Block scope
const z = 30; // Constant value

3. What are arrow functions in JavaScript?

--> Arrow functions in JavaScript are also called anonymous functions because they do not have a name.
--> They are mainly used for short-term tasks, like callbacks. They are simpler to write and use the => symbol to define a function.
--> Arrow functions do not have their own this or arguments object. --> If the function has only one statement, it automatically returns the result without needing the return keyword.

Ex:

const sum = (a, b) => a + b;
console.log(sum(5, 10)); // 15

4. What is the difference between == and ===?

==: Compares values (type conversion allowed).
===: Compares values and types (strict comparison).

Ex:

console.log(5 == "5");  // true
console.log(5 === "5"); // false

5. What is the difference between null and undefined?

• null: Assigned value representing "no value".
• undefined: Variable declared but not assigned a value.

Ex:

let a = null;
let b;
console.log(a); // null
console.log(b); // undefined