Scribd
Upload
162 views15 pages

Vision Waves

Ts

Uploaded by

sarthakjain1112
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
162 views15 pages

Vision Waves

Ts

Uploaded by

sarthakjain1112
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML (30 Questions)

1. What is HTML?
o HTML (HyperText Markup Language) is the standard language used to create
web pages. It provides the structure and content of a webpage, such as headings,
paragraphs, images, links, etc.
2. What is the purpose of the <!DOCTYPE html> declaration?
o It tells the browser that the document is an HTML5 document. It helps the
browser render the page correctly.
3. What are the basic structure elements of an HTML document?
o <html>, <head>, and <body>. The <html> element is the root, <head> contains
metadata like title, and <body> contains the visible content.
4. What is the difference between an id and a class in HTML?
o id is unique and used for one element, while class can be used for multiple
elements.
5. What is a semantic element in HTML? Give examples.
o Semantic elements provide meaning to the content. Examples: <header>,
<footer>, <article>, <section>.
6. What are attributes in HTML?
o Attributes provide additional information about an element, like src for images or
href for links.
7. What is the use of the <meta> tag in HTML?
o It provides metadata like character set, author, or description of the page, and
helps with SEO.
8. What is the difference between block-level and inline elements?
o Block-level elements take up the full width and start on a new line, e.g., <div>.
Inline elements take only as much width as necessary, e.g., <span>.
9. What is an anchor tag in HTML?
o The <a> tag is used to create hyperlinks. Example: <a
href="https://www.example.com">Click Here</a>.
10. What is the purpose of the <form> element?
o It is used to collect user input, such as text, checkboxes, or radio buttons.
11. What are input types in HTML forms? Name a few.
o Input types specify the type of data to be entered. Examples: text, password,
email, checkbox, radio.
12. How do you create a hyperlink in HTML?
o Use the <a> tag: <a href="https://www.example.com">Visit Example</a>.
13. What is the <head> tag used for?
o The <head> tag contains metadata like the title, styles, and scripts, not visible on
the page.
14. What are tables used for in HTML?
o Tables are used to display tabular data. They are created with <table>, <tr>,
<td>, and <th> tags.
15. How do you add an image in HTML?
o Use the <img> tag with a src attribute: <img src="image.jpg"
alt="description">.
16. What is the <title> tag used for?
o The <title> tag sets the title of the webpage, displayed in the browser tab.
17. What is the difference between <div> and <span>?
o <div> is a block-level element, while <span> is an inline element.
18. What are the types of lists in HTML?
o There are three types: ordered (<ol>), unordered (<ul>), and description (<dl>).
19. What is the role of the alt attribute in images?
o The alt attribute provides alternative text when the image cannot be displayed.
20. What are iframes and how are they used in HTML?
o <iframe> is used to embed another HTML document within the current
document.
21. What is the difference between the <link> and <script> tags?
o <link> is used to link external resources like CSS files, while <script> is used
to link or embed JavaScript.
22. How do you create a dropdown menu in HTML?
o Use the <select> element with <option> elements:

html
Copy code
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

23. What is the action attribute in the <form> tag?


o The action attribute specifies where to send the form data when the form is
submitted.
24. How do you add a comment in HTML?
o HTML comments are added using <!-- comment -->.
25. What is the difference between <strong> and <b>?
o <strong> indicates strong importance (semantics), while <b> is just bold text
with no semantic meaning.
26. How do you embed a video in HTML?
o Use the <video> tag:

html
Copy code
<video controls>
<source src="video.mp4" type="video/mp4">
</video>

27. What is the <section> tag used for in HTML5?


o The <section> tag represents a thematic grouping of content.
28. How can you create a table with HTML?
o Use <table>, <tr>, <td>, and <th> tags:

html
Copy code
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>

29. What are the HTML5 new features?


o New elements like <article>, <section>, <footer>, and <nav>, as well as
APIs like Geolocation and Web Storage.
30. How do you make a form field required in HTML?
o Use the required attribute:

html
Copy code
<input type="text" required>

CSS (35 Questions)

