Dev.to

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 , , , 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: – Defines a page header. – Represents independent content. – Groups related content. – Defines the page footer. 4. What is the difference between and ? `` is a block-level element used for grouping content. `` 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: ``. Relative Tags: Depend on other elements, like `` inside ``. Self-closing Tags: Do not require a closing tag. Example: `, ,,`. 6. What is the difference between and tags? `` is used to connect external CSS files. `` is used to include JavaScript code. 7. What is the Use of the Tag? The 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. Hello Internal CSS – Defined inside a tag. p { color: blue; } External CSS – Written in a separate .css file and links that file to html file. Priority hierarchy: External CSS () Internal CSS (...) 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 or ). 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

Mar 13, 2025 - 17:55
 0
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

,

,

, 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:

– Defines a page header.
– Represents independent content.
– Groups related content.