JavaScript Fundamentals (Topics 73-90)

1. Question: What is the primary purpose of the switch statement in JavaScript?

◦ A) To define a block of code to be executed repeatedly as long as a condition is true.
◦ B) To perform different actions based on different conditions.
◦ C) To declare a variable that can hold multiple values.
◦ D) To handle errors and exceptions in code. Correct Answer: B) To perform different
actions based on different conditions.
2. Question: In a JavaScript switch statement, what is the function of the break keyword?
◦ A) It defines a new condition to test if the previous one is false.
◦ B) It specifies the code to run if there is no case match.
◦ C) It breaks out of the switch block, stopping further execution and case testing.
◦ D) It allows multiple cases to share the same code block. Correct Answer: C) It breaks out
of the switch block, stopping further execution and case testing.
3. Question: Which JavaScript loop is typically used when you want to loop through a block of
code a specific number of times, often for iterating over arrays?
◦ A) while loop
◦ B) do/while loop
◦ C) for loop
◦ D) for/in loop Correct Answer: C) for loop
4. Question: In a for loop, which statement defines the condition for running the loop?
◦ A) Statement 1 (initialization)
◦ B) Statement 2 (condition)
◦ C) Statement 3 (increment/decrement)
◦ D) The code block to be executed Correct Answer: B) Statement 2 (condition)
5. Question: What is the key difference between a while loop and a do/while loop in
JavaScript?
◦ A) A while loop always executes its code block at least once, while a do/while loop might
not.
◦ B) A do/while loop is used for looping through object properties, unlike a while loop.
◦ C) A do/while loop executes the code block once before checking the condition, while
a while loop checks the condition first.
◦ D) A while loop can only execute a block of code a fixed number of times. Correct
Answer: C) A do/while loop executes the code block once before checking the condition, while
a while loop checks the condition first.
6. Question: Which statement in JavaScript "jumps over" one iteration in a loop and continues
with the next iteration?
◦ A) break
◦ B) return
◦ C) exit
◦ D) continue Correct Answer: D) continue
7. Question: What data type does the typeof operator return for a JavaScript array?
◦ A) array
◦ B) function
◦ C) undefined
◦ D) object Correct Answer: D) object
8. Question: How can an empty string be converted to a number in JavaScript using the
Number() global method?
◦ A) It converts to NaN.
◦ B) It results in a TypeError.
◦ C) It converts to 0.
◦ D) It remains an empty string. Correct Answer: C) It converts to 0.
9. Question: What does isNaN() return if you try to perform arithmetic with a non-numeric
string, such as "Apple"?
◦ A) false
◦ B) null
◦ C) true
◦ D) undefined Correct Answer: C) true
10. Question: What is JavaScript's default behavior of moving declarations to the top of the
current scope?
◦ A) Encapsulation
◦ B) Abstraction
◦ C) Inheritance
◦ D) Hoisting Correct Answer: D) Hoisting
11. Question: What is the primary purpose of the try...catch statement in JavaScript error
handling?
◦ A) To create custom errors.
◦ B) To test a block of code for errors and handle them.
◦ C) To stop the execution of JavaScript code unconditionally.
◦ D) To define global variables that are resistant to errors. Correct Answer: B) To test a block
of code for errors and handle them.
12. Question: What method can be used in JavaScript to display values in the browser's
debugger console window?
◦ A) alert()
◦ B) document.write()
◦ C) console.error()
◦ D) console.log() Correct Answer: D) console.log()
13. Question: According to best practices, where should all declarations be placed in a
JavaScript script or function?
◦ A) At the end of the script or function.
◦ B) Randomly throughout the code.
◦ C) At the top of each script or function. [83a]
◦ D) Only when they are first used. Correct Answer: C) At the top of each script or function.
[83a]
14. Question: What is a recommended practice to avoid unexpected results when comparing
data of different types in JavaScript?
◦ A) Always use the == operator.
◦ B) Convert both values to strings before comparison.
◦ C) Convert variables to the proper type before comparison.
◦ D) Avoid comparing different data types altogether. Correct Answer: C) Convert variables
to the proper type before comparison.
15. Question: Why is it recommended to reduce DOM access for better JavaScript performance?
 ◦ A) DOM elements are difficult to style.
◦ B) Accessing the HTML DOM is very slow compared to other JavaScript statements.
◦ C) DOM elements consume too much memory.
◦ D) DOM manipulation can only be done synchronously. Correct Answer: B) Accessing the
HTML DOM is very slow compared to other JavaScript statements.
16. Question: Which of the following is a JavaScript reserved word and cannot be used as a
variable or function name?
◦ A) camelCase
◦ B) myVariable
◦ C) function
◦ D) firstName Correct Answer: C) function
17. Question: What is the purpose of the NaN global property in JavaScript?
◦ A) It represents a numeric value that is positive infinity.
◦ B) It indicates that a variable has not been assigned a value.
◦ C) It represents "Not-a-Number" and indicates a value is not a legal number.
◦ D) It evaluates a string and executes it as script code. Correct Answer: C) It represents
"Not-a-Number" and indicates a value is not a legal number.
18. Question: What does the window.open() method do in JavaScript?
◦ A) It closes the current browser window.
◦ B) It moves the current window to a specified position.
◦ C) It opens a new browser window.
◦ D) It resizes the current browser window. Correct Answer: C) It opens a new browser
window.
19. Question: What is the primary purpose of client-side form validation in JavaScript?
◦ A) To ensure data is stored securely on the server.
◦ B) To process input data after it has been sent to the server.
◦ C) To ensure input is clean, correct, and useful before sending it to a web server.
◦ D) To automatically submit the form regardless of input. Correct Answer: C) To ensure
input is clean, correct, and useful before sending it to a web server.
AJAX (Topics 93-94)
20. Question: What is the core object used in AJAX for exchanging data with a server?
◦ A) JavaScriptObject
◦ B) DOMObject
◦ C) ServerRequest
◦ D) XMLHttpRequest Correct Answer: D) XMLHttpRequest
21. Question: What is the default value for the async parameter in the
XMLHttpRequest.open() method?
◦ A) false (synchronous)
◦ B) true (asynchronous)
◦ C) null
◦ D) undefined Correct Answer: B) true (asynchronous)
22. Question: Which XMLHttpRequest property returns the response data from the server as a
string?
◦ A) responseXML
◦ B) status
◦ C) readyState
 ◦ D) responseText Correct Answer: D) responseText
