1 of 122

HTML QA

What is HTML?

HTML stands for Hyper Text Markup Language,

it creates web pages, and gives structure to our document.

Ans:

2 of 122

HTML QA

What is Structure and how you create?

The structure is organizing output as document.

The document in HTML is structured with set of ‘tags’ like html, head , title and body tags.

Ans:

5 of 122

HTML Q&A

What is Element and Types ?

An “element” is a fundamental building block used to define the structure and content of a webpage. Each HTML element consists of an opening and closing tag.

Ans:

There are many types of elements ex. div element, form, table element etc..,

Type of element depends on the tags used to create element.

6 of 122

HTML Q&A

What is Parent Element and Empty Element ?

Parent Element: A parent element is like a container that holds elements inside

Ans:

Empty Element: An empty element does not need closing tags. Ex:- img tag, input tag.

7 of 122

HTML Q&A

What is Attribute and its Types ?

Attribute: An attribute provides additional information to an element and It’s always written inside the opening tag of the element

Ans:

Types: There are many types of attributes, ex: id, class, style, src, href, etc…

8 of 122

HTML Q&A

What is the difference between ‘id’ and ‘class’ attribute ?

‘id’ is used to uniquely identify a single element, while ‘class’ is used to group together multiple elements.

Ans:

9 of 122

HTML Q&A

How to create a table ?

A table can be created using ‘table’ tag, each row of the table is represented by ‘tr’ element, within each row ‘th’ elements is used to define table headers and ‘td’ elements are used to define table cells.

Ans:

10 of 122

HTML Q&A

How to Embed videos in webpage ?

The ‘video’ element is used to embed a video into the webpage.

The source element specifies the video file to be played and its type.

Ans:

To embed a external video we use ‘iframe’ element with the ‘src’ attribute to set video url.

11 of 122

HTML Q&A

What are Semantic Elements?

Semantic elements provide meaningful structure like ‘header, nav, section, article, aside, footer’.

Ans:

13 of 122

HTML Q&A

What are Input Elements & Types?

14 of 122

HTML Q&A

What are Input Elements & Types?

Inputs are elements that allows users to input data into a webpage. Inputs are typically used within forms to collect information from users.

Ans:

15 of 122

HTML Q&A

What are Input Elements & Types?

17 of 122

HTML Q&A

What attribute you use to upload image in ‘Form’

20 of 122

HTML Q&A

What attribute you use to upload image in ‘Form’

The attribute used in form element to upload image is ‘encytpe’ which is encoding type, and the value for this attribute to handle file uploads is ‘multipart/form-data’.

Ans:

21 of 122

CSS Q&A

Q. What is CSS and how to add CSS to document?

Ans.

CSS stands for Cascading Style sheets. It’s a style sheet language used for describing the presentation of a document written in HTML.

22 of 122

CSS Q&A

Types of CSS

Inline CSS

External CSS

Internal CSS

23 of 122

CSS Q&A

Q. What are Selectors and Types?

Ans.

Selectors in css are the identifiers of an element, by which we can target element or elements individually or combinedly to apply styling

24 of 122

CSS Q&A

Element Selector

Types of Selectors

Class Selector

ID Selector

Descendant Selector

Child Selector

Attribute Selector

25 of 122

CSS Q&A

Element Selector

26 of 122

CSS Q&A

ID Selector

27 of 122

CSS Q&A

Class Selector

28 of 122

CSS Q&A

Descendant Selector

29 of 122

CSS Q&A

Child Selector

30 of 122

CSS Q&A

Attribute Selector

31 of 122

CSS Q&A

Q. What are Units and Types?

ans.

In CSS, units are used to specify measurements for various css properties such as length, width, height, margin, padding, font-size, etc.

32 of 122

CSS Q&A

Percentage (%)

Types of Units

Viewport Width (vw)

Pixel (px)

rem

Viewport height (vh)

33 of 122

CSS Q&A

