FrontEnd – Interview Questions (Episode 2)

Second episode of FrontEnd – Interview Questions: short answers to common interview questions on HTML, CSS and JavaScript. On this site all questions are grouped by topic with video timestamps so you can quickly review any section before an interview.

Question 1: What is validation? What types of HTML document validation do you know?

Validation is the process of checking a document with a validator tool to ensure it follows established web standards and to identify any errors. These standards, called specifications, are created by the World Wide Web Consortium (W3C).

How a Validator Works:

1. Identifies the document type using the DOCTYPE declaration.
2. Checks the HTML code for errors, including:
   • Correct tag names.
   • Proper nesting structure.

Question 2: Which tag should be used to create a button?

Types of Buttons:

1. Standard Button: Use the <button> tag with the type="button" attribute.
2. Submit Button: Use <button type="submit"> or <input type="submit">. The <input> approach is considered outdated.
3. Button Link: Use an <a> tag styled with CSS to look like a button.

Question 3: What is inline styling? Can it be overridden?

An inline style is applied directly to an element in the HTML file using the style attribute. It can only be overridden using the !important directive in CSS properties.

Question 4: Do HTML elements have their own default styles?

Yes, most HTML elements come with predefined styles. Examples:

• Headings: Larger font size, padding, bold text.
• Lists: Default markers or numbers.
• Paragraphs: Extra margin.

Cross-Browser Compatibility:

• Normalize CSS: Standardizes styles across browsers.
• Reset CSS: Removes all default styles.

Question 5: Which tag uses the alt attribute, and what is it for?

The alt attribute is used with the <img> tag to:

1. Display alternative text if the image fails to load.
2. Improve accessibility by providing descriptive content for screen readers.

Question 6: What is a selector? What types of selectors exist?

A selector is a part of a CSS rule that specifies which elements should have a style applied.

Types of Selectors:

1. Simple Selectors: Class, ID, tag, universal (*), and attribute selectors.
2. Compound Selectors: Combinations of simple selectors using spaces or combinators like >, ,, and : (pseudo-classes and pseudo-elements).

Question 7: What is selector specificity? How is it calculated?

Specificity determines which CSS rules apply when multiple rules target the same element.

Specificity Weights:

1. Inline Styles: 1000.
2. ID Selectors: 100.
3. Class, Attribute, Pseudo-Classes: 10.
4. Tag and Pseudo-Elements: 1.

Example:

• #id.class div → Weight = 100 (ID) + 10 (Class) + 1 (Tag) = 111.

Question 8: What is the difference between Reset.css and Normalize.css?

• Reset CSS: Removes all default styles.
• Normalize CSS: Standardizes styles across browsers without removing them.

Question 9: What is the difference between null and undefined?

• Undefined: A variable that hasn't been assigned a value.
• Null: Explicitly set by the developer to indicate no value.

Question 10: What is hoisting?

Hoisting moves variable and function declarations to the top of their scope. Variables declared with var and functions declared with function can be used before they are defined.

Question 11: What are the "AND" and "OR" operators (&& and ||)?

• AND (&&): Returns the first false value or the last true value.
• OR (||): Returns the first true value.

Both use short-circuiting to stop further evaluation once a condition is met.

Question 12: What types of timers are there in JavaScript?

1. setTimeout: Executes a function once after a delay.
2. setInterval: Repeatedly executes a function at specified intervals.

Stopping Timers:

• clearTimeout: Cancels setTimeout.
• clearInterval: Cancels setInterval.

Question 13: How to create a function to find the shortest word?

Example:

function FindShort(sentence) {
  return sentence.split(' ').sort((a, b) => a.length - b.length)[0];
}