23. Question: What readyState value for XMLHttpRequest indicates that the request has
finished and the response is ready?
◦ A) 0
◦ B) 1
◦ C) 3
◦ D) 4 Correct Answer: D) 4
jQuery (Topics 95-109, 180a)
24. Question: What is the common shortcut used to define or access jQuery?
◦ A) jq()
◦ B) query()
◦ C) $
◦ D) jQuery() Correct Answer: C) $
25. Question: Which jQuery method should you use to ensure that your jQuery code runs only
after the entire HTML document is fully loaded and ready?
◦ A) $(document).load()
◦ B) $(window).ready()
◦ C) $(document).onLoad()
◦ D) $(document).ready() Correct Answer: D) $(document).ready()
26. Question: How do you select all elements with a specific class, for example, class="test",
using jQuery?
◦ A) $("test")
◦ B) $("#test")
◦ C) $(".test")
◦ D) $("element.test") Correct Answer: C) $(".test")
27. Question: Which jQuery event method is a combination of mouseenter() and
mouseleave() events?
◦ A) focus()
◦ B) click()
◦ C) dblclick()
◦ D) hover() Correct Answer: D) hover()
28. Question: Which jQuery effect method gradually changes the opacity of selected elements
from hidden to visible?
◦ A) slideDown() [101a]
◦ B) toggle() [101a]
◦ C) fadeIn() [101a]
◦ D) fadeOut() [101a] Correct Answer: C) fadeIn() [101a]
29. Question: What is the purpose of the callback parameter in jQuery effect methods like
fadeIn() or hide()?
◦ A) To specify the speed of the animation.
◦ B) To define the easing function.
◦ C) A function to be executed after the current effect is 100% finished. [101a]
◦ D) To queue multiple animations. Correct Answer: C) A function to be executed after the
current effect is 100% finished. [101a]
30. Question: What CSS property must be set for an HTML element before it can be animated
using the jQuery animate() method?
◦ A) display
◦ B) visibility
◦ C) overflow
◦ D) position Correct Answer: D) position
31. Question: What does "chaining" mean in jQuery?
◦ A) Using multiple selectors in one statement.
◦ B) Combining different jQuery plugins.
◦ C) Running multiple jQuery methods on the same element within a single statement.
◦ D) Linking to external jQuery libraries. Correct Answer: C) Running multiple jQuery
methods on the same element within a single statement.
32. Question: Which jQuery method is used to set or return the value of form fields?
◦ A) text() [104a]
◦ B) html() [104a]
◦ C) attr() [104a]
◦ D) val() [104a] Correct Answer: D) val() [104a]
33. Question: Which jQuery method removes the selected element and all its child elements
from the DOM?
◦ A) empty() [104a]
◦ B) hide() [101a]
◦ C) remove() [104a]
◦ D) detach() (Not in sources, but common distractor) Correct Answer: C) remove() [104a]
34. Question: Which jQuery method is used to toggle between adding/removing classes from
selected elements?
◦ A) addClass()
◦ B) removeClass()
◦ C) hasClass() (Not in sources, but common distractor)
◦ D) toggleClass() Correct Answer: D) toggleClass()
35. Question: Which jQuery dimension method returns the width of an element, including
padding but excluding borders and margins?
◦ A) width()
◦ B) outerWidth()
◦ C) innerWidth()
◦ D) height() Correct Answer: C) innerWidth()
36. Question: What does "Traversing the DOM" in jQuery refer to?
◦ A) Modifying the content of HTML elements.
◦ B) Applying CSS styles to elements.
◦ C) Finding HTML elements based on their relation to other elements. [107a]
◦ D) Creating new HTML elements dynamically. Correct Answer: C) Finding HTML
elements based on their relation to other elements. [107a]
37. Question: Which jQuery method returns all direct children of the selected element?
◦ A) parents() [107a]
◦ B) find() [107a]
◦ C) children() [107a]
 ◦ D) siblings() [107a] Correct Answer: C) children() [107a]