1. What is CSS?
o CSS (Cascading Style Sheets) is used to style and layout web pages, including
colors, fonts, and positioning.
2. What are selectors in CSS?
o Selectors are patterns used to select and apply styles to HTML elements.
Examples: .class, #id, element.
3. What is the difference between class and id selectors?
o class is reusable (used for multiple elements), while id is unique (used for one
element).
4. What is the box model in CSS?
o The box model consists of content, padding, border, and margin, which determine
the size of an element.
5. How do you apply CSS to an HTML element?
o You can apply CSS via inline styles, internal style sheets, or external CSS files.
6. What is the z-index in CSS?
o z-index controls the stacking order of elements. Higher values are displayed on
top.
7. What are pseudo-classes in CSS? Give examples.
o Pseudo-classes style elements based on their state, such as :hover, :focus,
:nth-child().
8. What are pseudo-elements in CSS? Give examples.
o Pseudo-elements style parts of an element, such as ::before, ::after, and
::first-letter.
9. What is the display property in CSS?
o The display property controls how elements are displayed (e.g., block, inline,
flex).
10. What is the difference between visibility and display in CSS?
o visibility: hidden hides an element but it still takes up space, while
display: none removes the element from the layout.
11. How do you center a div element horizontally and vertically?
o Use Flexbox or Grid. Example with Flexbox:

css
Copy code
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

12. What is the position property in CSS?


o The position property controls the positioning method for an element (e.g.,
static, relative, absolute).
13. What is the difference between relative, absolute, fixed, and sticky positioning?
o relative: positions relative to its normal position.
o absolute: positions relative to the nearest positioned ancestor.
o fixed: positions relative to the viewport.
o sticky: behaves like relative until it crosses a defined threshold, then becomes
fixed.
14. How do you apply a background image in CSS?
o Use the background-image property:

css
Copy code
body {
background-image: url('image.jpg');
}

15. What is the difference between padding and margin in CSS?


o Padding is the space inside an element, between the content and the border, while
margin is the space outside the border, separating the element from others.
16. What are media queries in CSS?
o Media queries allow you to apply styles based on device characteristics like
screen width, for responsive design.
17. How do you create a responsive web design in CSS?
o Use media queries to adjust styles for different screen sizes.
18. What is the purpose of the float property in CSS?
o The float property is used to place elements next to each other, often used in
image positioning or layouts.
19. How can you clear floats in CSS?
o Use clear: both to prevent elements from wrapping around floated elements.
20. What is Flexbox in CSS?
o Flexbox is a layout model that allows you to create responsive, flexible layouts
with alignment and distribution of space.
21. What is the justify-content property in Flexbox?
o It defines the alignment of items along the main axis, e.g., center, space-
between.
22. What is the difference between inline and block elements in CSS?
o Inline elements do not start on a new line and only take up as much width as
necessary, while block elements start on a new line and take up the full width
available.
23. What is the font-family property in CSS?
o It sets the font for text within an element, e.g., font-family: Arial, sans-
serif;.
24. How do you change the color of text in CSS?
o Use the color property: color: blue;.
25. What is the opacity property in CSS?
o The opacity property makes an element transparent, where 1 is fully opaque and
0 is fully transparent.
26. What is the purpose of the @import rule in CSS?
o It allows you to import other CSS files into the current stylesheet.
27. What is the border-radius property in CSS?
o It rounds the corners of an element’s border.
28. How do you create a gradient background in CSS?
o Use background-image: linear-gradient() or background-image:
radial-gradient().
29. What is the box-shadow property in CSS?
o It adds a shadow effect to elements.
30. How do you apply a style to all the elements on a page?
o Use the universal selector *:

css
Copy code
* {
color: black;
}

31. What is a CSS reset?


o A CSS reset normalizes or removes default browser styles to create a clean slate
for styling.
32. How do you add custom fonts in CSS?
o Use the @font-face rule or Google Fonts:

css
Copy code
@font-face {
font-family: 'MyFont';
src: url('myfont.ttf');
}
33. What are transitions in CSS?
o Transitions allow changes to occur over a specific duration, such as changing
color on hover.
34. What is the difference between transition and animation in CSS?
o Transitions occur when an element changes state (e.g., hover), while animations
are continuous or triggered by a specific event.
35. How can you make text bold in CSS?
o Use the font-weight property: font-weight: bold;.

JavaScript (35 Questions)

1. What is JavaScript?
o JavaScript is a programming language used to make web pages interactive by
manipulating the DOM.
2. What is the difference between var, let, and const?
o var is function-scoped and can be redeclared. let is block-scoped and can be
reassigned. const is block-scoped and cannot be reassigned.
3. What is a JavaScript function?
o A function is a reusable block of code that performs a specific task.
4. How do you declare a variable in JavaScript?
o Use var, let, or const:

javascript
Copy code
let x = 5;

5. What are JavaScript data types?


