WorksheetsWeb Development Fundamentals Quiz
Total questions: 95
Worksheet time: 32mins
Which of the following is a valid Tailwind CSS class for setting the text color to blue?
text-blue-500
color-blue
blue-text
font-blue
Which of the following is a primitive data type in JavaScript?
Array
String
Object
Function
What does the "md:" prefix in Tailwind CSS indicate?
Margin direction
Medium screen size breakpoint
Minimum display
Main display
Which keyword is used to declare a function in JavaScript?
define
function
method
declare
Which Tailwind CSS utility class is used to add padding to all sides of an element?
p-4
m-4
pad-4
padding-4
Which method is used in JavaScript to select an element by its ID from the DOM?
getElementByClass
getElementById
selectById
querySelectorAll
Which of the following best describes the purpose of responsive design?
To make websites load faster
To ensure websites look good on all device sizes
To add animations to web pages
To improve website security
Which of the following is the correct way to define a function that takes two parameters and returns their sum in JavaScript?
function sum(a, b) { return a + b; }
function sum(a, b) = a + b;
sum(a, b) => a + b;
function sum = (a, b) { return a + b; }
Given the Tailwind CSS class "flex justify-center items-center", what is the layout effect on a container?
The container's content is aligned to the top left
The container's content is centered both vertically and horizontally
The container's content is spaced evenly
The container's content is aligned to the bottom right
Which JavaScript data type would be most appropriate to store a list of student names?
String
Array
Number
Boolean
How would you use Tailwind CSS to make an image responsive so it scales with the width of its container?
Add the class "w-full" to the image
Add the class "img-responsive"
Add the class "scale-100"
Add the class "container"
Which JavaScript method would you use to change the text content of a paragraph with the ID "demo"?
document.getElementById("demo").innerText = "New text";
document.getElementByClass("demo").text = "New text";
document.querySelector("demo").textContent = "New text";
document.getElementById("demo").setText("New text");
A developer wants to create a navigation bar that collapses into a hamburger menu on small screens using Tailwind CSS. Which approach best demonstrates the use of responsive design principles?
Use "hidden md:block" for the menu and "block md:hidden" for the hamburger icon
Use "block" for both menu and hamburger icon
Use "flex" for the menu and "hidden" for the hamburger icon
Use "inline" for the menu and "block" for the hamburger icon
Given the following code, what will be the output? ```javascript let x = "5"; let y = 2; console.log(x + y); ```
7
"52"
10
"7"
You want to add a shadow effect to a card component using Tailwind CSS. Which utility class should you use?
shadow-lg
border-lg
bg-shadow
card-shadow
Suppose you have a button with the ID "submitBtn". Write the JavaScript code to add a click event listener that logs "Submitted!" to the console.
document.getElementById("submitBtn").addEventListener("click", function() { console.log("Submitted!"); });
document.getElementById("submitBtn").onClick = function() { console.log("Submitted!"); };
document.getElementById("submitBtn").click(function() { console.log("Submitted!"); });
document.getElementById("submitBtn").addEvent("click", function() { console.log("Submitted!"); });
You are tasked with creating a responsive grid layout using Tailwind CSS that displays 1 column on small screens and 3 columns on medium and larger screens. Which class combination should you use?
grid-cols-1 md:grid-cols-3
grid-cols-3 md:grid-cols-1
col-1 md:col-3
grid-1 md:grid-3
A user wants to toggle the visibility of a div when a button is clicked. Which JavaScript approach would best achieve this?
Add or remove a "hidden" class from the div using classList.toggle in the button's click event handler
Change the div's color property
Set the div's innerHTML to an empty string
Use alert to show the div
You are given a list of user objects in JavaScript. Write a function that returns the names of users who are older than 18.
function getAdultNames(users) { return users.filter(u => u.age > 18).map(u => u.name); }
function getAdultNames(users) { return users.map(u => u.name); }
function getAdultNames(users) { return users.filter(u => u.age < 18).map(u => u.name); }
function getAdultNames(users) { return users.filter(u => u.name > 18); }
A web page uses Tailwind CSS for styling and needs to support both light and dark modes. How can you strategically use Tailwind CSS utilities to achieve this?
Use "bg-white text-black" for light mode and "dark:bg-black dark:text-white" for dark mode
Use only "bg-black text-white" for all modes
Use "bg-gray-500 text-gray-500" for both modes
Use "bg-light text-dark" for light mode and "bg-dark text-light" for dark mode
Which Tailwind CSS class would you use to add a border with a width of 2 pixels to an element?
border-2
bordered-2
border-width-2
bd-2
What is the result of the following JavaScript code?
let arr = [1, 2, 3];
console.log(arr.length);
undefined
1
3
2
Which method would you use in JavaScript to convert a string to an integer?
parseInt()
toString()
parseFloat()
Number.isInteger()
Which Tailwind CSS class would you use to make text bold?
text-bold
font-bold
bold-text
font-weight-bold
What is the output of the following JavaScript code?
let str = "Hello";
console.log(str.length);
6
5
4
undefined
Which JavaScript method can be used to add a new element to the end of an array?
concat()
shift()
pop()
push()
Which Tailwind CSS class would you use to set the background color of an element to red?
bg-red-500
background-red
color-red-500
red-bg
What is the output of the following JavaScript code?
let num = 10;
console.log(typeof num);
"string"
"object"
10
"number"
Which JavaScript method would you use to remove the first element from an array?
splice()
pop()
shift()
unshift()
Which Tailwind CSS class would you use to add a border with a width of 2 pixels to an element?
border-2
border2
border-thick
border-width-2
What is the output of the following JavaScript code?
let arr = [10, 20, 30];
console.log(arr[1]);
10
20
30
undefined
Which JavaScript method can be used to join all elements of an array into a single string?
concat()
join()
push()
split()
Which Tailwind CSS utility class would you use to center text horizontally within an element?
justify-center
align-center
center-text
text-center
What is the output of the following JavaScript code?
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.indexOf("banana"));
0
1
2
-1
Which JavaScript method can be used to execute a function for each element in an array?
filter()
map()
forEach()
reduce()
Which Tailwind CSS utility class would you use to add a shadow effect to an element?
shadow-effect
shadowed
box-shadow
shadow
What is the correct way to declare a constant variable in JavaScript?
constant myVar = 10;
var myVar = 10;
const myVar = 10;
let myVar = 10;
Which Tailwind CSS class would you use to make text bold?
fontweight-bold
bold-text
text-bold
font-bold
Which JavaScript method would you use to check if a variable is an array?
Array.isArray()
checkArray()
isArray()
typeof array
Which Tailwind CSS class would you use to set the background color to green?
bg-green-500
background-green
color-green-500
green-bg
What is the result of the following JavaScript code?
let str = "Hello";
console.log(str.length);
4
5
undefined
"Hello"
Which JavaScript method is used to remove the last element from an array?
shift()
pop()
splice()
remove()
Which Tailwind CSS class would you use to center text horizontally within an element?
text-center
align-center
justify-center
center-text
What is the output of the following JavaScript code?
let a = 3;
let b = '3';
console.log(a == b);
TypeError
undefined
true
false
Which JavaScript method adds one or more elements to the end of an array and returns the new length?
pop()
push()
shift()
unshift()
Which Tailwind CSS class would you use to add padding of 4 units to all sides of an element?
pad-4
pl-4
padding-4
p-4
What is the output of the following JavaScript code?
let colors = ["red", "green", "blue"];
console.log(colors.includes("green"));
undefined
false
true
"green"
Which Tailwind CSS utility class would you use to add padding of 4 units to all sides of an element?
pad-4
pd-4
padding-4
p-4
What is the output of the following JavaScript code?
let nums = [1, 2, 3];
console.log(nums.length);
2
3
undefined
1
Which JavaScript method can be used to remove the first element from an array?
pop()
shift()
splice()
remove()
Which Tailwind CSS class would you use to make text bold?
font-bold
bold-text
text-bold
font-weight-bold
Which JavaScript method is used to add a new element to the end of an array?
push()
add()
append()
insert()
What Tailwind CSS class would you use to give an element rounded corners?
round-corner
rounded
border-radius
corner-round
Which JavaScript method would you use to combine two arrays into one?
join()
split()
merge()
concat()
Which Tailwind CSS utility class would you use to make text bold?
font-weight-bold
font-bold
text-bold
bold-text
What is the output of the following JavaScript code?
let arr = [1, 2, 3];
arr.push(4);
console.log(arr.length);
3
undefined
4
5
Which JavaScript method removes the last element from an array and returns that element?
push()
shift()
pop()
unshift()
Which Tailwind CSS class would you use to set the background color of an element to red?
bg-red-500
background-red
color-red-500
red-bg
What is the output of the following JavaScript code?
let arr = [10, 20, 30];
console.log(arr[1]);
30
20
10
undefined
Which JavaScript method removes the last element from an array and returns that element?
pop()
shift()
splice()
remove()
Which Tailwind CSS class would you use to add a margin of 8 units to the top of an element?
mt-8
margin-top-8
top-8
m-8
What is the output of the following JavaScript code?
let arr = [1, 2, 3];
console.log(arr.length);
3
1
2
undefined
A collection of interlinked web pages on the World Wide Web
website
content
footprint
heading
HTML stands for
Hypretext Markup Language
Hypertext Media Language
Hyper Text Marker Line
Hypertext Mangement List
The structure of a web page is primarily created with which of the following?
HTML
CSS
Javascript
C++
Which web development tools would I use if I wanted my web page to have specific colors and style?
HTML
CSS
Javascript
PHP
The difference between a beginning tag and ending tag is the...
/
\
;
:
A web document must have which of the following tags?(multiple choice qn)
<html>
<body>
<p>
<img>
<head>
To "style" a font in a specific type, which "property" would I use?
font-style
font-type
font-family
font-"name of font"
The structure of an html document will fall in between which tags?
<body></body>
<head></head>
<title></title>
<p></p>
Change the border size of the body or image
border-style
border-width
border-color
width
sets the element to one side of the page
margin
width
float
height
sets the color of words in a paragraph
h1 {
color: pink;
}
img {
color: pink;
}
body {
color: pink;
}
p {
color: pink;
}
What does a class do?
adds color to words
adds style to specific elements
adds style to a whole page
adds a lot more work
Select the rule set to make all the text in your web page blue and centered.
p {
color: blue;
}
body {
text-align: left;
color: blue;
}
p {
text-align: center;
color: blue;
}
body {
text-align: center;
color: blue;
}
Which selector will change the font of the text?
font-size
text-align
font-famiy
text-decoration
Which rule set would change the font size to 24?
font-size: 24
size: 24;
font-size: 24;
font size: 24;
Which tag is used to add an image?
<image>
<img>
<<img>>
</image>
What symbol should you use to target an id in css?
.
+
id
#
What is the correct syntax to change the background color with css?
background-color: purple;
background-color = "purple";
backgroundcolor=orange
change-background-color: purple
What is missing from this HTML skeleton?
<!DOCTYPE html>
<html>
<body>
</body>
</html>
<head></head>
<div></div>
<img></img>
<head>
What is the correct HTML for making a checkbox?
<checkbox>
<input type="checkbox">
<check>
<input type="check">
What is the correct HTML for making a drop-down list?
<list>
<input type="dropdown">
<input type="list">
<select>
1.Which of the following is the correct tag to create a text box?
<input> text </input>
<text>
<input = “text”>
<input type = “text”>
Freya and Leo are helping Benjamin design a website for a local community center. What is the main purpose of web accessibility?
To make websites look more attractive
To ensure websites are usable by people with disabilities
To increase website loading speed
To improve website security
In what attribute of the <form> tag is the form handler stated?
method
server
action
type
Is <input type="combobox"> a valid HTML Form statement.
True
False
6. The web developer wants to make the "My Page" text larger. Which TWO of the following would work? (Choose TWO)
Use <h6> instead of <h3>
Use <h1> instead of <h3>
Put the "My Page" text inside the tags
Use CSS to set the font-size property of the h3 tag
5. What code in the stylesheet could have made the text green? (Choose TWO)
What is a function in JavaScript?
A piece of code that can be called by other parts of your program
A variable that stores numbers
A loop that executes a set number of times
An error message
How do you create a function in JavaScript?
function myFunction()
function = myFunction()
new function = myFunction()
create function myFunction()