38. Question: What is the purpose of the jQuery load() method in AJAX?
◦ A) To send data to a server using a POST request.
◦ B) To retrieve XML data from a server.
◦ C) To load data from a server and put the returned data into the selected element.
[180a]
◦ D) To create a new XMLHttpRequest object. Correct Answer: C) To load data from a
server and put the returned data into the selected element. [180a]
39. Question: If you are using another JavaScript framework that also uses the $ sign as a
shortcut, which jQuery method should you use to release jQuery's hold on the $ identifier?
◦ A) jQuery.release()
◦ B) $.disable()
◦ C) $.noConflict()
◦ D) jQuery.reset() Correct Answer: C) $.noConflict()
XML (Topics 111-121)
40. Question: Which of the following is a primary feature of XML?
◦ A) It is primarily designed for displaying content in web browsers.
◦ B) Its tags are predefined.
◦ C) It is extensible, allowing definition of custom tags.
◦ D) It is a replacement for HTML. Correct Answer: C) It is extensible, allowing definition
of custom tags.
41. Question: In many HTML applications, how is XML often used in relation to HTML?
◦ A) To format and display data, replacing HTML.
◦ B) To directly embed interactive web applications.
◦ C) To store or transport data, while HTML is used to format and display it.
◦ D) To define server-side logic for web pages. Correct Answer: C) To store or transport
data, while HTML is used to format and display it.
42. Question: What kind of structure do XML documents have, conceptually interpreted as an
"XML tree"?
◦ A) Linear
◦ B) Flat
◦ C) Hierarchical
◦ D) Relational Correct Answer: C) Hierarchical
43. Question: Which statement is FALSE regarding XML syntax rules?
◦ A) XML tags are case sensitive.
◦ B) All elements must have a closing tag.
◦ C) XML does not preserve white-space in a document.
◦ D) XML attribute values must always be quoted. Correct Answer: C) XML does not
preserve white-space in a document.
44. Question: What is an element with no content called in XML?
◦ A) A root element
◦ B) A simple element
◦ C) An empty element
◦ D) A self-closing element (though self-closing is a form of empty element, "empty element"
is the direct answer for the type) Correct Answer: C) An empty element
45. Question: When choosing between using an XML element or an attribute to hold data, what
is generally considered the better option according to the sources?
◦ A) Using attributes for all data.
◦ B) It depends on personal preference with no best practice.
◦ C) Using elements to hold data.
◦ D) Using attributes for multiple values. Correct Answer: C) Using elements to hold data.
46. Question: What mechanism do XML Namespaces provide to avoid element name conflicts
when mixing XML documents from different applications?
◦ A) Using unique element IDs.
◦ B) Using a name prefix with an xmlns attribute.
◦ C) Renaming conflicting elements manually.
◦ D) Converting XML to a different format. Correct Answer: B) Using a name prefix with an
xmlns attribute.
47. Question: What does DTD stand for in the context of XML?
◦ A) Document Transformation Definition
◦ B) Document Type Definition
◦ C) Data Type Description
◦ D) Document Tag Declaration Correct Answer: B) Document Type Definition
48. Question: How does an XML document validated against an XML Schema differ from a
"Well Formed" XML document?
◦ A) It is only "Well Formed".
◦ B) It adheres to stricter XML syntax rules.
◦ C) It is both "Well Formed" and "Valid".
◦ D) It uses a simplified XML syntax. Correct Answer: C) It is both "Well Formed" and
"Valid".
49. Question: What is XSLT primarily used for in relation to XML documents?
◦ A) For defining the structure of an XML document.
◦ B) For validating XML documents against a schema.
◦ C) To transform XML documents into other formats, like HTML.
◦ D) To find information within an XML document using path expressions. Correct Answer:
C) To transform XML documents into other formats, like HTML.
50. Question: What is XPath primarily used for?
◦ A) Defining element names in XML documents.
◦ B) Finding information in an XML document.
◦ C) Transforming XML documents into other formats.
◦ D) Validating XML document structure. Correct Answer: B) Finding information in an
XML document.
JSON (Topics 123-124)
51. Question: What does JSON stand for?
◦ A) Java Standard Object Notation
◦ B) JavaScript Object Notation
◦ C) Joint Service Oriented Network
◦ D) Java Simple Object Naming Correct Answer: B) JavaScript Object Notation
52. Question: Which of the following is a key difference between JSON and XML according to
the sources?
◦ A) JSON is human-readable, while XML is not.
 ◦ B) XML can use arrays, while JSON cannot.
◦ C) JSON does not use end tags, making it shorter.
◦ D) XML can be parsed by a standard JavaScript function, JSON cannot. Correct Answer:
C) JSON does not use end tags, making it shorter.
53. Question: In JSON syntax, what are JSON objects written inside of?
◦ A) Square brackets []
◦ B) Parentheses ()
◦ C) Curly braces {}
◦ D) Angle brackets <> Correct Answer: C) Curly braces {}
54. Question: Which JavaScript function is used to convert a JSON text into a JavaScript object?
◦ A) JSON.stringify() (Not in sources, but common distractor)
◦ B) JSON.toObject()
◦ C) JSON.parse()
◦ D) JSON.convert() Correct Answer: C) JSON.parse()
HTML5 (Topics 125-146)
55. Question: When was HTML5 published by W3C as the final recommendation?
◦ A) 1999
◦ B) 2004
◦ C) 2012
◦ D) 2014 Correct Answer: D) 2014
56. Question: Which of the following is a new semantic element introduced in HTML5 for
better document structure?
◦ A) <div>
◦ B) <span>
◦ C) <article>
◦ D) <table> Correct Answer: C) <article>
57. Question: What is the simplified DOCTYPE declaration for HTML5?
◦ A) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
◦ B) <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
◦ C) <!DOCTYPE html>
◦ D) <DOCTYPE HTML5> Correct Answer: C) <!DOCTYPE html>
58. Question: What is a recommended coding convention for HTML5 element names?
◦ A) Mixing uppercase and lowercase letters.
◦ B) Using only uppercase letters.
◦ C) Using lowercase element names. [130a]
◦ D) Omitting element names when possible. Correct Answer: C) Using lowercase element
names. [130a]
59. Question: What is the purpose of the HTML <canvas> element?
◦ A) To embed video content.
◦ B) To define navigation links.
◦ C) To draw graphics on the fly via scripting (usually JavaScript).
◦ D) To create dynamic form controls. Correct Answer: C) To draw graphics on the fly via
scripting (usually JavaScript).
60. Question: In HTML5 Canvas, what are the coordinates of the upper-left corner?
◦ A) (1,1)
 ◦ B) (width, height)
