1. What is the css box model?

Css box model is the concept in css which defines how elements should be structured and positioned in a webpage. It contains various key components like border,margin, padding and content itself.

Here,

Content : The actual data in the text.

Padding: Padding is used to create the space around an element , inside any defined border.

Border : This component lies in between the outermost component like border and padding.

Margin : Margin is the outermost layer and is used to create a space around the element , around the border area.

2. What is Responsive Web Design?

This is a css technique which makes your webpage compatible with each and every device. Its goal is to ensure that a website should provide a good user experience whether it is viewed on desktop , tablet or mobile.

3. Which are the types of css?

Css stands for cascading stylesheet, it is a stylesheet language which gives styling to the webpage. It has 3 types: Inline css, Internal css ,External css.

Inline css : Inline css is written inline within the tag using style tag.
Internal css : Internal css is written within the style tag in the head of html.
External css : External css is written by creating the separate file and linking it to the html file.

4. What is css flexbox?

Flexbox, or the Flexible Box Layout, is a CSS layout model designed to help distribute space and align items within a container, making it easier to design responsive layouts.

5. What is the Bootstrap grid system? Explain it.

The Bootstrap Grid System is a responsive layout system that uses a series of containers, rows, and columns to structure and align content in a flexible, grid-based format. It is built on a 12-column layout and adapts to different screen sizes using predefined breakpoints, making it easier to create responsive designs.

6.What is the use of an iframe tag?

The `<iframe>` tag is used to embed an external webpage or content, such as videos or maps, within your current HTML document. It allows you to display a specified URL inside a frame, providing a way to incorporate third-party content seamlessly into your site.

7. What is Doctype declaration?

The `<!DOCTYPE>` declaration tells the browser what version of HTML the document is using. It ensures that the page is displayed correctly and consistently across different browsers. In HTML5, it is written as `<!DOCTYPE html>` and is placed at the very top of the HTML document.

8 . What is Responsive Web Designing ?

Responsive Web Design is a web development approach that creates websites that automatically adjust and look good on all devices and screen sizes, from mobile phones to desktops, ensuring an optimal user experience.

9. What are data types in javascript?

In JavaScript, data types represent different kinds of values that you can work with in your code. Data types in javascript , divided into two main categories: primitive and non-primitive.

Primitive Data Types:

Number:

Represents both integers and floating-point numbers.

let age = 25 ;

let price = 19.99 ;

String: Represents a sequence of characters enclosed in single quotes, double quotes.

let name = “Alice” ;

let greeting = ‘Hello, World!’ ;

Boolean : Represents a logical value that can either be `true` or `false`.

let isActive = true ;

let hasAccess = false ;

Undefined : Represents a variable that has been declared but not assigned a value.

let notAssigned ;

console.log(notAssigned) ;

Null : Represents the intentional absence of any object value. It is often used to signify “no value”.

let emptyValue = null ;

Non-Primitive (Reference) Data Types:

Object: Used to store collections of data and more complex entities. Objects can contain properties and methods.

let person = {

name: ‘John’,

age: 30,

greet: function() {

console.log(‘Hello’) ;

}

};

Array: A special type of object used to store ordered lists of values.

let fruits = [‘apple’, ‘banana’, ‘cherry’] ;

Function : A reusable block of code that performs a specific task. Functions themselves are objects in JavaScript.

function greet() {

console.log(‘Hello, World!’) ;

}

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

var is function-scoped and can be redeclared and updated.

let is block-scoped and can be updated but not redeclared within the same scope.

const is block-scoped, cannot be updated or redeclared, and must be initialized during declaration.

11. What is the event loop in JavaScript?

The event loop is a mechanism in JavaScript that handles asynchronous operations. It allows JavaScript to perform non-blocking operations, despite being single-threaded. The event loop continuously checks the message queue and executes any pending callbacks.

12. What is a Promise? How does it work?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: Operation completed successfully.
Rejected: Operation failed.

13.What is the difference between null and undefined?

undefined means a variable has been declared but not assigned a value.

null is an assignment value representing no value or an empty object.

let a;

console.log(a); // undefined

let b = null;

console.log(b); // null

14. What is jQuery?

jQuery is a fast and easy-to-use JavaScript library that simplifies HTML document manipulation, event handling, and animations, making web development quicker and easier.

15. How do you select elements by class, id, and attribute using jQuery?

By ID: $(‘#elementId’)

By Class: $(‘.elementClass’)

By Attribute: $(‘[attributeName=”value”]’)

16. What is $(document).ready(function()) in jQuery, and why is it used?

`$(document).ready(function())` is a jQuery function that ensures the DOM is fully loaded before running any code. It prevents errors by making sure all elements are available for manipulation before the script executes.

17. What is React?

React is a JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and manage the view layer in web and mobile applications.

18. What are props in React?

Props are a way to pass data from one component to another in React. Props are read-only and help components stay reusable and configurable.

const Greeting = (props) => {

return <h1>Hello, {props.name}!

</h1>; };

19. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML-like code directly inside JavaScript . It represents using the curly brackets.

20. What are controlled and uncontrolled components in React?

Controlled components have their form data controlled by the state in React. The state determines the input’s value, and any changes are handled through event handlers.

Uncontrolled components rely on the DOM to handle form data, and refs are typically used to access the values.

// Controlled Component

const MyForm = () => {

const [value, setValue] = useState(”);

const handleChange = (e) => setValue(e.target.value);

return <input value={value} onChange={handleChange} />;

};

For more information & classes Call: 2048553004
Registration Link: Click Here!

Author: Pranjali Mendhe

Web Development Trainer

IT Education Centre Placement & Training Institute

Front End Development Interview Questions And Answers