Percentage (%)

units

34 of 122

CSS Q&A

Pixels (px)

units

35 of 122

CSS Q&A

view port width (vw)

units

36 of 122

CSS Q&A

view port height (vh)

units

37 of 122

CSS Q&A

rem

units

38 of 122

CSS Q&A

units

39 of 122

CSS Q&A

Q. What is Box Model?

ans.

The CSS box model describes the structure of an HTML element like content, padding, border and margin.

40 of 122

CSS Q&A

Box Model

41 of 122

CSS Q&A

Box Model

42 of 122

CSS Q&A

Q. What are Text properties?

ans.

The text properties are used to control the appearance and behavior of text in elements such as “font-size, font-weight, font-family, text-alignment” and so on.

43 of 122

CSS Q&A

List of Text properties

font-family

font-size

font-weight

word-spacing

text-transform

white-spacing

text-align

text-decoration

letter-spacing

44 of 122

CSS Q&A

font-family

Text properties

45 of 122

CSS Q&A

font-weight & font-size

Text properties

46 of 122

CSS Q&A

Q. What is Display & Types?

ans.

The “display” property is used to control the layout behavior of an element. It specifies how elements are shown in the document.

47 of 122

CSS Q&A

List of Display properties

block

inline

Inline-block

none

flex

grid

48 of 122

CSS Q&A

display: block & display: inline

Display properties

49 of 122

CSS Q&A

display: inline-block

Display properties

50 of 122

CSS Q&A

display: flex

Display properties

https://flexboxfroggy.com/

51 of 122

CSS Q&A

display: grid

Display properties

https://cssgridgarden.com/

52 of 122

CSS Q&A

Q. What are Positions & Types?

ans.

The “position” property determines the position of an element depending on parent element or document based on value we define.

53 of 122

CSS Q&A

position: static

Position

54 of 122

CSS Q&A

position: static

Position

55 of 122

CSS Q&A

List of Position properties

static

relative

absolute

fixed

sticky

56 of 122

CSS Q&A

position: relative

Position

57 of 122

CSS Q&A

position: absolute

Position

58 of 122

CSS Q&A

position: fixed

Position

59 of 122

CSS Q&A

position: sticky

Position

60 of 122

CSS Q&A

Q. What is inheritance?

ans.

Inheritance in css is acquiring some properties from parent element.

Ex. Font-family, font-size,font-weight, color, text-align

Note: not all properties can be inherited.

Ex. Margin, padding, border and background.

61 of 122

CSS Q&A

Q. What is pseudo-classes?

ans.

Pseudo classes targets with specific conditions related to user interaction.

Note: pseudo classes are identified by “:"

62 of 122

CSS Q&A

Pseudo classes

:hover

:active

:focus

:visited

:first-child

:nth-child(n)

:checked

:disabled

:last-child

https://web.dev/learn/css/pseudo-classes

63 of 122

CSS Q&A

Q. What is pseudo-elements?

ans.

Pseudo elements are special keywords that allow to style certain parts of the elements without adding any ids or classes.

Note: pseudo elements are written with “::"

64 of 122

CSS Q&A

Pseudo elements

::before

::after

::first-letter

65 of 122

CSS Q&A

Q. What is responsiveness & breakpoints?

ans.

The responsiveness is to design layout of the document to fit according to the screen size of the device and style for presentation.

66 of 122

CSS Q&A

Responsiveness

67 of 122

CSS Q&A

Responsive Media queries with break-points

68 of 122

CSS Q&A

Q. What is Animation & How to Animate?

ans.

In css, animation is to add motion or movement to elements on a webpage.

69 of 122

CSS Q&A

How to Animate?

https://web.dev/learn/css/animations

70 of 122

JAVASCRIPT Q&A

What is JavaScript?

Ans.