◦ C) (0,0)
◦ D) (center, middle) Correct Answer: C) (0,0)
61. Question: Which method is used to define the starting point of a line on an HTML5 Canvas?
◦ A) lineTo(x,y)
◦ B) stroke()
◦ C) moveTo(x,y)
◦ D) beginPath() (Not in sources, but common distractor) Correct Answer: C)
moveTo(x,y)
62. Question: What method is used to specify the color stops and their position along a Canvas
gradient?
◦ A) createLinearGradient()
◦ B) createRadialGradient()
◦ C) addColorStop(color, pos) (Incorrect order)
◦ D) addColorStop(pos, color) Correct Answer: D) addColorStop(pos, color)
63. Question: What is the HTML5 <svg> element used for?
◦ A) Defining sound or music content.
◦ B) Creating interactive forms.
◦ C) Defining graphics for the Web (Scalable Vector Graphics).
◦ D) Embedding external applications as plug-ins. Correct Answer: C) Defining graphics for
the Web (Scalable Vector Graphics).
64. Question: What is a key advantage of SVG over Canvas graphics, according to the sources?
◦ A) SVG is rendered pixel by pixel.
◦ B) SVG is well suited for graphic-intensive games.
◦ C) SVG is resolution independent.
◦ D) In SVG, once the graphic is drawn, it is forgotten by the browser. Correct Answer: C)
SVG is resolution independent.
65. Question: Which video format is NOT listed as supported by the HTML5 <video> element?
◦ A) MP4
◦ B) WebM
◦ C) Ogg
◦ D) AVI (Not listed in sources) Correct Answer: D) AVI
66. Question: What is the purpose of the controls attribute in the HTML5 <video> element?
◦ A) To automatically play the video on page load.
◦ B) To loop the video indefinitely.
◦ C) To add video controls like play, pause, and volume.
◦ D) To set the width and height of the video player. Correct Answer: C) To add video
controls like play, pause, and volume.
67. Question: Which attribute is used to make an HTML element draggable in HTML5?
◦ A) canDrag="true"
◦ B) ondrag="true"
◦ C) draggable="true"
◦ D) dragEnabled="true" Correct Answer: C) draggable="true"
68. Question: What is a key advantage of HTML local storage over cookies?
◦ A) It can store large amounts of data (5MB) and information is never transferred to the
server.
 ◦ B) Data stored in local storage is included in every server request.
◦ C) Data is lost when the browser tab is closed.
◦ D) It is primarily for session-specific data. Correct Answer: A) It can store large amounts of
data (5MB) and information is never transferred to the server.
69. Question: Which HTML5 local storage object stores data for only one session, meaning data
is lost when the tab is closed?
◦ A) window.localStorage
◦ B) window.webStorage
◦ C) window.sessionData
◦ D) window.sessionStorage Correct Answer: D) window.sessionStorage
70. Question: What file is created to enable HTML5 application cache for offline web
applications?
◦ A) cache.txt
◦ B) offline.html
◦ C) A cache manifest file (e.g., demo.appcache)
◦ D) app.js Correct Answer: C) A cache manifest file (e.g., demo.appcache)
71. Question: Which section of a cache manifest file specifies files that require a connection to
the server and will never be cached?
◦ A) CACHE MANIFEST
◦ B) FALLBACK
◦ C) NETWORK
◦ D) OFFLINE Correct Answer: C) NETWORK
72. Question: What is a Web Worker in HTML5?
◦ A) A JavaScript function that modifies the DOM directly in the background.
◦ B) A JavaScript that runs in the background, independently of other scripts, without
affecting page performance.
◦ C) A tool for debugging JavaScript errors.
◦ D) A method for handling user input events asynchronously. Correct Answer: B) A
JavaScript that runs in the background, independently of other scripts, without affecting page
performance.
73. Question: Which JavaScript objects do Web Workers NOT have access to?
◦ A) The Math object
◦ B) The Date object
◦ C) The window object
◦ D) The Array object Correct Answer: C) The window object
74. Question: What is the primary characteristic of HTML5 Server-Sent Events (SSE)?
◦ A) They require the web page to constantly ask the server for updates.
◦ B) They are primarily used for sending data from the client to the server.
◦ C) They allow a web page to automatically get updates from a server.
◦ D) They are a form of bidirectional communication. Correct Answer: C) They allow a web
page to automatically get updates from a server.
CSS3 (Topics 148-159)
75. Question: Which CSS3 property is used to give any element "rounded corners"?
◦ A) border-style
◦ B) corner-radius
◦ C) border-shape
 ◦ D) border-radius Correct Answer: D) border-radius
