Frontend Developer - Mock Interview 1

Frontend Developer Mock Interview Questions with Answers [HTML, CSS , JavaScript]

Today, I attended a mock interview for a Front-End Developer role. The interview mainly focused on HTML, CSS, and JavaScript. Below are some of the questions that were asked

1,What are Semantic Tags ?

Semantic tags are HTML tags that clearly describe the meaning and purpose of the content they contain. They make the structure of a web page easier for developers, browsers, and search engines to understand.

• – Defines the header section of a page.
• – Contains navigation links.
• – Represents the main content of the page.
• – Groups related content together.
• – Represents independent content such as a blog post or news article.
• – Contains side content related to the main content.
• – Defines the footer section of a page.

Benefits of Semantic Tags:

• Improve code readability and maintainability.
• Help search engines understand page content (SEO).
• Improve accessibility for screen readers and assistive technologies.
• Provide a clear structure to web pages

SEO

SEO (Search Engine Optimization) is the process of improving a website so that it ranks higher in search engine results like Google and attracts more organic (non-paid) traffic

Search engines can better understand the structure and content of a webpage when semantic tags are used

For example, an

tag tells search engines that the content is a standalone article or blog post, while a tag indicates navigation links.

Why is SEO Important?

• Increases website visibility.
• Brings more visitors to the website.
• Improves user experience.
• Helps businesses reach their target audience.

2, Flex vs Grid

display: flex;

Flexbox (Flexible Box Layout) is a one-dimensional layout system used to arrange items in a row or a column.

Why Use Flexbox?

Flexbox makes it easy to:

• Align items horizontally or vertically.
• Distribute space between items.
• Center elements.
• Create responsive navigation bars and card layouts.

Common Flexbox Properties

• flex-direction → Defines row or column layout.
• justify-content → Aligns items along the main axis.
• align-items → Aligns items along the cross axis.
• flex-wrap → Allows items to wrap to the next line.
• gap → Adds space between items.

Real-World Uses of Flex

• Navigation bars
• Button groups
• Centering content
• Card layouts

display: grid;

CSS Grid is a two-dimensional layout system used to arrange items in rows and columns.

Why Use Grid?

Grid makes it easy to:

• Create complex page layouts.
• Control rows and columns simultaneously.
• Build dashboards, galleries, and responsive web pages.

Common Grid Properties

• grid-template-columns → Defines columns.
• grid-template-rows → Defines rows.
• gap → Adds space between grid items.
• grid-column → Controls column span.
• grid-row → Controls row span.

Real-World Uses

• Full webpage layouts
• Admin dashboards
• Product galleries
• Magazine-style designs

3, display: none vs visibility: hidden
Both properties hide an element, but they behave differently.

1.** display: none**

When an element has display: none, it is completely removed from the page layout.

• The element is not visible.
• It does not occupy any space.
• Other elements move up and take its place.

1. visibility: hidden

When an element has visibility: hidden, it becomes invisible but still occupies space in the layout.

• The element is not visible.
• The space reserved for it remains.
• Other elements do not move

4, var, let , const

1. var

var was the original way to declare variables before ES6.

Characteristics

• Function-scoped
• Can be re-declared
• Can be re-assigned
• Hoisted and initialized with undefined

2*. let*

Introduced in ES6 to solve some problems with var.

Characteristics

• Block-scoped
• Cannot be re-declared in the same scope
• Can be re-assigned
• Hoisted but not initialized

3*. const*

Used for variables whose reference should not change.

Characteristics

• Block-scoped
• Cannot be re-declared
• Cannot be re-assigned
• Must be initialized when declared

The object's contents can change, but the variable cannot point to a different object.

4,JavaScript Scopes
A scope determines where a variable can be accessed in your code.

There are 3 main types of scope:

Key Point
Accessible only inside the block (if, for, while, etc.)

5, Primitive and Non-Primitive Data Types in JavaScript

1. Primitive Data Types

Primitive values store a single value and are immutable.

Types of Primitive Data Types

let num = 10; // Number
let name = "Vidhya"; // String
let isActive = true; // Boolean
let value = null; // Null
let data; // Undefined
let id = Symbol(); // Symbol
let bigNum = 123n; // BigInt

Stored In

• Stored directly by value.
• stored in stack memory.
• Immutable Nature

Once a primitive value is created, it cannot be changed. Operations create a new value instead.

1. Non-Primitive (Reference) Data Types

These store collections of data or more complex entities.

let arr = [1, 2, 3]; // Array
let obj = { name: "Vidhya" }; // Object
let fun = function() {}; // Function

Stored In

• The actual data is stored by reference.
• stored in heap memory.
• Mutable Nature

Objects and arrays can be modified after creation.

6,Type Casting in JavaScript

Type Casting (also called Type Conversion) is the process of converting a value from one data type to another data type.

For example:

String → Number
Number → String
Number → Boolean

Type Casting vs Type Coercion

Type Casting (Explicit Conversion)

You convert the type manually.

let num = Number("10");

Type Coercion (Implicit Conversion)

JavaScript converts the type automatically.

console.log("10" - 5); // 5

7,Ternary Operator in JavaScript

The Ternary Operator (? :) is a shorthand way of writing an if...else statement.

condition ? expressionIfTrue : expressionIfFalse;

• If the condition is true, the first expression executes.
• If the condition is false, the second expression executes.

Example :

let age = 18;

let result = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

console.log(result);

8,Objects in JavaScript

An Object is a non-primitive data type used to store data in key-value pairs.

Objects help group related data and functionality together.

Deleting Properties

delete person.age;

8,Array vs Objects

Arrays and Objects are not the same, but they are closely related.

Similarities

Both are:

• Non-primitive (reference) data types
• Mutable
• Stored by reference
• Technically objects in JavaScript

Example:
let arr = [1, 2, 3];
let obj = { name: "Vidhya" };

console.log(typeof arr); // object
console.log(typeof obj); // object

Array -An array is used to store ordered collections of values.Arrays are a special type of object in JavaScript.

Array → Index-Based Data
Object → Key-Value Data

Comments

[Saravanan Lakshmanan]

Useful