o Primitive types: number, string, boolean, null, undefined, symbol. Objects:
object, array, function.
6. What is the undefined data type in JavaScript?
o undefined is the default value assigned to a variable that has not been initialized.
7. What is the difference between null and undefined in JavaScript?
o null is an assignment value representing no value, while undefined is a variable
that has been declared but not assigned a value.
8. What are objects in JavaScript?
o Objects are collections of key-value pairs, where keys are properties and values
are associated data.
9. How do you create an array in JavaScript?
o Use square brackets:

javascript
Copy code
let fruits = ['apple', 'banana'];

10. What is the for loop in JavaScript?


o The for loop is used to iterate over a block of code a set number of times:

javascript
Copy code
for (let i = 0; i < 5; i++) {
console.log(i);
}

11. What is a callback function in JavaScript?


o A callback function is passed as an argument to another function and executed
later.
12. What is the difference between == and === in JavaScript?
o == compares values with type coercion, while === compares values and types.
13. What is a JavaScript object method?
o A method is a function that is a property of an object.

javascript
Copy code
let person = {
name: 'John',
greet: function() { console.log('Hello!'); }
};

14. What are arrow functions in JavaScript?


o Arrow functions are a shorthand way to write functions:

javascript
Copy code
const sum = (a, b) => a + b;

15. What is a closure in JavaScript?


o A closure is a function that has access to its own scope, the outer function's
variables, and global variables.

javascript
Copy code
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
}
}
const counter = outer();
counter(); // 1

16. What is the this keyword in JavaScript?


o this refers to the context in which a function is called.
17. What are promises in JavaScript?
o Promises represent the eventual completion (or failure) of an asynchronous
operation.
18. How do you handle errors in JavaScript?
o Use try...catch blocks to catch and handle errors.

javascript
Copy code
try {
let x = 1 / 0;
} catch (error) {
console.error(error);
}

19. What is an event in JavaScript?


o An event is an occurrence that can be handled by JavaScript, like a click, hover,
or keypress.
20. What is the difference between event bubbling and event capturing?
o Event bubbling means the event starts from the target element and bubbles up to
the root. Capturing starts from the root and goes down to the target element.
21. How do you manipulate the DOM with JavaScript?
o Use methods like getElementById(), querySelector(), innerHTML,
appendChild(), etc.
22. What is the querySelector() method in JavaScript?
o querySelector() selects the first element that matches a CSS selector.

javascript
Copy code
const element = document.querySelector('.my-class');

23. What is the purpose of localStorage in JavaScript?


o localStorage allows you to store data in the browser that persists even after the
page is reloaded.
24. How do you add a script to an HTML page in JavaScript?
o Use the <script> tag:

html
Copy code
<script src="script.js"></script>

25. What is the setTimeout() method in JavaScript?


o setTimeout() delays the execution of a function for a specified number of
milliseconds.
26. What is the setInterval() method in JavaScript?
o setInterval() repeatedly executes a function at specified intervals.

24. What is the difference between localStorage and sessionStorage?


 localStorage stores data with no expiration time, while sessionStorage stores data
that is cleared when the browser session ends.

25. How do you add an event listener in JavaScript?

 Use the addEventListener method:

javascript
Copy code
element.addEventListener('click', function() {
console.log('Element clicked!');
});

26. What is the difference between setTimeout and setInterval?

 setTimeout executes a function once after a specified delay, while setInterval


repeatedly executes a function at specified intervals.

27. What is JSON? How is it used in JavaScript?

 JSON (JavaScript Object Notation) is a lightweight data format. Use JSON.stringify()


to convert objects to strings and JSON.parse() to parse strings into objects.

28. What is the difference between synchronous and asynchronous JavaScript?

 Synchronous operations block execution until they complete, while asynchronous


operations allow the program to continue running while waiting for a task to complete.

29. What is the Fetch API in JavaScript?

 The Fetch API is used to make network requests and handle responses:

javascript
Copy code
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));

30. What is the difference between forEach and map in JavaScript?

 forEach iterates over an array but does not return a new array. map iterates and returns a
new array with modified elements.

31. What are JavaScript modules?

 JavaScript modules allow you to split code into reusable pieces using export and
import.
32. What is destructuring in JavaScript?

 Destructuring allows you to extract values from arrays or objects:

javascript
Copy code
const [a, b] = [1, 2];
const {name, age} = {name: 'John', age: 30};

33. What are template literals in JavaScript?

 Template literals are strings that allow embedded expressions:

javascript
Copy code
const greeting = `Hello, ${name}!`;