76. Question: What are the three parts of the CSS3 border-image property?
◦ A) Image source, width, and height.
◦ B) The image to use, where to slice the image, and whether middle sections should be
repeated or stretched.
◦ C) Border color, border style, and border width.
◦ D) Top, right, bottom, and left image parts. Correct Answer: B) The image to use, where to
slice the image, and whether middle sections should be repeated or stretched.
77. Question: Which CSS3 property allows you to specify the size of background images,
allowing them to be scaled using keywords like contain or cover?
◦ A) background-image [151a]
◦ B) background-repeat
◦ C) background-size [151a]
◦ D) background-position Correct Answer: C) background-size [151a]
78. Question: An RGBA color value specifies an alpha channel. What range does the alpha
parameter take?
◦ A) 0 (fully opaque) to 100 (fully transparent)
◦ B) -1.0 to 1.0
◦ C) 0.0 (fully transparent) to 1.0 (fully opaque)
◦ D) 0 to 255 Correct Answer: C) 0.0 (fully transparent) to 1.0 (fully opaque).
79. Question: What does a hue value of 120 represent in HSL (Hue, Saturation, Lightness) color
notation?
◦ A) Red
◦ B) Blue
◦ C) Green
◦ D) Yellow Correct Answer: C) Green
80. Question: Which type of CSS3 gradient is defined by its center?
◦ A) Linear Gradients [153a]
◦ B) Diagonal Gradients
◦ C) Conic Gradients (Not in sources)
◦ D) Radial Gradients [153a] Correct Answer: D) Radial Gradients [153a]
81. Question: What is the primary purpose of the text-shadow property in CSS3?
◦ A) To apply a border around text.
◦ B) To change the font size of text.
◦ C) To apply shadow to text.
◦ D) To highlight text with a background color. Correct Answer: C) To apply shadow to text.
82. Question: In CSS3, what does the @font-face rule allow web designers to do?
◦ A) Set the default font size for the entire document.
◦ B) Use fonts that are not installed on the user's computer.
◦ C) Define standard web-safe fonts only.
◦ D) Change the color of text only. Correct Answer: B) Use fonts that are not installed on the
user's computer.
83. Question: Which CSS3 2D transform method moves an element from its current position
based on X and Y axis parameters?
◦ A) rotate()
◦ B) scale()
 ◦ C) skewX()
◦ D) translate() Correct Answer: D) translate()
84. Question: What are the two essential things you must specify to create a CSS3 transition
effect?
◦ A) The element ID and a duration.
◦ B) The CSS property to animate and the duration of the effect.
◦ C) A starting value and an ending value.
◦ D) A JavaScript function and an event listener. Correct Answer: B) The CSS property to
animate and the duration of the effect.
85. Question: To use CSS3 animation, what must you first specify for the animation?
◦ A) An event handler.
◦ B) A transition property.
◦ C) A transform function.
◦ D) Keyframes. Correct Answer: D) Keyframes.
86. Question: What CSS3 property specifies the number of columns an element should be
divided into for multi-column layouts?
◦ A) column-gap
◦ B) column-rule
◦ C) column-count
◦ D) column-width Correct Answer: C) column-count
Responsive Web Design (RWD) (Topics 161-167)
87. Question: What is Responsive Web Design (RWD) primarily aimed at?
◦ A) Creating separate websites for different devices.
◦ B) Designing web pages exclusively for desktop computers.
◦ C) Crafting sites to provide an optimal viewing and interaction experience across all
devices.
◦ D) Reducing the total size of web pages. Correct Answer: C) Crafting sites to provide an
optimal viewing and interaction experience across all devices.
88. Question: What does the width=device-width part in the viewport meta tag do?
◦ A) Sets the page width to a fixed value.
◦ B) Sets the initial zoom level.
◦ C) Sets the width of the page to follow the screen-width of the device.
◦ D) Prevents horizontal scrolling on mobile devices. Correct Answer: C) Sets the width of
the page to follow the screen-width of the device.
89. Question: In a responsive grid-view, how many columns does a typical grid often have,
adding up to a total width of 100%?
◦ A) 6
◦ B) 10
◦ C) 12
◦ D) 16 Correct Answer: C) 12
90. Question: What is a Media Query in CSS3 primarily used for?
◦ A) To animate elements on a web page.
◦ B) To define global font styles.
◦ C) To include a block of CSS properties only if a certain condition (e.g., screen width) is
true.
 ◦ D) To validate HTML document structure. Correct Answer: C) To include a block of CSS