JavaScript is a high-level programming language mainly used for creating interactive and dynamic content on web pages. It runs in the user's browser and can handle things like animations, form validation, and responding to user interactions like clicks or keystrokes. JavaScript can also be used on the server side with technologies like Node.js to build full-stack web applications. It's known for its ability to create rich user experiences and manage asynchronous tasks, like making network requests.

71 of 122

JAVASCRIPT Q&A

What are Variables & Types?

Ans.

Variables are like containers to store different types of data that can be referenced and manipulated throughout the code.

There are 3 types of variables

var

let

const

72 of 122

JAVASCRIPT Q&A

Difference between var, let & const?

73 of 122

JAVASCRIPT Q&A

Difference between var, let & const?

74 of 122

JAVASCRIPT Q&A

Difference between var, let & const?

const

75 of 122

JAVASCRIPT Q&A

What are Operators?

Ans.

Athematic Operators “+, -, *, /, %,

Assignment Operators “=, !, ===, !==, <, <=, >, >= “

Logical Operators “&&, ||, !”

Increment and Decrement Operators “++, --, ”

Comparison Operators “=, !, ===, !==, <, <=, >, >= “

Conditional or Ternary Operator “?” true : false

76 of 122

JAVASCRIPT Q&A

What are Data Types?

Ans.

�In JavaScript, data types defines the kind of data that variable can hold. There are two main categories of data types: primitive and non-primitive (or reference) data types.

Primitive Data Types

Number
String
Boolean
Null
Undefined

Non-Primitive Data Types

Object
Array
Function
Date

77 of 122

JAVASCRIPT Q&A

What are Functions?

Ans.

In JavaScript, functions are reusable blocks of code that perform a specific task. Functions can take inputs as parameters, process them, and return an output.

Functions help make code more easier to understand, maintain and test.

78 of 122

JAVASCRIPT Q&A

What is Anonymous Functions?

Ans.

An anonymous function in JavaScript is a function that does not have a name. It is defined without a name and is usually assigned to a variable, or passed as an argument.

79 of 122

JAVASCRIPT Q&A

What is Return Function?

Ans.

A return function is a function that includes ‘return’ statement and provides a value back to the calling code when it is executed.

The return keyword specifies the value that should be returned and

No code after ‘return’ statement would be executed because the function execution ends immediately as soon as the ‘return’ statement is reached.

Return Keyword

80 of 122

JAVASCRIPT Q&A

What are First-Class Citizens?

Ans.

In JavaScript, functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

81 of 122

JAVASCRIPT Q&A

What are Logs?

Ans.

Logs in JavaScript are outputs from the execution of a program that provide information about what is happening during the program's runtime.

82 of 122

JAVASCRIPT Q&A

How to Debug code?

Ans.

console.log is the basic debugging tool to debug code in JavaScript.

We can print variable values, function outputs, and messages to the console to track the execution of our program and understand what’s happening.

83 of 122

JAVASCRIPT Q&A

Difference between Parameters & Arguments?

Ans.

Parameter:

The parameters are the variable passed in function parenthesis as placeholders of a function’s definition.

Argument:

The arguments are the values that are passed into the functions when they are called.

Parameters

Arguments

84 of 122

JAVASCRIPT Q&A

What is Function Expression?

Ans.

A function expression is a way to define a function and assign it to a variable. The function can then be called by invoking the variable followed by parentheses.

85 of 122

JAVASCRIPT Q&A

What are Scopes and Types?

Ans.

The scopes are the context of making variables or functions available to access for coding in different parts of our program.

Types:

Global Scope
Local Scope
Block Scope

86 of 122

JAVASCRIPT Q&A

Global Scope

87 of 122

JAVASCRIPT Q&A

Local Scope

88 of 122

JAVASCRIPT Q&A

Block Scope

89 of 122

JAVASCRIPT Q&A

What is Hoisting?

Ans.

In JavaScript, hoisting is a behavior where variable and function declarations are moved to the top of their containing scope (either the global scope or function scope) during the compilation phase. This means that you can use variables and functions before they are actually declared in the code.