34. What is the difference between call, apply, and bind in JavaScript?

 call: invokes a function with arguments passed individually.


 apply: invokes a function with arguments passed as an array.
 bind: returns a new function with a specific this context.

35. What is the Event Loop in JavaScript?

 The Event Loop is responsible for executing code, handling events, and managing
asynchronous tasks by checking the call stack and task queue.

Here are some of the most commonly asked JavaScript interview questions:

1. What is JavaScript hoisting?

 Hoisting is JavaScript's default behavior of moving declarations to the top of the current
scope (function or global). Variable and function declarations are hoisted, but only the
declarations (not the initializations) are moved.

Example:

javascript
Copy code
console.log(x); // undefined
var x = 5;
console.log(x); // 5

2. What are closures in JavaScript?

 A closure is a function that "remembers" its lexical scope even when the function is
executed outside that scope. Example:
javascript
Copy code
function outer() {
let x = 10;
return function inner() {
console.log(x);
};
}
const closureFunc = outer();
closureFunc(); // 10

3. What is the this keyword in JavaScript?

 The this keyword refers to the context (object) in which the function is called. The value
of this is determined by how a function is invoked.

Example:

javascript
Copy code
const person = {
name: 'John',
greet: function() {
console.log(this.name);
}
};
person.greet(); // 'John'

4. What are promises in JavaScript?

 A promise is an object that represents the eventual completion (or failure) of an


asynchronous operation. Example:

javascript
Copy code
let promise = new Promise(function(resolve, reject) {
let success = true;
if (success) {
resolve("Operation was successful");
} else {
reject("Operation failed");
}
});
promise.then(function(result) {
console.log(result); // "Operation was successful"
}).catch(function(error) {
console.log(error); // "Operation failed"
});

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


 ==performs type coercion (converts the operands to the same type before comparison),
while === checks for strict equality (no type conversion). Example:

javascript
Copy code
5 == '5'; // true
5 === '5'; // false

6. What is the bind method in JavaScript?

 The bind() method creates a new function that, when called, has its this keyword set to
a specific value, and prepends any arguments to the function call. Example:

javascript
Copy code
const obj = {name: 'John'};
function greet() {
console.log(this.name);
}
const greetBound = greet.bind(obj);
greetBound(); // 'John'

7. What is event delegation in JavaScript?

 Event delegation is a technique of using a single event listener on a parent element to


manage events for child elements. This avoids adding event listeners to multiple child
elements, making it more efficient.

Example:

javascript
Copy code
document.getElementById('parent').addEventListener('click', function(e) {
if (e.target && e.target.matches('button.classname')) {
console.log('Button clicked');
}
});

8. What is the difference between null and undefined?

 null is an intentional absence of value or "nothing". undefined means a variable has


been declared but not assigned a value.

Example:

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

9. What are the various data types in JavaScript?

 JavaScript has seven primitive data types:


o String
o Number
o Boolean
o Undefined
o Null
o Symbol (new in ES6)
o BigInt (new in ES11)

Example:

javascript
Copy code
let name = "John"; // String
let age = 30; // Number
let isActive = true; // Boolean
let obj = null; // Null

10. What is the typeof operator in JavaScript?

 The typeof operator returns a string indicating the type of the unevaluated operand.

Example:

javascript
Copy code
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof {a: 1}); // "object"

11. What is the spread operator in JavaScript?

 The spread operator (...) is used to expand or spread the elements of an iterable (array,
object) into individual elements or properties.

Example:

javascript
Copy code
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

12. What are arrow functions in JavaScript?

 Arrow functions are a more concise way of writing functions in JavaScript, and they do
not have their own this context.

Example:

javascript
Copy code
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

13. What is the difference between synchronous and asynchronous code?

 Synchronous code is executed sequentially, blocking the execution of other code until it
finishes. Asynchronous code allows the program to continue executing other tasks while
waiting for a task to finish.

Example:

javascript
Copy code
console.log("Start");

// Synchronous
for (let i = 0; i < 3; i++) {
console.log(i);
}

console.log("End");

14. What is the setTimeout() function in JavaScript?

 The setTimeout() function allows you to execute code after a certain amount of time.

Example:

javascript
Copy code
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);

15. What is the difference between apply() and call() methods in JavaScript?
 Both call() and apply() are used to invoke functions, but apply() takes an array of
arguments while call() takes individual arguments.

Example:

javascript
Copy code
function greet(message, name) {
console.log(`${message}, ${name}`);
}

greet.call(null, "Hello", "John"); // Hello, John


greet.apply(null, ["Hello", "John"]); // Hello, John

You might also like