properties only if a certain condition (e.g., screen width) is true.
91. Question: What is the "Mobile First" approach in Responsive Web Design?
◦ A) Designing for desktop screens first, then adapting for mobile.
◦ B) Designing for mobile before designing for desktop or any other device.
◦ C) Only displaying content on mobile devices.
◦ D) Prioritizing performance over visual design on mobile. Correct Answer: B) Designing
for mobile before designing for desktop or any other device.
92. Question: If the max-width property for an image is set to 100%, what will happen to the
image?
◦ A) It will always scale up to be larger than its original size.
◦ B) It will only display its original size.
◦ C) It will scale down if it has to, but never scale up to be larger than its original size.
◦ D) It will stretch to cover the entire content area. Correct Answer: C) It will scale down if it
has to, but never scale up to be larger than its original size.
93. Question: Which HTML5 element allows you to define more than one image source, where
the browser uses the first source that fits the specified media queries?
◦ A) <img>
◦ B) <source>
◦ C) <picture>
◦ D) <canvas> Correct Answer: C) <picture>
94. Question: Which CSS property should be set to 100% for a video player to be responsive
and scale up and down, keeping its aspect ratio automatically?
◦ A) height
◦ B) max-height
◦ C) object-fit (Not in sources, but common distractor)
◦ D) width Correct Answer: D) width
95. Question: Which of the following is the most popular framework for Responsive Web
Design, as mentioned in the sources?
◦ A) Foundation
◦ B) Skeleton
◦ C) Bootstrap
◦ D) Materialize (Not in sources) Correct Answer: C) Bootstrap
Bootstrap (Topics 168-180)
96. Question: What is Bootstrap?
◦ A) A JavaScript library for DOM manipulation.
◦ B) A server-side framework for web development.
◦ C) A free front-end framework for faster and easier web development, including
HTML and CSS based design templates.
◦ D) A tool for validating web page standards. Correct Answer: C) A free front-end
framework for faster and easier web development, including HTML and CSS based design
templates.
97. Question: In Bootstrap's grid system, if you group columns together to create wider
columns, what should the numbers in .col-*-* classes always add up to for each row?
◦ A) 6
◦ B) 10
 ◦ C) 12
◦ D) Any number, depending on content. Correct Answer: C) 12
98. Question: Which Bootstrap class adds zebra-stripes to a table?
◦ A) .table-bordered
◦ B) .table-hover
◦ C) .table-striped
◦ D) .table-condensed Correct Answer: C) .table-striped
99. Question: Which Bootstrap class is used to make an image responsive, so it automatically
adjusts to fit the size of the screen?
◦ A) .img-rounded
◦ B) .img-circle
◦ C) .img-thumbnail
◦ D) .img-responsive Correct Answer: D) .img-responsive
100. Question: What is the primary purpose of a Bootstrap Jumbotron? * A) To create a
navigation bar. * B) To display a basic table. * C) To indicate a big box for calling extra
attention to some special content or information. * D) To group a series of buttons together.
Correct Answer: C) To indicate a big box for calling extra attention to some special content or
information.