90 of 122

JAVASCRIPT Q&A

What are the Phases of runtime ?

Ans.

While execution of JavaScript code, there are several phases that occur during the runtime of a JavaScript program

The JavaScript engine reads the script and parses it into an Abstract Syntax Tree (AST). This involves breaking down the code into tokens and analyzing its structure.

Parsing

The code is compiled into bytecode or machine code for faster execution. This is done by the JavaScript engine's compiler.

Compilation

The JavaScript engine (V8) executes the compiled code.

During execution, the engine uses execution contexts and scope chains to manage variables and functions.

Execution

91 of 122

JAVASCRIPT Q&A

How JS works?

92 of 122

JAVASCRIPT Q&A

What is Lexical Scope?

Ans.

Lexical scope is a concept determined during the compilation phase and is based on where variables and functions are defined in the code, rather than where they are used.

93 of 122

JAVASCRIPT Q&A

What is Call Stack?

Ans.

The call stack keeps track of the functions being executed in the program. When a function is called, a new frame is added to the call stack, and when a function completes, the frame is popped off the stack.

94 of 122

JAVASCRIPT Q&A

https://www.jsv9000.app/

Call stack

95 of 122

JAVASCRIPT Q&A

What is Immediately Invoked Function (IIFE)?

Ans.

�It is a function that is defined and immediately executed as soon as it is declared. An IIFE is typically used to create a new scope for variables.

96 of 122

JAVASCRIPT Q&A

What is Memory Heap?

Ans.

The memory heap is a part of the memory that stores objects and data structures.

(JavaScript has an automatic memory management system called a “garbage collector” that automatically allocates memory when objects are created and releases memory when objects are no longer needed.)

�

97 of 122

JAVASCRIPT Q&A

What are Conditional Statements & Types?

Ans.

conditional statements allow us to execute different blocks of code based on whether a certain condition is true or false. This allows to make decisions in our code and control the flow of execution.

Types:

�

if statement

if-else statement

else if statement

switch statement

Ternary Operator

98 of 122

JAVASCRIPT Q&A

Conditional statements

if statement

if-else statement

else if statement

99 of 122

JAVASCRIPT Q&A

Conditional statements

switch statement

100 of 122

JAVASCRIPT Q&A

Conditional statements

Ternary Operator

101 of 122

JAVASCRIPT Q&A

What are Loops & Types?

Ans.

Loops in JavaScript are control structures that allow to execute a block of code repeatedly based on a specified condition. Loops are useful for automating repetitive tasks and processing collections of data.

Types:

�

‘for’ Loop

‘while’ Loop

‘do…while’ Loop

‘for…in’ Loop

‘for…of’ Loop

102 of 122

JAVASCRIPT Q&A

Loop statements

‘for’ Loop

‘while’ Loop

‘do…while’ Loop

103 of 122

JAVASCRIPT Q&A

Loop statements

‘for…in’ Loop

The for...in loop iterates over the enumerable properties (keys) of an object.

104 of 122

JAVASCRIPT Q&A

Loop statements

‘for…of’ Loop

The for...of loop iterates over the values of iterable objects such as arrays, strings, etc…

105 of 122

JAVASCRIPT Q&A

What are Methods & Types?

Ans.

A method is a function, and a function can also be a property of an object. Methods allow objects to perform specific actions or manipulate their data.

�

String Methods

Array Methods

Object Methods

Types

106 of 122

JAVASCRIPT Q&A

https://www.w3schools.com/js/js_string_methods.asp

107 of 122

JAVASCRIPT Q&A

https://www.w3schools.com/js/js_array_methods.asp

108 of 122

JAVASCRIPT Q&A

Object Methods

Ans.

Objects are collections of key-value pairs. An object method is a function that is a property of an object and can be called on that object to perform a specific task. Object methods allow to define behavior for objects and interact with their properties.�

https://www.w3schools.com/js/js_object_methods.asp

109 of 122

JAVASCRIPT Q&A

What are Higher Order functions?

Ans.

Higher order function is a function that takes one or more functions as parameters and/or return a function as a result. Ex. map(), sort(), filter(), reduce(), etc….

�

110 of 122

JAVASCRIPT Q&A

What is DOM?

Ans.

DOM, stands for Document Object Model, it represents the structure of an HTML document as a tree of objects. The DOM provides a way for JavaScript to interact with the elements of a webpage, allowing to manipulate the content, structure and style of a document dynamically.

�

111 of 122

JAVASCRIPT Q&A

What are Nodes?

Ans.

In JavaScript, "nodes" typically refer to individual elements in the Document Object Model (DOM), they represent different types of entities (objects) within the DOM tree.

�

112 of 122

JAVASCRIPT Q&A

DOM Tree

Nodes

113 of 122

JAVASCRIPT Q&A

What are Nodes?

Ans.

In JavaScript, "nodes" typically refer to individual elements in the Document Object Model (DOM), they represent different types of entities (objects) within the DOM tree.

�

Element Nodes

Text Nodes

Attribute Nodes

Comment Nodes

Document Nodes

Document Fragment Nodes

114 of 122

JAVASCRIPT Q&A

What is NodeList?

Ans.

A NodeList is a collection of nodes returned by DOM traversal or query methods like getElementsByTagName, getElementsByClassName, querySelectorAll, etc. It represents a list of nodes that can be accessed and manipulated.

�

https://www.w3schools.com/js/js_htmldom_nodelist.asp

115 of 122

JAVASCRIPT Q&A

What are DOM Targeting Methods?

Ans.

The Document Object Model (DOM) provides a structured representation of HTML documents and allows to interact and interact with the elements in the document & DOM methods are the way to reach document elements either to get or set value of the elements to make the application dynamic.

�

getElementById()

getElementsByClassName()

getElementByTagName()

querySelector()

querySelectorAll()

getElementsByName()

https://www.w3resource.com/javascript-exercises/javascript-dom-exercises.php

Types

116 of 122

JAVASCRIPT Q&A

What are Events?

Ans.

Events are the actions that happens within the browser as a response and change in the state of an object is known as an Event.

�

117 of 122

JAVASCRIPT Q&A

What is Asynchronous JavaScript?

Ans.

In JavaScript, asynchronous refers to operations or tasks that can occur independently of the main program flow, allowing the program to continue running while waiting for the operation to complete.

�

Callbacks

Promises

Async/Await

Asynchronous Features:

118 of 122

JAVASCRIPT Q&A

What are setInterval & setTimeout?

Ans.

setInterval and setTimeout are both functions in JavaScript used for scheduling the execution of code after a certain delay. They are part of the Web APIs provided by browsers and are commonly used for asynchronous programming and managing timing-related tasks.

�

https://javascript.info/settimeout-setinterval

119 of 122

JAVASCRIPT Q&A

What is a Promise?

Ans.

Promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation. Promises have 3 states: pending, fulfilled, and rejected. They can be chained using methods like ‘.then()’ and ‘.catch()’ for handling success and errors respectively.

�

120 of 122

JAVASCRIPT Q&A

Ans.

async/await is a feature in javascript, The ‘async’ keyword is used to declare a function as asynchronous, indicating that it will always return a promise. And the ‘await’ key word is used within ‘async’ functions to pause their execution until a promise is settled, allowing the function to wait for asynchronous operations to complete before proceeding.

�

What is async/await?

121 of 122

JAVASCRIPT Q&A

Ans.

Local storage is a web storage to store key-value pairs locally within the user’s web browser. The methods used to set and get values from local storage are

“localStorage.setItem(“apple”, “apple is red” ) “ to set value with selected name as key and “localStorage.getItem(“apple”)” to get value from local storage with key as reference.

�

What is Local Storage?