Short
1. Q: What are the three core languages of front-end development? A: The three core languages
of front-end development are HTML, CSS, and JavaScript.
2. Q: What does URL stand for, and what is its purpose? A: URL stands for Uniform Resource
Locator. It is the global address of documents and other resources on the World Wide Web.
3. Q: Name the two commonly used methods for HTTP requests between a client and a server.
A: The two commonly used methods for HTTP requests between a client and server are GET
and POST.
4. Q: What is the main function of a Web server? A: A Web server is a program that uses
HTTP to serve the files that form Web pages to users, in response to their requests, by HTTP
clients.
5. Q: What is a domain name, and what does it tell a domain name server? A: A domain name
is a unique name for your web site. It tells a domain name server (using the domain name
system or DNS) where to forward a request for a Web page.
6. Q: What does HTML stand for, and what is its primary use in web pages? A: HTML stands
for Hyper Text Markup Language. It is the standard markup language used to create web
pages.
7. Q: How are HTML headings defined, and which tag represents the most important heading?
A: HTML headings are defined with the <h1> to <h6> tags. The <h1> tag defines the most
important heading.
8. Q: What is the purpose of an HTML attribute? A: Attributes provide additional
information about an element and are always specified in the start tag as name/value pairs.
9. Q: Which HTML attribute is used to specify the address for an HTML link (<a> tag)? A:
The href attribute is used to specify the link address for an HTML link (<a> tag).
10. Q: What is the difference between an HTML block-level element and an inline element?
A: Block-level elements normally start and end with a new line when displayed, while inline
elements are normally displayed without line breaks.
11. Q: How can CSS be inserted into an HTML file? Name two ways. A: CSS can be inserted
into an HTML file using an external style sheet, an internal style sheet, or by defining inline
styles.
12. Q: What are the three ways a color is most often specified in CSS? A: In CSS, a color is
most often specified by a HEX value (e.g., "#ff0000"), an RGB value (e.g., "rgb(255,0,0)"), or a
color name (e.g., "red").
13. Q: What is the purpose of the CSS text-transform property? A: The text-
transform property is used to specify uppercase and lowercase letters in a text, such as
turning everything into uppercase or capitalizing the first letter of each word.
14. Q: What is the difference between setting CSS font size with pixels versus em? A: Setting
font size with pixels gives full control but may not allow user resizing in all browsers. Using em
(recommended by W3C) allows users to resize the text, with 1em typically equaling the
browser's default 16px font size.
15. Q: What are the four states in which links can be styled using CSS? A: The four link states
for styling in CSS are a:link (unvisited), a:visited (visited), a:hover (mouse over), and
a:active (moment clicked).
16. Q: In the CSS box model, what does the margin represent? A: In the CSS box model, the
margin clears an area outside the border, and it is completely transparent.
17. Q: What is the function of the CSS border-style property? A: The border-style
property specifies what kind of border to display.
18. Q: What is a CSS combinator used for? A: A combinator is something that explains the
relationship between selectors in CSS.
19. Q: What is a CSS pseudo-class used to define? A: A pseudo-class is used to define a
special state of an element, such as styling an element when a user's mouse is over it or
distinguishing between visited and unvisited links.
20. Q: What is the syntax for a single-line JavaScript comment? A: The syntax for a single-
line JavaScript comment starts with //.
21. Q: How are JavaScript statements typically separated? A: JavaScript statements are
typically separated by semicolons (;).
22. Q: What are JavaScript literals? Provide two examples. A: JavaScript literals are fixed
values. Examples include numbers (e.g., 10.50, 1001) and strings (e.g., "John Doe", 'John
Doe').
23. Q: What keyword is used to declare a JavaScript variable? A: The var keyword is used
to declare a JavaScript variable.
24. Q: What happens when you add a number and a string in JavaScript using the + operator?
A: When you add a number and a string using the + operator, JavaScript will concatenate them,
resulting in a string.
25. Q: What is a JavaScript function designed to do? A: A JavaScript function is a block of
code designed to perform a particular task.
26. Q: What does JavaScript's function scope mean for variables declared inside a function?
A: JavaScript's function scope means that variables declared within a function become LOCAL
to that function and can only be accessed within it.
27. Q: What happens if you assign a value to a variable that has not been declared in
JavaScript? A: If you assign a value to a variable that has not been declared, it will
automatically become a GLOBAL variable.
28. Q: How do you find the length of a string in JavaScript? A: The length of a string in
JavaScript is found using the built-in property length (e.g., txt.length).
29. Q: How are numbers always stored in JavaScript, following the international IEEE 754
standard? A: JavaScript numbers are always stored as double precision floating-point
numbers, following the international IEEE 754 standard.
30. Q: What does NaN stand for in JavaScript? A: NaN stands for "Not a Number".
31. Q: Name two JavaScript global functions that can be used to convert variables to numbers.
A: Two JavaScript global functions used to convert variables to numbers are Number(),
parseInt(), and parseFloat().
32. Q: What is an array in JavaScript, and what can it hold? A: An array is a special variable
that can hold more than one value at a time under a single name. It can hold values of different
types, including objects, functions, and other arrays.
33. Q: How do you access elements of a JavaScript array? A: You access elements of a
JavaScript array by referring to their index number.
34. Q: What is the key difference between JavaScript arrays and objects in terms of how they
access elements? A: JavaScript arrays use numbered indexes, while objects use named
indexes to access their elements.
35. Q: What does the pop() method do to a JavaScript array? A: The pop() method removes
the last element from a JavaScript array.
36. Q: What is the primary purpose of comparison operators in JavaScript? A: Comparison
operators are used in logical statements to determine equality or difference between variables
or values.
37. Q: What are the four types of conditional statements in JavaScript? A: The four types of
conditional statements in JavaScript are if, else, else if, and switch.
38. Q: What is the purpose of the break statement in a JavaScript loop? A: The break
statement "jumps out" of a loop, stopping its execution and proceeding with the code after the
loop code block.
39. Q: In JavaScript, name three data types that can contain values. A: Three data types that
can contain values in JavaScript are String, Number, Boolean, Object, and Function.
40. Q: What is JavaScript hoisting? A: Hoisting is JavaScript's default behavior of moving
declarations to the top of the current scope (script or function), allowing a variable to be used
before it has been declared.
41. Q: What is the function of the try statement in JavaScript error handling? A: The try
statement lets you test a block of code for errors.
42. Q: What does AJAX stand for, and what is its primary benefit in web development? A:
AJAX stands for Asynchronous JavaScript and XML. Its primary benefit is allowing web
pages to be updated asynchronously by exchanging small amounts of data with the server
without reloading the whole page.
43. Q: What is the XMLHttpRequest object used for in AJAX? A: The XMLHttpRequest
object is the keystone of AJAX and is used to exchange data with a server behind the scenes.
44. Q: What does jQuery primarily simplify in JavaScript development? A: jQuery primarily
simplifies HTML document traversal and manipulation, event handling, animation, and
Ajax with an easy-to-use API.
45. Q: What is the purpose of the jQuery $(document).ready() method? A: The purpose
of the $(document).ready() method is to prevent any jQuery code from running
before the document is finished loading, ensuring the document is fully loaded and ready
before working with it.
46. Q: What is XML primarily designed to describe? A: XML was designed to describe data.
47. Q: How does JSON differ from XML in terms of its use of end tags and overall length? A:
JSON doesn't use end tags and is generally shorter than XML.
48. Q: What is the main purpose of HTML5 semantic elements? A: HTML5 semantic
elements (like <header>, <footer>, <article>, <section>) clearly describe their meaning to
both the browser and the developer, making it easier for search engines to identify the correct
web page content.
49. Q: What is Responsive Web Design (RWD) aimed at achieving? A: Responsive Web
Design (RWD) is aimed at crafting sites to provide an optimal viewing and interaction
experience with easy reading and navigation, minimizing resizing, panning, and scrolling on all
devices.
50. Q: Name two common responsive design frameworks mentioned in the sources. A: Two
common responsive design frameworks mentioned are Bootstrap and Foundation

Long
1. Q: Explain the individual roles of HTML, CSS, and JavaScript in client-side development
and how their combined application creates the user experience on a website or web application.
As a front-end developer, what are your key responsibilities regarding content presentation and
user interactions using these languages?
2. Q: Compare and contrast the GET and POST methods used for HTTP requests between a
client and a server. Discuss their primary differences in terms of:
◦ Data visibility and security
◦ Data length limitations
◦ Caching behavior
◦ Typical use cases for each method
3. Q: Define a Uniform Resource Locator (URL) and break down its primary components,
providing an example for each part. Additionally, explain why URL encoding is necessary and
how it handles characters outside the ASCII set, including spaces.
4. Q: Describe the role of a Web server in serving web pages to users. How do Web Agents
(User Agents) facilitate user interaction with a Web server to retrieve resources or data, and
what is a typical example of such an agent?
5. Q: Elaborate on the fundamental structure of HTML elements, including the concept of
nested elements and the importance of closing tags. Furthermore, explain the purpose of
HTML attributes and provide examples of how at least three different attributes (lang, href,
alt, width/height) provide additional information or functionality to HTML elements, noting
best practices like using lowercase and quoting values.
6. Q: Detail the three primary methods for inserting CSS into an HTML file: external style
sheets, internal style sheets, and inline styles. For each method, explain its practical
application, describe where the CSS code is placed, and provide a scenario where it would be
most appropriate.
7. Q: Describe the CSS Box Model by explaining its four main components: content, padding,
border, and margin. Illustrate how each component contributes to the overall layout and
spacing of an HTML element on a web page, and explain how these components affect the
perceived total width and height of an element.
8. Q: Identify the five different data types that can contain values in JavaScript, along with
the additional types of objects and non-value types. Explain how JavaScript handles automatic
type conversion when operating on different data types, providing examples of how numbers
and strings can be automatically converted or concatenated. Also, discuss common global
functions available to explicitly convert variables to numbers.
9. Q: Define a JavaScript function and explain its purpose as a block of reusable code. Discuss
JavaScript's function scope and explain the difference between local and global variables in
JavaScript. What happens if you assign a value to a variable that has not been declared, and how
does this relate to variable lifetime?
10. Q: Explain the concepts of error handling in JavaScript using the try, catch, throw,
and finally statements. Describe the role of each statement in managing errors and how they
can be used to create custom error messages for scenarios like input validation.
11. Q: Define AJAX and explain its primary benefit in web development, including real-life
examples. Describe the role of the XMLHttpRequest object as the keystone of AJAX, and
detail the steps involved in:
◦ Creating an XMLHttpRequest object
◦ Sending a request to a server using open() and send() methods
◦ Receiving a response using responseText or responseXML in conjunction with the
onreadystatechange event.
12. Q: What is jQuery, and how does it simplify common JavaScript development tasks,
including HTML/DOM manipulation, event handling, and AJAX? Explain how to include the
jQuery library in an HTML file, differentiating between downloading it locally and using a
Content Delivery Network (CDN). Why is it considered good practice to wrap jQuery code
within a $(document).ready() event?
13. Q: Compare and contrast JSON and XML as data-interchange formats for web applications.
Discuss their similarities and key differences in terms of:
◦ Syntax and structure (e.g., use of end tags, named vs. numbered indexes)
◦ Verbosity and readability
◦ How they are parsed and used in JavaScript applications
◦ Suitability for AJAX applications
14. Q: Explain the concept of HTML5 semantic elements and their importance in structuring
web pages for both browsers and developers. Provide examples of at least four new semantic
elements introduced in HTML5 (e.g., <header>, <footer>, <article>, <section>, <nav>,
<aside>) and describe their specific purpose and content. How do these elements improve web
page content identification for search engines compared to older HTML4 practices?
15. Q: Define Responsive Web Design (RWD) and explain its primary goal regarding
providing an optimal viewing and interaction experience across various devices like desktops,
tablets, and phones. Discuss the importance of the viewport meta tag in RWD and how it
instructs browsers on page dimensions and scaling. Outline at least three key rules or best
practices to follow to ensure content sizes appropriately for the viewport and avoids horizontal
scrolling.
16. Q: Describe how a responsive grid-view system is structured in web design, emphasizing
the concept of dividing a page into columns that shrink and expand proportionally. How do CSS
Media Queries enable different styling rules for various screen sizes, and explain the "Mobile
First" approach in conjunction with breakpoints to ensure faster display on smaller devices?
17. Q: Differentiate between HTML5 Canvas and SVG as methods for drawing graphics on the
web. Compare their characteristics regarding:
◦ Resolution dependence
◦ Support for event handlers
◦ Text rendering capabilities
◦ How drawn shapes are remembered/rendered
◦ Their suitability for different types of graphic applications, such as games versus large
rendering areas.
18. Q: Explain the purpose of HTML5 local storage and how it offers advantages over
traditional cookies for storing application data. Detail the two primary objects provided by
HTML local storage, window.localStorage and window.sessionStorage,
specifying their key differences in terms of data persistence (expiration). Provide examples of
how data can be stored and retrieved using these objects.
19. Q: Discuss at least five key quality considerations for website implementation, including
fonts, colors and backgrounds, browser compatibility, and site speed. Additionally, elaborate on
at least five aspects of web usability, such as availability, clarity of content, consistency, and
handling user interactions, that front-end developers should prioritize to ensure a positive user
experience.
20. Q: Define Search Engine Optimization (SEO) and explain its dual focus: On-site
Optimization and Off-site Optimization. Describe at least five significant factors for effective
On-site SEO, such as content quality, keyword usage, title/meta description tags, and internal
linking. Furthermore, outline at least five strategies for improving Off-site SEO, including
building inbound links and social media influence, and explain why building inbound links
gradually in a natural order is important.