Web Development MCQs: A Comprehensive Guide
Introduction
Web development has become a crucial skill in our increasingly digital world. Whether you’re looking to build your own website, start a tech career, or just want to understand how the internet works, web development is the key. But mastering this field requires more than just watching tutorials and reading articles. That’s where multiple-choice questions (MCQs) come into play—they’re an excellent way to test your knowledge and identify areas for improvement.
In this guide, we’ll cover a wide range of web development topics, from basic HTML to advanced JavaScript and API integration. Whether you’re a beginner or a seasoned developer, these MCQs will help you solidify your understanding and prepare for exams or interviews. So, let’s dive in!
Basic to Advanced HTML and CSS MCQs
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the building blocks of web development. They define the structure and style of a web page, respectively. Here are some MCQs to test your knowledge:
1. What does HTML stand for?
- A) Hyper Text Markup Language
- B) Home Tool Markup Language
- C) Hyperlinks and Text Markup Language
- D) Hyper Tool Markup Language
Answer: A) Hyper Text Markup Language
2. Which HTML element is used for the largest heading?
- A)
<head> - B)
<h1> - C)
<heading> - D)
<h6>
Answer: B) <h1>
3. What is the correct HTML element for inserting a line break?
- A)
<break> - B)
<br> - C)
<lb> - D)
<line>
Answer: B) <br>
4. Which attribute specifies a unique identifier for an HTML element?
- A)
class - B)
id - C)
style - D)
name
Answer: B) id
5. Which tag is used to create a hyperlink in HTML?
- A)
<a> - B)
<link> - C)
<href> - D)
<url>
Answer: A) <a>
6. How do you insert a comment in a CSS file?
- A)
/* comment */ - B)
<!-- comment --> - C)
// comment - D)
# comment
Answer: A) /* comment */
7. Which HTML attribute is used to define inline styles?
- A)
style - B)
font - C)
class - D)
styles
Answer: A) style
8. What does CSS stand for?
- A) Creative Style Sheets
- B) Cascading Style Sheets
- C) Colorful Style Sheets
- D) Computer Style Sheets
Answer: B) Cascading Style Sheets
9. How do you make the text bold in CSS?
- A)
font-weight: bold; - B)
font-style: bold; - C)
text-style: bold; - D)
text-weight: bold;
Answer: A) font-weight: bold;
10. Which HTML element is used to define an internal style sheet?
- A)
<css> - B)
<script> - C)
<style> - D)
<link>
Answer: C) <style>
11. Which property is used to change the background color in CSS?
- A)
background-color - B)
color - C)
bgcolor - D)
background
Answer: A) background-color
12. How do you center an element horizontally using CSS?
- A)
text-align: center; - B)
margin-left: auto; margin-right: auto; - C)
position: center; - D)
float: center;
Answer: B) margin-left: auto; margin-right: auto;
13. Which CSS property controls the text size?
- A)
font-style - B)
font-size - C)
text-size - D)
text-style
Answer: B) font-size
14. Which unit is NOT relative in CSS?
- A)
em - B)
rem - C)
px - D)
vw
Answer: C) px
15. How do you make each word in a text start with a capital letter in CSS?
- A)
text-transform: uppercase; - B)
text-transform: capitalize; - C)
text-style: capitalize; - D)
text-align: capitalize;
Answer: B) text-transform: capitalize;
16. Which CSS property is used to change the text color of an element?
- A)
text-color - B)
color - C)
font-color - D)
font-style
Answer: B) color
17. How can you make a list that does not display bullet points in HTML/CSS?
- A)
list-style-type: none; - B)
bullet-style: none; - C)
list-type: none; - D)
display: none;
Answer: A) list-style-type: none;
18. Which HTML element is used to display a scalar measurement within a range?
- A)
<meter> - B)
<progress> - C)
<input> - D)
<range>
Answer: A) <meter>
19. Which CSS property adds space between the content and the border of an element?
- A)
padding - B)
margin - C)
border-spacing - D)
spacing
Answer: A) padding
20. How do you apply a CSS rule to all <p> elements inside a <div> with the class "container"?
- A)
div .container p {} - B)
.container div p {} - C)
div.container p {} - D)
.container p {}
Answer: D) .container p {}
21. What is the default value of the position property in CSS?
- A)
static - B)
relative - C)
absolute - D)
fixed
Answer: A) static
22. How can you create a grid layout in CSS?
- A)
display: block; - B)
display: flex; - C)
display: grid; - D)
display: table;
Answer: C) display: grid;
23. Which pseudo-class targets the first child element of a parent?
- A)
:first - B)
:first-child - C)
:nth-child(1) - D)
:only-child
Answer: B) :first-child
24. Which CSS property is used to control the stacking order of elements?
- A)
z-index - B)
order - C)
stack-order - D)
layer
Answer: A) z-index
25. How do you make a flex container with its items distributed evenly across the container's width in CSS?
- A)
justify-content: space-between; - B)
justify-content: flex-start; - C)
align-items: stretch; - D)
align-content: center;
Answer: A) justify-content: space-between;
Basic to Advanced JavaScript Essentials MCQs
JavaScript is the scripting language that brings web pages to life. It allows you to create interactive elements, control multimedia, animate images, and much more.
1. What is the correct syntax for referring to an external script called "app.js"?
- A)
<script href="app.js"></script> - B)
<script src="app.js"></script> - C)
<script ref="app.js"></script> - D)
<script name="app.js"></script>
Answer: B) <script src="app.js"></script>
2. Which of the following is the correct way to create a function in JavaScript?
- A)
function myFunction() {} - B)
function:myFunction() {} - C)
function = myFunction() {} - D)
function => myFunction() {}
Answer: A) function myFunction() {}
3. Which built-in method removes the last element from an array and returns that element?
- A)
last() - B)
get() - C)
pop() - D)
remove()
Answer: C) pop()
4. How do you write a comment in JavaScript?
- A)
<!-- This is a comment --> - B)
// This is a comment - C)
/* This is a comment */ - D) Both B and C
Answer: D) Both B and C
5. Which operator is used to assign a value to a variable?
- A)
* - B)
- - C)
= - D)
x
Answer: C) =
6. How do you find the number with the highest value of x and y in JavaScript?
- A)
Math.ceil(x, y) - B)
Math.max(x, y) - C)
Math.high(x, y) - D)
ceil(x, y)
Answer: B) Math.max(x, y)
7. Which event occurs when the user clicks on an HTML element?
- A)
onchange - B)
onclick - C)
onmouseclick - D)
onmouseover
Answer: B) onclick
8. What is the correct way to write a JavaScript array?
- A)
var colors = "red", "green", "blue"; - B)
var colors = (1:"red", 2:"green", 3:"blue"); - C)
var colors = ["red", "green", "blue"]; - D)
var colors = "red", "green", "blue";
Answer: C) var colors = ["red", "green", "blue"];
9. How do you declare a JavaScript variable?
- A)
variable carName; - B)
var carName; - C)
v carName; - D)
string carName;
Answer: B) var carName;
10. Which of the following is not a reserved word in JavaScript?
- A)
interface - B)
throws - C)
program - D)
short
Answer: C) program
11. Which method is used to convert JSON data to a JavaScript object?
- A)
JSON.parse() - B)
JSON.convert() - C)
JSON.stringify() - D)
JSON.objectify()
Answer: A) JSON.parse()
12. What will the following code output: console.log(typeof null);?
- A)
null - B)
undefined - C)
object - D)
number
Answer: C) object
13. How can you detect the client's browser name?
- A)
navigator.appName - B)
browser.name - C)
window.browser.name - D)
client.navName
Answer: A) navigator.appName
14. Which of the following is the correct way to check if a variable "x" is not equal to 5?
- A)
x != 5 - B)
x <> 5 - C)
x === 5 - D)
x not= 5
Answer: A) x != 5
15. Which method adds one or more elements to the end of an array and returns the new length of the array?
- A)
push() - B)
pop() - C)
add() - D)
join()
Answer: A) push()
16. What is the result of the expression 2 + '2' in JavaScript?
- A)
22 - B)
4 - C)
NaN - D)
Error
Answer: A) 22
17. Which of the following loops will execute the code block at least once?
- A)
for - B)
while - C)
do...while - D)
if
Answer: C) do...while
18. What will console.log(0.1 + 0.2 === 0.3); output in JavaScript?
- A)
true - B)
false - C)
undefined - D)
null
Answer: B) false
19. Which of the following methods is used to select an HTML element by its ID?
- A)
getElementById() - B)
querySelectorAll() - C)
getElementByClass() - D)
getElementByTag()
Answer: A) getElementById()
20. How do you add a comment in JavaScript that spans multiple lines?
- A)
// This is a comment - B)
<!-- This is a comment --> - C)
/* This is a comment */ - D)
/// This is a comment
Answer: C) /* This is a comment */
21. What will the following code output: console.log([1, 2, 3] + [4, 5, 6]);?
- A)
[1, 2, 3, 4, 5, 6] - B)
1,2,34,5,6 - C)
SyntaxError - D)
undefined
Answer: B) 1,2,34,5,6
22. How can you create a promise in JavaScript?
- A)
var promise = new Promise(); - B)
var promise = new Promise(function(resolve, reject) {}); - C)
var promise = new Promiser(); - D)
var promise = new PromiseResolver();
Answer: B) var promise = new Promise(function(resolve, reject) {});
23. Which keyword is used to prevent a block of code from running?
- A)
break - B)
stop - C)
return - D)
continue
Answer: A) break
24. Which of the following methods is used to handle exceptions in JavaScript?
- A)
catch() - B)
try...catch - C)
exception() - D)
handle()
Answer: B) try...catch
25. What will be the output of the following code?
let a = 10;
let b = a;
b = 20;
console.log(a);
- A)
10 - B)
20 - C)
undefined - D)
ReferenceError
Answer: A) 10
Responsive Design and Bootstrap MCQs
Responsive design ensures that your website looks good on all devices, while Bootstrap is a popular framework that simplifies the process of creating responsive web pages.
1. What is responsive web design?
- A) A design that looks the same on all devices
- B) A design that adapts to different screen sizes
- C) A design that requires a specific screen size
- D) A design that uses only fixed layouts
Answer: B) A design that adapts to different screen sizes
2. Which of the following is NOT a characteristic of responsive web design?
- A) Fluid grids
- B) Fixed-width layouts
- C) Media queries
- D) Flexible images
Answer: B) Fixed-width layouts
3. What does the @media the rule in CSS do?
- A) It applies styles based on the media type and features
- B) It creates fixed layouts
- C) It prevents styles from being applied to certain devices
- D) It adds scripts to a webpage
Answer: A) It applies styles based on the media type and features
4. What is the viewport meta tag used for in responsive design?
- A) To specify the width of the device's screen
- B) To control the layout on mobile browsers
- C) To change the color of the page on mobile devices
- D) To disable zooming on mobile devices
Answer: B) To control the layout on mobile browsers
5. Which unit is most commonly used for flexible layouts in responsive design?
- A)
px - B)
em - C)
rem - D)
%
Answer: D) %
6. In Bootstrap, which class is used to create a responsive fixed-width container?
- A)
.container-fluid - B)
.container-fixed - C)
.container-responsive - D)
.container
Answer: D) .container
7. Which Bootstrap class is used to make an image responsive?
- A)
.img-responsive - B)
.img-fluid - C)
.img-fixed - D)
.img-auto
Answer: B) .img-fluid
8. What is the primary purpose of the Bootstrap grid system?
- A) To create fixed layouts
- B) To create a flexible and responsive layout
- C) To add padding to elements
- D) To manage color schemes
Answer: B) To create a flexible and responsive layout
9. Which class would you use in Bootstrap to hide an element on extra small devices only?
- A)
.d-none - B)
.d-xs-none - C)
.d-sm-none - D)
.d-xl-none
Answer: A) .d-none
10. What is the maximum number of columns in the Bootstrap grid system?
- A) 10
- B) 12
- C) 16
- D) 24
Answer: B) 12
11. Which Bootstrap class is used to create a responsive navigation bar?
- A)
.navbar-default - B)
.navbar-responsive - C)
.navbar - D)
.navbar-expand-lg
Answer: D) .navbar-expand-lg
12. How do you make a button block level in Bootstrap?
- A)
.btn-block - B)
.btn-lg - C)
.btn-inline - D)
.btn-responsive
Answer: A) .btn-block
13. Which Bootstrap class is used to align text to the center?
- A)
.text-center - B)
.align-center - C)
.text-middle - D)
.text-align-center
Answer: A) .text-center
14. What does the .col-md-4 class in Bootstrap represent?
- A) An element that takes up 4 columns on medium screens and above
- B) An element that takes up 4 columns on all screen sizes
- C) An element that takes up 4 columns on small screens only
- D) An element that hides on medium screens
Answer: A) An element that takes up 4 columns on medium screens and above
15. How can you create a responsive table in Bootstrap?
- A)
.table-responsive - B)
.table-fluid - C)
.table-responsive-fluid - D)
.table-auto
Answer: A) .table-responsive
16. Which class in Bootstrap is used to make the text uppercase?
- A)
.text-uppercase - B)
.text-capitalize - C)
.text-transform - D)
.text-upper
Answer: A) .text-uppercase
17. Which of the following is NOT a breakpoint in Bootstrap?
- A)
xs - B)
sm - C)
md - D)
xxl
Answer: D) xxl
18. Which Bootstrap component would you use to create a dropdown menu?
- A)
.dropdown - B)
.dropdown-menu - C)
.nav-dropdown - D)
.menu-dropdown
Answer: A) .dropdown
19. What is the purpose of the .row class in Bootstrap?
- A) To create a row in the grid system
- B) To add horizontal padding to elements
- C) To align elements vertically
- D) To hide elements on small screens
Answer: A) To create a row in the grid system
20. Which class would you use to create a fixed-width container that spans the entire width of the viewport on small devices but is fixed on larger devices?
- A)
.container-fluid - B)
.container-sm - C)
.container-lg - D)
.container
Answer: D) .container
21. What is the main purpose of Bootstrap's flex utility classes?
- A) To create complex layouts
- B) To manage spacing between elements
- C) To align and distribute space among items in a container
- D) To add animations to elements
Answer: C) To align and distribute space among items in a container
22. Which Bootstrap class would you use to justify-content between items in a flex container?
- A)
.justify-content-around - B)
.justify-content-between - C)
.justify-content-center - D)
.justify-content-start
Answer: B) .justify-content-between
23. In Bootstrap, how would you vertically align items in a flex container?
- A)
.align-items-start - B)
.align-items-center - C)
.align-items-end - D) All of the above
Answer: D) All of the above
24. Which of the following classes is used to create a flexbox container in Bootstrap?
- A)
.flexbox - B)
.flex - C)
.d-flex - D)
.d-flexbox
Answer: C) .d-flex
25. How would you hide an element on medium screens and up in Bootstrap?
- A)
.d-none d-md-block - B)
.d-md-none - C)
.d-none d-md-none - D)
.d-sm-none
Answer: B) .d-md-none
Front-End Frameworks MCQs
Front-end frameworks like React, Angular, and Vue are essential tools for modern web development. They simplify the process of building complex, interactive web applications.
1. Which of the following is NOT a front-end framework?
- A) Angular
- B) React
- C) Laravel
- D) Vue.js
Answer: C) Laravel
2. Which of the following is a JavaScript library often associated with React for managing application state?
- A) Vuex
- B) Redux
- C) MobX
- D) Flux
Answer: B) Redux
3. Which front-end framework uses a virtual DOM to improve performance?
- A) Angular
- B) React
- C) Ember.js
- D) Backbone.js
Answer: B) React
4. What is the primary language used to build components in Angular?
- A) JavaScript
- B) TypeScript
- C) Python
- D) PHP
Answer: B) TypeScript
5. In which framework would you find directives like v-for, v-if, and v-bind?
- A) Angular
- B) React
- C) Vue.js
- D) Ember.js
Answer: C) Vue.js
6. Which of the following is a key feature of Angular?
- A) JSX
- B) Two-way data binding
- C) Flux architecture
- D) Hooks
Answer: B) Two-way data binding
7. Which framework introduced the concept of components as reusable UI elements?
- A) Backbone.js
- B) React
- C) Ember.js
- D) Angular
Answer: B) React
8. Which of the following is a feature of Vue.js?
- A) Virtual DOM
- B) One-way data binding only
- C) No support for components
- D) No support for transitions
Answer: A) Virtual DOM
9. Which framework uses a templating system called Handlebars by default?
- A) Ember.js
- B) React
- C) Angular
- D) Vue.js
Answer: A) Ember.js
10. Which of the following is a CSS framework commonly used alongside front-end JavaScript frameworks?
- A) Flask
- B) Bootstrap
- C) Laravel
- D) Django
Answer: B) Bootstrap
11. Which front-end framework uses JSX, a syntax extension that allows mixing HTML with JavaScript?
- A) Angular
- B) React
- C) Vue.js
- D) Backbone.js
Answer: B) React
12.
Which of the following is a lifecycle method in React?- A)
componentDidMount - B)
ngOnInit - C)
v-on - D)
didLoad
Answer: A) componentDidMount
13. What is the purpose of Angular's ngFor directive?
- A) To create a for loop in HTML
- B) To conditionally render elements
- C) To iterate over an array and render its elements
- D) To bind a function to an event
Answer: C) To iterate over an array and render its elements
14. Which of the following is true about Vue.js?
- A) It is based on the MVC architecture
- B) It doesn't support TypeScript
- C) It supports both one-way and two-way data binding
- D) It requires a server-side environment to run
Answer: C) It supports both one-way and two-way data binding
15. Which command is used to create a new Angular project using the Angular CLI?
- A)
ng new - B)
angular create - C)
ng create - D)
create angular-app
Answer: A) ng new
16. Which feature of React allows for side effects like data fetching in functional components?
- A)
useState - B)
useEffect - C)
useContext - D)
useReducer
Answer: B) useEffect
17. Which method in Vue.js is used to register components globally?
- A)
Vue.use() - B)
Vue.component() - C)
Vue.register() - D)
Vue.createComponent()
Answer: B) Vue.component()
18. Which framework uses services to inject dependencies into components?
- A) React
- B) Vue.js
- C) Angular
- D) Backbone.js
Answer: C) Angular
19. Which of the following is a key concept in Ember.js?
- A) Components
- B) Services
- C) Routes
- D) Modules
Answer: C) Routes
20. In React, what is the purpose of the key prop when rendering a list of elements?
- A) To uniquely identify elements for reordering or updating
- B) To provide a label for each element
- C) To bind data to elements
- D) To handle events on elements
Answer: A) To uniquely identify elements for reordering or updating
Advanced Level
21. What is the purpose of Angular's RouterModule?
- A) To create HTTP requests
- B) To define routes and navigation in an Angular app
- C) To manage state in Angular
- D) To inject dependencies into components
Answer: B) To define routes and navigation in an Angular app
22. Which of the following is a valid Vue.js directive for handling events?
- A)
v-on:click - B)
@click - C) Both A and B
- D)
v-event:click
Answer: C) Both A and B
23. Which concept in React allows you to pass data from a parent component to a child component?
- A) State
- B) Props
- C) Context
- D) Hooks
Answer: B) Props
24. Which architecture does Angular primarily follow?
- A) MVVM (Model-View-ViewModel)
- B) MVC (Model-View-Controller)
- C) Flux
- D) MVA (Model-View-Adapter)
Answer: A) MVVM (Model-View-ViewModel)
25. In React, which hook is used to manage the local state in a functional component?
- A)
useContext - B)
useEffect - C)
useState - D)
useReducer
Answer: C) useState
Back-End Development MCQs
Back-end development involves the server side of web applications, where data processing and storage occur. Popular languages for back-end development include Node.js, Python, and PHP.
1. What is the primary purpose of back-end development?
- A) To design the user interface
- B) To manage the server, database, and application logic
- C) To create animations
- D) To optimize SEO
Answer: B) To manage the server, database, and application logic
2. Which of the following languages is commonly used for back-end development?
- A) HTML
- B) CSS
- C) JavaScript
- D) Python
Answer: D) Python
3. Which of the following is a back-end framework for Node.js?
- A) React
- B) Angular
- C) Express.js
- D) Vue.js
Answer: C) Express.js
4. What is the role of a database in back-end development?
- A) To store and retrieve data
- B) To manage the front-end layout
- C) To create static web pages
- D) To handle animations
Answer: A) To store and retrieve data
5. Which of the following databases is a NoSQL database?
- A) MySQL
- B) PostgreSQL
- C) MongoDB
- D) SQLite
Answer: C) MongoDB
6. What does REST stand for in the context of web services?
- A) Random Extended Service Transfer
- B) Representational State Transfer
- C) Real-time Secure Transaction
- D) Reliable State Transmission
Answer: B) Representational State Transfer
7. Which protocol is most commonly used for communication between a client and a server in a web application?
- A) FTP
- B) SMTP
- C) HTTP/HTTPS
- D) POP3
Answer: C) HTTP/HTTPS
8. Which of the following is a popular web server used in back-end development?
- A) Apache
- B) Nginx
- C) IIS
- D) All of the above
Answer: D) All of the above
9. What is middleware in the context of back-end development?
- A) A tool to manage database connections
- B) Software that provides common services and capabilities to applications outside of what's offered by the operating system
- C) A type of database management system
- D) A framework for developing front-end applications
Answer: B) Software that provides common services and capabilities to applications outside of what's offered by the operating system
10. Which command is used to install packages in a Node.js application?
- A)
npm install - B)
node install - C)
yarn install - D)
install node
Answer: A) npm install
11. What is the purpose of an API in back-end development?
- A) To manage client-side rendering
- B) To define the communication protocol between different software components
- C) To create stylesheets for web pages
- D) To handle user input on web forms
Answer: B) To define the communication protocol between different software components
12. Which of the following is a popular relational database management system (RDBMS)?
- A) MongoDB
- B) Cassandra
- C) MySQL
- D) Redis
Answer: C) MySQL
13. In the context of RESTful APIs, what does CRUD stand for?
- A) Create, Retrieve, Update, Delete
- B) Compile, Run, Update, Deploy
- C) Create, Read, Update, Deploy
- D) Compile, Retrieve, Update, Delete
Answer: A) Create, Retrieve, Update, Delete
14. Which of the following is a common back-end language used in enterprise environments?
- A) Java
- B) HTML
- C) CSS
- D) JavaScript (without Node.js)
Answer: A) Java
15. Which HTTP method is typically used to update a resource on a server?
- A) GET
- B) POST
- C) PUT
- D) DELETE
Answer: C) PUT
16. What is a key characteristic of microservices architecture?
- A) Monolithic structure
- B) Centralized database
- C) Independent, loosely coupled services
- D) Single-tier application
Answer: C) Independent, loosely coupled services
17. Which of the following is a commonly used tool for version control in back-end development?
- A) Jenkins
- B) Git
- C) Docker
- D) Kubernetes
Answer: B) Git
18. In back-end development, what is the purpose of the .env file?
- A) To define environment-specific variables like API keys and database URLs
- B) To store HTML and CSS files
- C) To manage front-end dependencies
- D) To configure JavaScript frameworks
Answer: A) To define environment-specific variables like API keys and database URLs
19. Which of the following is an example of a backend-as-a-service (BaaS) platform?
- A) Firebase
- B) Heroku
- C) AWS Lambda
- D) Docker
Answer: A) Firebase
20. Which term describes the process of deploying multiple instances of an application to handle the load?
- A) Load balancing
- B) Caching
- C) Sharding
- D) Routing
Answer: A) Load balancing
21. Which of the following is a feature of Docker in back-end development?
- A) Containerization of applications for consistent environments across development, testing, and production
- B) Real-time collaboration for code editing
- C) Automated browser testing
- D) Database optimization
Answer: A) Containerization of applications for consistent environments across development, testing, and production
22. Which SQL command is used to remove a table from a database?
- A)
DELETE - B)
DROP - C)
TRUNCATE - D)
REMOVE
Answer: B) DROP
23. In Node.js, which module is used to create a web server?
- A)
express - B)
http - C)
fs - D)
net
Answer: B) http
24. Which of the following describes a RESTful API's stateless nature?
- A) Each request from a client to a server must contain all the information the server needs to fulfill that request
- B) The server remembers client data between requests
- C) The client state is stored on the server
- D) Each request is dependent on the previous request
Answer: A) Each request from a client to a server must contain all the information the server needs to fulfill that request
25. What is the purpose of using OAuth in back-end development?
- A) To authenticate users and grant access to resources without sharing credentials
- B) To optimize database queries
- C) To manage front-end routing
- D) To create user interfaces
Answer: A) To authenticate users and grant access to resources without sharing credentials
Web Development Tools and IDEs MCQs
Web developers use various tools and Integrated Development Environments (IDEs) to write, test, and deploy code.
1. Which of the following is an Integrated Development Environment (IDE) commonly used for web development?
- A) Adobe Photoshop
- B) Visual Studio Code
- C) Blender
- D) AutoCAD
Answer: B) Visual Studio Code
2. What is the primary function of Git in web development?
- A) Designing web pages
- B) Version control
- C) Optimizing images
- D) Creating animations
Answer: B) Version control
3. Which of the following is a popular browser developer tool for inspecting and debugging HTML, CSS, and JavaScript?
- A) Adobe XD
- B) Chrome DevTools
- C) Unity
- D) Microsoft Word
Answer: B) Chrome DevTools
4. Which command-line tool is used to install, update, and manage Node.js packages?
- A) npm
- B) pip
- C) apt-get
- D) brew
Answer: A) npm
5. Which of the following text editors is known for its minimalist interface and powerful plugins?
- A) Sublime Text
- B) Microsoft Word
- C) Excel
- D) Paint
Answer: A) Sublime Text
6. Which tool would you use to automate repetitive tasks in web development, such as minifying CSS or bundling JavaScript?
- A) Gulp
- B) Figma
- C) Sketch
- D) Canva
Answer: A) Gulp
7. Which of the following is a version control system commonly used in web development?
- A) SVN
- B) FTP
- C) SSH
- D) HTTP
Answer: A) SVN
8. Which plugin manager is widely used with Visual Studio Code to enhance its functionality?
- A) Extensions Marketplace
- B) Theme Gallery
- C) Font Manager
- D) Plugin Studio
Answer: A) Extensions Marketplace
9. What is the purpose of using a code linting tool like ESLint in web development?
- A) To optimize images
- B) To check for code errors and enforce coding standards
- C) To manage server configurations
- D) To create wireframes
Answer: B) To check for code errors and enforce coding standards
10. Which IDE is specifically tailored for PHP development?
- A) PyCharm
- B) IntelliJ IDEA
- C) Eclipse
- D) PhpStorm
Answer: D) PhpStorm
11. Which of the following is a build tool that automates the process of converting source code into a software package?
- A) Maven
- B) Git
- C) FTP
- D) Photoshop
Answer: A) Maven
12. Which feature in Visual Studio Code allows developers to share their code and collaborate in real time?
- A) Live Share
- B) CodeLens
- C) IntelliCode
- D) Snippets
Answer: A) Live Share
13. Which of the following tools is used for containerization and allows developers to package applications with all their dependencies?
- A) Docker
- B) Jenkins
- C) GitHub
- D) Ansible
Answer: A) Docker
14. What is the main purpose of using a task runner like Grunt in web development?
- A) To automate repetitive tasks like minification and compilation
- B) To design user interfaces
- C) To manage databases
- D) To create REST APIs
Answer: A) To automate repetitive tasks like minification and compilation
15. Which of the following is a popular package manager for front-end web development that helps manage libraries and dependencies?- A) npm
- B) Bower
- C) pip
- D) Composer
Answer: B) Bower
16. Which of the following IDEs is known for its powerful support for Python development?- A) NetBeans
- B) WebStorm
- C) PyCharm
- D) Dreamweaver
Answer: C) PyCharm
17. Which tool would you use to deploy and manage multiple versions of your web application?- A) Jenkins
- B) GitHub Pages
- C) Docker
- D) Ansible
Answer: B) GitHub Pages
18. Which of the following is a popular cloud-based IDE?- A) Eclipse IDE
- B) Atom
- C) Repl. it
- D) Brackets
Answer: C) Repl. it
19. Which feature of Sublime Text allows you to quickly jump to any line, word, or symbol in your code?- A) Goto Anything
- B) Quick Search
- C) Fast Find
- D) Symbol Navigator
Answer: A) Goto Anything
20. Which of the following tools is designed to help developers with continuous integration and continuous deployment (CI/CD)?
- A) Jenkins
- B) Gulp
- C) Webpack
- D) Babel
Answer: A) Jenkins
- A) Webpack
- B) Grunt
- C) npm
- D) Git
Answer: A) Webpack
22. Which Visual Studio Code extension provides AI-powered code completions and recommendations?
- A) IntelliCode
- B) Live Share
- C) Prettier
- D) ESLint
Answer: A) IntelliCode
23. Which of the following tools is primarily used for testing and debugging APIs?
- A) Postman
- B) Fiddler
- C) Chrome DevTools
- D) DBeaver
Answer: A) Postman
24. What is the main advantage of using a version control system like Git in web development?
- A) It provides real-time collaboration
- B) It allows tracking changes in the codebase and collaborating with others
- C) It automatically optimizes code performance
- D) It generates reports and analytics
Answer: B) It allows tracking changes in the codebase and collaborating with others
25. Which of the following tools helps in transpiring modern JavaScript (ES6+) to ensure compatibility with older browsers?
- A) Babel
- B) Gulp
- C) Webpack
- D) Parcel
Answer: A) Babel
Web Development Best Practices MCQs
Following best practices ensures that your web development projects are efficient, maintainable, and secure.
1. What is the main benefit of using semantic HTML tags?
- A) They improve the appearance of the website
- B) They make the website load faster
- C) They enhance the accessibility and SEO of the website
- D) They enable the use of external libraries
Answer: C) They enhance the accessibility and SEO of the website
2. Which of the following is a best practice for writing clean and maintainable CSS?
- A) Use inline styles extensively
- B) Avoid commenting on your code
- C) Use descriptive class names and organize styles modularly
- D) Use IDs instead of classes for styling
Answer: C) Use descriptive class names and organize styles modularly
3. Why is it important to minimize the number of HTTP requests in web development?
- A) To reduce the complexity of the code
- B) To improve the speed and performance of the website
- C) To increase the functionality of the website
- D) To enhance the security of the website
Answer: B) To improve the speed and performance of the website
4. Which of the following techniques helps to ensure responsive design across different devices?
- A) Using fixed-width layouts
- B) Avoiding media queries
- C) Using flexible grid layouts and media queries
- D) Designing for a single screen size only
Answer: C) Using flexible grid layouts and media queries
5. What is the purpose of using a CSS preprocessor like SASS or LESS?
- A) To directly manipulate the DOM
- B) To write more complex and maintainable stylesheets with variables and functions
- C) To manage JavaScript dependencies
- D) To speed up HTML rendering
Answer: B) To write more complex and maintainable stylesheets with variables and functions
6. Why is it important to validate user input on both the client and server sides?
- A) To ensure the layout is consistent across browsers
- B) To reduce the number of database queries
- C) To protect against security vulnerabilities and ensure data integrity
- D) To improve the visual appeal of forms
Answer: C) To protect against security vulnerabilities and ensure data integrity
7. Which of the following is a best practice for optimizing images for the web?
- A) Upload images directly from the camera
- B) Use high-resolution images without compression
- C) Compress images and use appropriate formats like WebP or JPEG
- D) Avoid using images
Answer: C) Compress images and use appropriate formats like WebP or JPEG
8. What is the purpose of using version control systems like Git in web development?
- A) To automatically deploy websites
- B) To track changes, collaborate with team members, and manage project versions
- C) To optimize database queries
- D) To enhance the website's SEO
Answer: B) To track changes, collaborate with team members, and manage project versions
9. Which of the following is an important consideration when writing JavaScript code?
- A) Avoid using functions
- B) Use global variables extensively
- C) Write modular, reusable, and well-documented code
- D) Use outdated libraries for compatibility
Answer: C) Write modular, reusable, and well-documented code
10. Why is it recommended to use async and defer attributes when including JavaScript files in an HTML document?
- A) To disable JavaScript in certain browsers
- B) To ensure JavaScript files are loaded in a blocking manner
- C) To improve page load performance by not blocking HTML parsing
- D) To make JavaScript files load before HTML elements
Answer: C) To improve page load performance by not blocking HTML parsing
11. Which practice helps in ensuring cross-browser compatibility of a website?
- A) Writing browser-specific code
- B) Testing the website only on the latest browser versions
- C) Using standardized and widely supported web technologies
- D) Ignoring older browser versions
Answer: C) Using standardized and widely supported web technologies
12. What is the purpose of using a Content Delivery Network (CDN) for serving static assets like images and scripts?
- A) To reduce server load and improve asset delivery speed
- B) To store all assets locally on the user's device
- C) To minimize the need for external APIs
- D) To restrict access to certain regions
Answer: A) To reduce server load and improve asset delivery speed
13. Why is it a best practice to use HTTPS instead of HTTP for your website?
- A) It improves the website's loading speed
- B) It helps in reducing the server cost
- C) It encrypts data, providing better security for user information
- D) It makes the website compatible with all browsers
Answer: C) It encrypts data, providing better security for user information
14. Which of the following is a best practice for managing dependencies in a web project?
- A) Manually downloading and linking libraries
- B) Using a package manager like npm or Yarn
- C) Including all libraries directly in the HTML file
- D) Avoiding external libraries altogether
Answer: B) Using a package manager like npm or Yarn
15. What is the main purpose of caching in web development?
- A) To store data in the cloud
- B) To speed up the retrieval of frequently accessed resources
- C) To reduce the amount of code needed for the website
- D) To increase the number of HTTP requests
Answer: B) To speed up the retrieval of frequently accessed resources
16. Why is it important to use a mobile-first approach in responsive web design?
- A) To focus on desktop users
- B) To prioritize the design for the most common devices used today
- C) To make the website heavier
- D) To reduce development time
Answer: B) To prioritize the design for the most common devices used today
17. Which of the following is a best practice when handling forms in web development?
- A) Skip server-side validation if client-side validation is present
- B) Use the GET method for forms that modify data
- C) Always use the POST method for sensitive or large data submissions
- D) Never use CAPTCHA for user verification
Answer: C) Always use the POST method for sensitive or large data submissions
18. What is the main reason for using minification techniques on CSS and JavaScript files?
- A) To make the code easier to read
- B) To reduce file size and improve load times
- C) To increase the number of files in a project
- D) To introduce bugs into the code
Answer: B) To reduce file size and improve load times
19. Which of the following practices helps improve the accessibility of a web page?
- A) Using only images for navigation
- B) Avoiding the use of
altattributes for images - C) Using semantic HTML and providing alternative text for non-text content
- D) Relying on color alone to convey information
Answer: C) Using semantic HTML and providing alternative text for non-text content
20. What is the advantage of using lazy loading for images and other resources?
- A) It preloads all images before the page is rendered
- B) It only loads images and resources when they are needed, reducing initial load time
- C) It increases the number of HTTP requests
- D) It makes the page load slower to save bandwidth
Answer: B) It only loads images and resources when they are needed, reducing initial load time
21. Why is it important to follow the principle of "progressive enhancement" in web development?
- A) To ensure that web applications are accessible to users with different levels of browser capabilities
- B) To focus only on modern browsers
- C) To reduce the amount of code needed
- D) To limit the website's functionality to older browsers
Answer: A) To ensure that web applications are accessible to users with different levels of browser capabilities
22. What is the purpose of setting up continuous integration (CI) in a web development project?
- A) To manually test all code changes
- B) To automate the process of testing, building, and deploying code changes
- C) To increase the complexity of the development process
- D) To avoid using version control systems
Answer: B) To automate the process of testing, building, and deploying code changes
23. Which of the following is a best practice for managing state in a single-page application (SPA)?
- A) Avoid using any state management tools
- B) Manage all state within individual components
- C) Use a centralized state management system like Redux or Vuex
- D) Rely solely on global variables
Answer: C) Use a centralized state management system like Redux or Vuex
24. What is the primary benefit of using responsive web design techniques?- A) To ensure the website looks identical on all devices
- B) To create separate designs for each device type
- C) To provide an optimal viewing experience across a wide range of devices
- D) To avoid using media queries
Answer: C) To provide an optimal viewing experience across a wide range of devices
25. Which of the following best practices helps improve web application security?- A) Hardcoding sensitive information like API keys directly in the code
- B) Regularly updating dependencies and applying security patches
- C) Ignoring SSL/TLS for secure communication
- D) Using outdated libraries with known vulnerabilities
Advanced JavaScript and ES6 MCQs
JavaScript has evolved significantly, and ES6 introduced many new features that have become standard in modern web development.
1. What does the let keyword do in JavaScript?
- A) Declares a global variable
- B) Declares a block-scoped local variable
- C) Declares a constant variable
- D) Declares a variable that cannot be changed
Answer: B) Declares a block-scoped local variable
2. Which of the following is a valid way to define a function in ES6?
- A)
function myFunc() { /* code */ } - B)
var myFunc = function() { /* code */ } - C)
const myFunc = () => { /* code */ } - D) All of the above
Answer: D) All of the above
3. What is the output of the following code snippet?
console.log(0.1 + 0.2 === 0.3);- A)
true - B)
false - C)
undefined - D)
NaN
Answer: B) false
4. How does the const keyword differ from let in JavaScript?
- A)
constcreates a mutable variable, whileletcreates an immutable variable - B)
constcreates a block-scoped variable that cannot be reassigned, whileletcan be reassigned - C)
constis used to declare global variables, whileletis used for local variables - D) There is no difference between
constandlet
Answer: B) const creates a block-scoped variable that cannot be reassigned, while let can be reassigned
5. What is the purpose of the spread operator (...) in ES6?
- A) To spread elements of an array or object into individual elements
- B) To merge two arrays into one
- C) To create a new array by copying elements from an existing array
- D) All of the above
Answer: A) To spread elements of an array or object into individual elements
6. Which method is used to concatenate arrays in ES6?
- A)
Array.concat() - B)
Array.join() - C)
Array.push() - D)
Array.splice()
Answer: A) Array.concat()
7. What does the async the keyword indicates in front of a function?
- A) The function is asynchronous and returns a promise
- B) The function is synchronous and executes immediately
- C) The function will always return
undefined - D) The function cannot contain
awaitexpressions
Answer: A) The function is asynchronous and returns a promise
8. What is the purpose of the await keyword in JavaScript?
- A) To pause the execution of an asynchronous function until a promise is resolved
- B) To declare a function that runs asynchronously
- C) To create a new promise
- D) To handle errors in asynchronous functions
Answer: A) To pause the execution of an asynchronous function until a promise is resolved
9. How do you destructure an object in ES6?
- A)
let { name, age } = person; - B)
let name = person.name; let age = person.age; - C)
let name, age = person; - D)
let person = { name, age };
Answer: A) let { name, age } = person;
10. What is the output of the following code snippet?
let arr = [1, 2, 3];
arr.push(...[4, 5]);
console.log(arr);
- A)
[1, 2, 3, [4, 5]] - B)
[1, 2, 3, 4, 5] - C)
[1, 2, 3, 5] - D)
[1, 2, 3, 4]
Answer: B) [1, 2, 3, 4, 5]
11. What is the purpose of the Object.assign() method in ES6?
- A) To create a new object by copying properties from one or more source objects
- B) To merge arrays into a single array
- C) To define a new class
- D) To retrieve values from an object
Answer: A) To create a new object by copying properties from one or more source objects
12. What is a Promise in JavaScript?
- A) An object that represents the eventual completion or failure of an asynchronous operation
- B) A function that executes synchronously
- C) A type of loop used for asynchronous operations
- D) A special variable that stores multiple values
Answer: A) An object that represents the eventual completion or failure of an asynchronous operation
13. How can you create a class in ES6?
- A)
class MyClass { constructor() { /* code */ } } - B)
function MyClass() { /* code */ } - C)
var MyClass = { /* code */ } - D)
const MyClass = new Object();
Answer: A) class MyClass { constructor() { /* code */ } }
14. What is the purpose of the Symbol type in ES6?
- A) To create unique identifiers for object properties
- B) To define new classes
- C) To create promises
- D) To handle errors
Answer: A) To create unique identifiers for object properties
15. What does the for...of loop do in JavaScript?
- A) Iterates over the enumerable properties of an object
- B) Iterates over the elements of an iterable object (like an array)
- C) Iterates over the keys of an object
- D) Iterates over the values of an object
Answer: B) Iterates over the elements of an iterable object (like an array)
16. What is the purpose of the Object.entries() method in JavaScript?
- A) To retrieve an array of a given object's own enumerable property [key, value] pairs
- B) To define new properties on an object
- C) To merge multiple objects into one
- D) To delete properties from an object
Answer: A) To retrieve an array of a given object's own enumerable property [key, value] pairs
17. How do you use template literals in ES6?
- A)
let greeting = "Hello, ${name}"; - B)
let greeting =Hello, ${name}; - C)
let greeting = 'Hello, ${name}'; - D)
let greeting = "Hello, name";
Answer: B) let greeting = Hello, ${name};
18. What does the Array.from() method do?
- A) Creates a new array instance from an array-like or iterable object
- B) Converts an array into a string
- C) Creates a new object from an array
- D) Merges two arrays into one
Answer: A) Creates a new array instance from an array-like or iterable object
19. What is the purpose of Set in ES6?
- A) To store unique values of any type
- B) To store key-value pairs
- C) To create a new object
- D) To define new methods for arrays
Answer: A) To store unique values of any type
20. Which method is used to check if a value is present in a Set?
- A)
set.contains(value) - B)
set.has(value) - C)
set.indexOf(value) - D)
set.exists(value)
Answer: B) set.has(value)
21. What does the Array.prototype.find() method do?
- A) Returns the first element that satisfies a provided testing function
- B) Returns the index of the first element that satisfies a provided testing function
- C) Finds the maximum value in an array
- D) Finds and replaces an element in an array
Answer: A) Returns the first element that satisfies a provided testing function
22. What is the purpose of the default parameter in ES6 functions?
- A) To define default values for function parameters
- B) To set default types for parameters
- C) To automatically handle errors
- D) To default the function to synchronous behavior
Answer: A) To define default values for function parameters
23. Which method is used to iterate over the values of a Map object?
- A)
map.forEach() - B)
map.entries() - C)
map.values() - D)
map.keys()
Answer: C) map.values()
24. What does the Object.getOwnPropertyDescriptor() method return?
- A) An object describing the configuration of a property on an object
- B) The value of a property on an object
- C) A list of all properties on an object
- D) A description of an object's prototype
Answer: A) An object describing the configuration of a property on an object
25. What does the Object.freeze() method do?
- A) Prevents new properties from being added to an object
- B) Prevents existing properties from being removed or altered
- C) Makes an object immutable
- D) All of the above
Answer: D) All of the above
API Integration MCQs
APIs (Application Programming Interfaces) are used to enable different software applications to communicate with each other.
1. What does API stand for?
- A) Application Programming Interface
- B) Advanced Programming Interface
- C) Application Public Integration
- D) Automated Programming Interface
Answer: A) Application Programming Interface
2. Which HTTP method is typically used to retrieve data from an API?
- A) POST
- B) PUT
- C) GET
- D) DELETE
Answer: C) GET
3. What is an API endpoint?
- A) The URL where an API service is accessed
- B) The name of the API
- C) A method used to process data
- D) The database used by the API
Answer: A) The URL where an API service is accessed
4. What is the purpose of an API key?
- A) To encrypt data sent to an API
- B) To authenticate and authorize access to an API
- C) To format the response from an API
- D) To cache API responses
Answer: B) To authenticate and authorize access to an API
5. Which HTTP method is typically used to create new resources in an API?
- A) GET
- B) POST
- C) PUT
- D) DELETE
Answer: B) POST
6. What does the PUT method do in an API request?
- A) Updates an existing resource or creates a new resource if it does not exist
- B) Deletes a resource
- C) Retrieves data from a server
- D) Adds a new resource without replacing existing data
Answer: A) Updates an existing resource or creates a new resource if it does not exist
7. Which status code indicates a successful API request?
- A) 400
- B) 401
- C) 404
- D) 200
Answer: D) 200
8. What is a common format for API responses?
- A) XML
- B) JSON
- C) CSV
- D) All of the above
Answer: D) All of the above
9. How can you handle errors in an API response?
- A) By checking the HTTP status code and response body
- B) By ignoring the response
- C) By retrying the request indefinitely
- D) By always assuming success
Answer: A) By checking the HTTP status code and response body
10. What is an API rate limit?
- A) The maximum number of requests allowed in a given period
- B) The maximum size of a response payload
- C) The minimum number of requests required for access
- D) The maximum size of an API key
Answer: A) The maximum number of requests allowed in a given period
11. What is the purpose of using API documentation?
- A) To describe the implementation details of the API
- B) To provide information on how to use the API, including endpoints, request parameters, and response formats
- C) To store API credentials
- D) To manage API keys
Answer: B) To provide information on how to use the API, including endpoints, request parameters, and response formats
12. What is OAuth in the context of API integration?
- A) A method for encrypting API requests
- B) A framework for API request throttling
- C) An authorization protocol for securing API access
- D) A data serialization format
Answer: C) An authorization protocol for securing API access
13. Which of the following is a common tool for testing API endpoints?
- A) Postman
- B) JIRA
- C) GitHub
- D) Jenkins
Answer: A) Postman
14. What does a RESTful API use to define its operations?
- A) Data serialization
- B) Resource URIs and HTTP methods
- C) WebSocket protocols
- D) Data encryption
Answer: B) Resource URIs and HTTP methods
15. What is a webhook in the context of APIs?
- A) A way for an API to send real-time notifications to a client when an event occurs
- B) A method for securing API requests
- C) A tool for testing API endpoints
- D) A format for API responses
Answer: A) A way for an API to send real-time notifications to a client when an event occurs
16. What does CORS stand for in API integration?
- A) Cross-Origin Resource Sharing
- B) Cross-Origin Request Security
- C) Cross-Server Resource Sharing
- D) Central-Origin Resource Sharing
Answer: A) Cross-Origin Resource Sharing
17. What is the purpose of pagination in API responses?
- A) To limit the amount of data returned in a single request
- B) To encrypt the response data
- C) To compress the data
- D) To ensure data consistency
Answer: A) To limit the amount of data returned in a single request
18. What is API throttling?
- A) A technique to limit the number of API requests to prevent abuse
- B) A method to improve the speed of API requests
- C) A way to handle API errors
- D) A technique to increase the API response size
Answer: A) A technique to limit the number of API requests to prevent abuse
19. What is JSONP and when is it used?
- A) JSON with Padding; used to bypass cross-origin restrictions in APIs
- B) A format for binary data transmission
- C) A type of JSON encryption
- D) A tool for API testing
Answer: A) JSON with Padding; used to bypass cross-origin restrictions in APIs
20. What does API Gateway do in a microservices architecture?
- A) Acts as a single entry point for managing and routing API requests
- B) Encrypts API responses
- C) Handles database transactions
- D) Manages API keys and credentials
Answer: A) Acts as a single entry point for managing and routing API requests
21. How does rate limiting help in API management?
- A) By preventing abuse and ensuring fair usage by limiting the number of requests from a client
- B) By increasing the speed of the API
- C) By handling large volumes of data
- D) By encrypting API requests
Answer: A) By preventing abuse and ensuring fair usage by limiting the number of requests from a client
22. What is GraphQL in the context of APIs?
- A) A query language for APIs and a runtime for executing queries
- B) A tool for encrypting API data
- C) A format for API responses
- D) A framework for building REST APIs
Answer: A) A query language for APIs and a runtime for executing queries
23. What does the Accept header in an API request specify?
- A) The media type of the response that the client can process
- B) The API key required for access
- C) The method used for the request
- D) The maximum size of the request payload
Answer: A) The media type of the response that the client can process
24. Which of the following is NOT a common HTTP status code for indicating client errors?
- A) 400
- B) 401
- C) 404
- D) 500
Answer: D) 500
25. How can API versioning help in maintaining API services?
- A) By allowing different versions of the API to coexist, enabling backward compatibility and smoother transitions
- B) By increasing the speed of API requests
- C) By compressing the response data
- D) By managing API keys and access control
Answer: A) By allowing different versions of the API to coexist, enabling backward compatibility and smoother transitions
Web Development Performance Optimization MCQs
Performance optimization is crucial for creating fast, efficient, and user-friendly websites.
1. What does "minification" refer to in web development?
- A) Compressing images to reduce their size
- B) Removing unnecessary characters from code (e.g., whitespace, comments) without changing functionality
- C) Increasing the resolution of images
- D) Encrypting files for security
Answer: B) Removing unnecessary characters from code (e.g., whitespace, comments) without changing functionality
2. Which HTTP method is recommended for fetching static resources like CSS and JavaScript files?
- A) POST
- B) PUT
- C) GET
- D) DELETE
Answer: C) GET
3. What is "lazy loading" in the context of web performance optimization?
- A) Loading all content at once for faster initial display
- B) Loading content only when it becomes visible in the viewport
- C) Loading content in the background without user interaction
- D) Preloading all resources to reduce load times
Answer: B) Loading content only when it becomes visible in the viewport
4. How can you reduce the size of CSS files for better performance?
- A) Use CSS preprocessors like Sass or LESS
- B) Combine multiple CSS files into a single file
- C) Use inline CSS for critical styles only
- D) All of the above
Answer: D) All of the above
5. What is "HTTP caching" used for in performance optimization?
- A) To store web pages on the server
- B) To speed up the process of serving web pages by storing and reusing responses
- C) To encrypt HTTP requests
- D) To compress the size of HTML files
Answer: B) To speed up the process of serving web pages by storing and reusing responses
6. Which of the following techniques can help reduce the number of HTTP requests on a web page?
- A) Using multiple CSS and JavaScript files
- B) Combining images into CSS sprites
- C) Avoiding the use of external libraries
- D) Disabling JavaScript
Answer: B) Combining images into CSS sprites
7. What is the purpose of "Content Delivery Networks" (CDNs) in web performance?
- A) To encrypt data between the client and server
- B) To store and deliver static resources from servers geographically closer to users
- C) To compress HTML and CSS files
- D) To handle user authentication
Answer: B) To store and deliver static resources from servers geographically closer to users
8. What does the "Critical Rendering Path" refer to?
- A) The sequence of steps the browser takes to render a page
- B) The path that user data travels through the server
- C) The process of minifying HTML and CSS
- D) The network latency involved in loading a page
Answer: A) The sequence of steps the browser takes to render a page
9. How can you optimize JavaScript for better performance?
- A) Use JavaScript minifies and bundlers
- B) Load JavaScript files asynchronously
- C) Defer non-critical JavaScript until after the page load
- D) All of the above
Answer: D) All of the above
10. What is the purpose of "image optimization" in web development?
- A) To increase the resolution of images for better quality
- B) To reduce the file size of images while maintaining acceptable quality
- C) To add more colors to images
- D) To convert images to text-based formats
Answer: B) To reduce the file size of images while maintaining acceptable quality
11. What is the purpose of using "web workers" in web development?
- A) To perform tasks in the background, offloading them from the main thread to improve performance
- B) To manage web requests
- C) To handle user authentication
- D) To compress web assets
Answer: A) To perform tasks in the background, offloading them from the main thread to improve performance
12. How can "server-side rendering" (SSR) improve web performance?
- A) By executing JavaScript on the server before sending the HTML to the client, improving initial load times and SEO
- B) By delaying the rendering of content until after page load
- C) By handling all client-side interactions
- D) By reducing the size of client-side scripts
Answer: A) By executing JavaScript on the server before sending the HTML to the client, improving initial load times and SEO
13. What do "preloading" and "prefetching" refer to in performance optimization?
- A) Preloading: Loading resources before they are needed; Prefetching: Loading resources that might be needed shortly
- B) Preloading: Fetching resources from a CDN; Prefetching: Storing resources in local storage
- C) Preloading: Caching resources in the browser; Prefetching: Encrypting resources
- D) Preloading: Compressing resources; Prefetching: Encrypting requests
Answer: A) Preloading: Loading resources before they are needed; Prefetching: Loading resources that might be needed shortly
14. What is the impact of "render-blocking resources" on web performance?
- A) They speed up the rendering process
- B) They delay the rendering of the page until they are fully loaded
- C) They enhance the visual appeal of the page
- D) They reduce the size of the page content
Answer: B) They delay the rendering of the page until they are fully loaded
15. How can "deferred loading" of JavaScript improve page load times?
- A) By ensuring JavaScript files are loaded only after the HTML and CSS have been fully processed
- B) By compressing JavaScript files
- C) By executing JavaScript immediately on page load
- D) By loading JavaScript files in parallel with CSS
Answer: A) By ensuring JavaScript files are loaded only after the HTML and CSS have been fully processed
16. What is "critical CSS"?
- A) The CSS that is essential for rendering the above-the-fold content of a page
- B) The CSS used for printing web pages
- C) The CSS for handling animations
- D) The CSS that is loaded after the page is fully rendered
Answer: A) The CSS that is essential for rendering the above-the-fold content of a page
17. How does "HTTP/2" improve web performance compared to HTTP/1.1?
- A) By allowing multiple requests and responses to be multiplexed over a single connection
- B) By increasing the size limit of HTTP headers
- C) By requiring the use of SSL/TLS encryption
- D) By reducing the number of HTTP status codes
Answer: A) By allowing multiple requests and responses to be multiplexed over a single connection
18. What is the purpose of "compression" in web performance?
- A) To reduce the size of files sent between the server and client, improving load times
- B) To enhance image quality
- C) To increase the resolution of videos
- D) To encrypt sensitive data
Answer: A) To reduce the size of files sent between the server and client, improving load times
19. Which tool can be used to analyze and improve web performance?
- A) Google PageSpeed Insights
- B) GitHub
- C) Slack
- D) Jenkins
Answer: A) Google PageSpeed Insights
20. What is the impact of "browser caching" on performance?
- A) It reduces the need for the browser to re-fetch resources from the server on subsequent visits, improving load times
- B) It increases the server load
- C) It ensures data is encrypted
- D) It prevents resource compression
Answer: A) It reduces the need for the browser to re-fetch resources from the server on subsequent visits, improving load times
21. How does "DNS prefetching" help with performance?
- A) By resolving domain names before a user clicks on links, reducing the time needed to establish connections
- B) By compressing DNS records
- C) By caching DNS records indefinitely
- D) By encrypting DNS queries
Answer: A) By resolving domain names before a user clicks on links, reducing the time needed to establish connections
22. What is the role of "Service Workers" in web performance?
- A) To enable background processing and caching of resources for offline use
- B) To handle user authentication
- C) To manage server-side data
- D) To compress web assets
Answer: A) To enable background processing and caching of resources for offline use
23. What does the "DOM Content Loaded" event signify?
- A) The initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading
- B) The entire page, including all dependent resources like stylesheets and images, has been fully loaded
- C) The server has received the request and is processing it
- D) The JavaScript has been executed
Answer: A) The initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading
24. How does the "asynchronous loading" of resources contribute to performance optimization?
- A) It allows resources to be loaded in parallel, without blocking the rendering of the page
- B) It ensures resources are loaded sequentially
- C) It compresses resources
- D) It encrypts data during transmission
Answer: A) It allows resources to be loaded in parallel, without blocking the rendering of the page
25. What is the purpose of "font optimization" in web performance?
- A) To reduce the impact of custom fonts on page load times by using font-display strategies and subset fonts
- B) To increase the number of available fonts
- C) To improve font rendering quality
- D) To handle font encryption
Answer: A) To reduce the impact of custom fonts on page load times by using font-display strategies and subset fonts
Testing and Debugging MCQs
Testing and debugging are essential steps in the web development process to ensure that your applications work as intended.
1. What is the primary purpose of unit testing?
- A) To test the entire system's integration
- B) To test individual components or functions in isolation
- C) To test the performance of the system
- D) To test the user interface
Answer: B) To test individual components or functions in isolation
2. Which tool is commonly used for JavaScript unit testing?
- A) Jest
- B) JIRA
- C) Postman
- D) GitHub
Answer: A) Jest
3. What does "debugging" refer to in software development?
- A) The process of identifying and fixing bugs in code
- B) The process of creating new features
- C) The process of designing the user interface
- D) The process of deploying applications
Answer: A) The process of identifying and fixing bugs in code
4. What is the purpose of a "debugger" tool?
- A) To execute code faster
- B) To help developers inspect and modify code execution to find and fix issues
- C) To manage user authentication
- D) To compile code into machine language
Answer: B) To help developers inspect and modify code execution to find and fix issues
5. Which of the following is a common assertion library for JavaScript testing?
- A) Mocha
- B) Chai
- C) Webpack
- D) Babel
Answer: B) Chai
6. What is "integration testing"?
- A) Testing individual components or functions
- B) Testing how different components of a system work together
- C) Testing the user interface for usability
- D) Testing the performance of the system
Answer: B) Testing how different components of a system work together
7. Which testing approach involves checking the software from the user's perspective?
- A) Unit Testing
- B) Integration Testing
- C) End-to-End Testing
- D) Performance Testing
Answer: C) End-to-End Testing
8. What is "mocking" in the context of testing?
- A) Replacing a real component or service with a simulated one to test interactions
- B) Testing the performance of a component
- C) Analyzing the user interface
- D) Running code in production
Answer: A) Replacing a real component or service with a simulated one to test interactions
9. Which method is commonly used to find JavaScript errors in the browser?
- A) JavaScript Console
- B) Network Tab
- C) Performance Tab
- D) Storage Tab
Answer: A) JavaScript Console
10. What is "Test-Driven Development" (TDD)?
- A) Writing tests before writing the code to ensure that the code meets the requirements
- B) Writing code first and then writing tests
- C) Testing the entire system at once
- D) Creating a user interface before writing any code
Answer: A) Writing tests before writing the code to ensure that the code meets the requirements
11. What is "coverage" in the context of testing?
- A) The measure of how much of the codebase is executed by the tests
- B) The measure of how much data is encrypted
- C) The measure of how many features are implemented
- D) The measure of how many users interact with the application
Answer: A) The measure of how much of the codebase is executed by the tests
12. What is "continuous integration" (CI) about testing?
- A) The practice of merging code changes into a shared repository frequently and running automated tests to validate the changes
- B) The practice of manually integrating code changes
- C) The practice of encrypting data
- D) The practice of designing user interfaces
Answer: A) The practice of merging code changes into a shared repository frequently and running automated tests to validate the changes
13. What does "assertion" refer to in testing?
- A) A statement that verifies if the result of a test matches the expected outcome
- B) A type of test that checks system performance
- C) A method of logging errors
- D) A technique for data encryption
Answer: A) A statement that verifies if the result of a test matches the expected outcome
14. What is "end-to-end" (E2E) testing?
- A) Testing the complete flow of an application from start to finish to ensure all components work together as expected
- B) Testing individual components in isolation
- C) Testing the performance of the application
- D) Testing the database interactions
Answer: A) Testing the complete flow of an application from start to finish to ensure all components work together as expected
15. Which tool is commonly used for end-to-end testing in web applications?
- A) Selenium
- B) ESLint
- C) Webpack
- D) Babel
Answer: A) Selenium
16. What does "code coverage" help to identify?
- A) Untested parts of the codebase
- B) The quality of the user interface
- C) The amount of data being encrypted
- D) The number of users accessing the application
Answer: A) Untested parts of the codebase
17. What is the role of a "test runner"?
- A) To execute tests and report the results
- B) To manage user authentication
- C) To compile code
- D) To handle database connections
Answer: A) To execute tests and report the results
18. What is "integration testing" used for?
- A) To test how different pieces of the system work together
- B) To test the performance of individual components
- C) To test the user interface
- D) To test the security of the application
Answer: A) To test how different pieces of the system work together
19. What does "debugging" a web application typically involve?
- A) Using tools and techniques to identify and fix issues in the application code
- B) Creating user documentation
- C) Designing the application's layout
- D) Optimizing the performance of the server
Answer: A) Using tools and techniques to identify and fix issues in the application code
20. What is the benefit of using "test stubs" in testing?
- A) To simulate the behavior of real components or services without invoking their actual implementation
- B) To test the performance of the application
- C) To encrypt data during testing
- D) To handle user authentication
Answer: A) To simulate the behavior of real components or services without invoking their actual implementation
21. Which approach is used to ensure that the software meets the requirements of stakeholders?
- A) Acceptance Testing
- B) Unit Testing
- C) Performance Testing
- D) Security Testing
Answer: A) Acceptance Testing
22. What is "performance testing"?
- A) Testing to evaluate how the system performs under various conditions, such as load, stress, and scalability
- B) Testing to ensure the system's functionality
- C) Testing to verify the system's security
- D) Testing to check user interface design
Answer: A) Testing to evaluate how the system performs under various conditions, such as load, stress, and scalability
23. What does "mock testing" involve?
- A) Creating simulated versions of components to test interactions
- B) Encrypting test data
- C) Testing the system's security
- D) Designing the user interface
Answer: A) Creating simulated versions of components to test interactions
24. Which of the following is NOT a common debugging technique?
- A) Using breakpoints
- B) Inspecting variables
- C) Running performance benchmarks
- D) Using logs
Answer: C) Running performance benchmarks
25. What does "behavior-driven development" (BDD) focus on?
- A) Defining the behavior of an application through examples and scenarios to ensure it meets the desired outcomes
- B) Testing the individual units of the application
- C) Testing the system's performance under load
- D) Encrypting application data
Answer: A) Defining the behavior of an application through examples and scenarios to ensure it meets the desired outcomes
Version Control Systems MCQs
Version control systems like Git are fundamental tools for web developers, enabling collaboration and efficient management of code.
1. What is the primary purpose of a version control system?
- A) To manage software deployment
- B) To track and manage changes to source code over time
- C) To handle user authentication
- D) To compress files for storage
Answer: B) To track and manage changes to source code over time
2. Which of the following is a popular distributed version control system?
- A) SVN
- B) CVS
- C) Git
- D) Mercurial
Answer: C) Git
3. What does the command git clone do?
- A) Creates a new repository
- B) Copies an existing repository to a new directory
- C) Merges changes from one branch to another
- D) Commits changes to the repository
Answer: B) Copies an existing repository to a new directory
4. What is a "commit" in the context of version control?
- A) A snapshot of changes made to the source code
- B) A branch created from the main branch
- C) A request to merge changes into the main branch
- D) A backup of the repository
Answer: A) A snapshot of changes made to the source code
5. What does the git status command show?
- A) The commit history of the repository
- B) The differences between the working directory and the index
- C) The status of the working directory and staging area
- D) The list of branches in the repository
Answer: C) The status of the working directory and staging area
6. What is a "branch" in a version control system?
- A) A separate line of development within a repository
- B) A backup of the entire repository
- C) A type of commit
- D) A system for merging changes
Answer: A) A separate line of development within a repository
7. What does git merge do?
- A) Combines changes from different branches into one branch
- B) Creates a new branch from the current branch
- C) Deletes a branch from the repository
- D) Reverts changes made in a commit
Answer: A) Combines changes from different branches into one branch
8. What is the purpose of a "pull request" (PR)?
- A) To request that changes be merged into a branch
- B) To fetch updates from a remote repository
- C) To create a new branch
- D) To clone a repository
Answer: A) To request that changes be merged into a branch
9. What does the git pull command do?
- A) Fetches and integrates changes from a remote repository into the current branch
- B) Pushes changes to a remote repository
- C) Creates a new branch
- D) Deletes the current branch
Answer: A) Fetches and integrates changes from a remote repository into the current branch
10. What is a "fork" in version control systems?
- A) A copy of a repository that allows for independent changes
- B) A method for merging branches
- C) A type of commit
- D) A backup of the repository
Answer: A) A copy of a repository that allows for independent changes
11. What does the git rebase command do?
- A) Reapplies commits from one branch onto another base branch
- B) Creates a new branch
- C) Merges two branches
- D) Deletes commits from the history
Answer: A) Reapplies commits from one branch to another base branch
12. What is the purpose of the .gitignore file?
- A) To specify files and directories that should not be tracked by Git
- B) To list branches that should be ignored
- C) To document commit messages
- D) To manage user access permissions
Answer: A) To specify files and directories that should not be tracked by Git
13. What does the git fetch command do?
- A) Retrieves updates from a remote repository without integrating them into the current branch
- B) Merges changes from a remote repository into the current branch
- C) Pushes local changes to a remote repository
- D) Deletes local branches
Answer: A) Retrieves updates from a remote repository without integrating them into the current branch
14. What is a "tag" in version control?
- A) A reference to a specific point in the repository history
- B) A type of branch
- C) A method for merging branches
- D) A commit message
Answer: A) A reference to a specific point in the repository history
15. What does the git revert command do?
- A) Creates a new commit that undoes the changes made in a previous commit
- B) Reapplies commits onto a different base branch
- C) Merges two branches
- D) Deletes a branch
Answer: A) Creates a new commit that undoes the changes made in a previous commit
16. What is the "HEAD" in Git?
- A) A reference to the current commit in the current branch
- B) The first commit in the repository
- C) A branch name
- D) A type of tag
Answer: A) A reference to the current commit in the current branch
17. What does the git stash command do?
- A) Saves changes in the working directory temporarily and reverts to a clean state
- B) Merges changes from one branch to another
- C) Deletes local branches
- D) Tags a specific commit
Answer: A) Saves changes in the working directory temporarily and reverts to a clean state
18. What is a "merge conflict"?
- A) A situation where changes from different branches cannot be automatically reconciled
- B) A conflict between different types of commits
- C) A problem with the repository structure
- D) A conflict in the Git configuration
Answer: A) A situation where changes from different branches cannot be automatically reconciled
19. What does the git log command display?
- A) A history of commits in the current branch
- B) The status of the working directory
- C) A list of branches
- D) Changes between commits
Answer: A) A history of commits in the current branch
20. What is "blame" in Git?
- A) A command that shows who made changes to each line of a file and when
- B) A command to delete commits
- C) A way to handle merge conflicts
- D) A tool for managing branches
Answer: A) A command that shows who made changes to each line of a file and when
21. What does the git push command do?
- A) Uploads local commits to a remote repository
- B) Downloads changes from a remote repository
- C) Merges branches
- D) Deletes local branches
Answer: A) Uploads local commits to a remote repository
22. What is a "commit message"?
- A) A brief description of the changes made in a commit
- B) A reference to a specific commit
- C) A method for tagging commits
- D) A command for reverting changes
Answer: A) A brief description of the changes made in a commit
23. What does the git cherry-pick command do?
- A) Applies the changes from a specific commit to the current branch
- B) Deletes a commit from history
- C) Creates a new branch from a commit
- D) Tags a specific commit
Answer: A) Applies the changes from a specific commit to the current branch
24. What is the function of the .gitattributes file?
- A) To define attributes for files and directories in the repository, such as merge strategies
- B) To list ignored files
- C) To document commit messages
- D) To manage branch names
Answer: A) To define attributes for files and directories in the repository, such as merge strategies
25. What is the purpose of "repository hosting services" like GitHub or GitLab?
- A) To provide a platform for storing and collaborating on version-controlled code
- B) To handle local version control tasks
- C) To encrypt repository data
- D) To manage user interface design
Answer: A) To provide a platform for storing and collaborating on version-controlled code
Deployment and Hosting of MCQs
Once your web application is ready, it must be deployed and hosted online for users to access it.
1. What is the primary purpose of deploying a web application?
- A) To develop new features
- B) To make the application accessible to users on the internet
- C) To create database schemas
- D) To optimize the application's performance
Answer: B) To make the application accessible to users on the internet
2. Which of the following is a common platform for deploying web applications?
- A) Google Drive
- B) GitHub
- C) Heroku
- D) Trello
Answer: C) Heroku
3. What does "hosting" refer to in web development?
- A) The process of making a website accessible on the internet
- B) The process of developing new features for a website
- C) The process of managing user authentication
- D) The process of testing an application
Answer: A) The process of making a website accessible on the internet
4. Which type of hosting provides virtual private servers for hosting applications?
- A) Shared Hosting
- B) Dedicated Hosting
- C) Virtual Private Server (VPS) Hosting
- D) Cloud Hosting
Answer: C) Virtual Private Server (VPS) Hosting
5. What does "continuous deployment" involve?
- A) Automatically deploying every change to production after passing tests
- B) Manually deploying changes after testing
- C) Testing applications only in a staging environment
- D) Creating a backup of the application before deployment
Answer: A) Automatically deploying every change to production after passing tests
6. Which of the following services is commonly used for cloud hosting?
- A) Amazon Web Services (AWS)
- B) Microsoft Word
- C) Adobe Photoshop
- D) Dropbox
Answer: A) Amazon Web Services (AWS)
7. What does the scp command do in the context of deployment?
- A) Securely copies files between a local and remote system
- B) Compiles source code
- C) Sets up a web server
- D) Deploys applications to a cloud service
Answer: A) Securely copies files between a local and remote system
8. Which configuration file is commonly used for defining deployment settings in a Docker-based application?
- A)
docker-compose.yml - B)
package.json - C)
config.yaml - D)
.gitignore
Answer: A) docker-compose.yml
9. What is the purpose of a "load balancer" in a hosting environment?
- A) To distribute incoming network traffic across multiple servers
- B) To optimize database queries
- C) To manage user authentication
- D) To create backups of server data
Answer: A) To distribute incoming network traffic across multiple servers
10. What does "scaling" an application involve?
- A) Increasing or decreasing the resources available to the application based on demand
- B) Modifying the application's codebase
- C) Adding new features to the application
- D) Creating backups of the application
Answer: A) Increasing or decreasing the resources available to the application based on demand
11. What is a "Content Delivery Network" (CDN)?
- A) A network of distributed servers that deliver content to users based on their geographic location
- B) A method for optimizing database performance
- C) A type of load balancer
- D) A tool for creating backups
Answer: A) A network of distributed servers that deliver content to users based on their geographic location
12. Which tool is commonly used for managing configuration settings in a cloud environment?
- A) Kubernetes
- B) Docker
- C) Ansible
- D) Jenkins
Answer: C) Ansible
13. What does "blue-green deployment" refer to?
- A) A strategy that involves running two identical production environments to minimize downtime during deployments
- B) A method for scaling applications
- C) A technique for database management
- D) A type of content delivery network
Answer: A) A strategy that involves running two identical production environments to minimize downtime during deployments
14. Which protocol is commonly used for secure file transfers in deployment?
- A) HTTP
- B) FTP
- C) SFTP
- D) SMTP
Answer: C) SFTP
15. What does the term "serverless" mean in the context of cloud computing?
- A) A cloud computing model where the cloud provider manages the server infrastructure, allowing developers to focus on code
- B) A hosting environment without any physical servers
- C) A type of virtual private server
- D) A method for scaling applications
Answer: A) A cloud computing model where the cloud provider manages the server infrastructure, allowing developers to focus on code
16. Which file is commonly used to configure environment variables in a Docker container?
- A)
.env - B)
Dockerfile - C)
config.json - D)
settings.yaml
Answer: A) .env
17. What is "infrastructure as code" (IaC)?
- A) Managing and provisioning computing infrastructure through machine-readable configuration files
- B) Writing code for application features
- C) Managing source code repositories
- D) Testing applications automatically
Answer: A) Managing and provisioning computing infrastructure through machine-readable configuration files
18. What is the purpose of a "rollback" in deployment?
- A) To revert the application to a previous stable state after a failed deployment
- B) To deploy new changes to production
- C) To scale the application
- D) To update configuration settings
Answer: A) To revert the application to a previous stable state after a failed deployment
19. What does the docker build command do?
- A) Creates a Docker image from a Dockerfile
- B) Runs a Docker container
- C) Pushes a Docker image to a registry
- D) Deploys an application
Answer: A) Creates a Docker image from a Dockerfile
20. Which of the following is a common practice for ensuring high availability in deployment?
- A) Using multiple servers and load balancing
- B) Running a single server instance
- C) Limiting application scaling
- D) Reducing the number of backups
Answer: A) Using multiple servers and load balancing
21. What does "CI/CD" stand for?
- A) Continuous Integration/Continuous Deployment
- B) Cloud Infrastructure/Cloud Deployment
- C) Container Integration/Container Deployment
- D) Code Integration/Code Delivery
Answer: A) Continuous Integration/Continuous Deployment
22. What is a "staging environment"?
- A) A replica of the production environment used for testing before deployment
- B) The production environment where the application is live
- C) A development environment for coding
- D) A backup environment for disaster recovery
Answer: A) A replica of the production environment used for testing before deployment
23. What does "DNS" stand for and what is its purpose?
- A) Domain Name System; it translates human-readable domain names into IP addresses
- B) Data Network Service; it manages network traffic
- C) Distributed Network Storage; it handles data storage
- D) Dynamic Name Service; it updates domain names dynamically
Answer: A) Domain Name System; it translates human-readable domain names into IP addresses
24. What is a "deployment pipeline"?
- A) A series of automated processes that code changes go through from development to production
- B) A method for scaling applications
- C) A system for managing database migrations
- D) A tool for monitoring application performance
Answer: A) A series of automated processes that code changes go through from development to production
25. Which of the following is a benefit of using containerization for deployment?
- A) Consistent environments across development, testing, and production
- B) Increased complexity of application deployment
- C) Limited scalability options
- D) Increased server hardware requirements
Answer: A) Consistent environments across development, testing, and production
Conclusion
Web development is a vast field with many moving parts. MCQs are a valuable tool for both beginners and experienced developers to reinforce their knowledge and stay sharp. By regularly practicing these questions, you can identify gaps in your understanding and keep up with the latest trends and technologies in web development. Keep challenging yourself, and you’ll continue to grow as a developer.
FAQs
- What is the best way to prepare for web development exams?
Regularly practicing MCQs, working on projects, and staying updated with the latest technologies. How often should I practice MCQs?
Aim to practice MCQs daily or weekly, depending on your learning goals and schedule.What are some recommended resources for learning web development?
Online platforms like freeCodeCamp, MDN Web Docs, and Coursera offer excellent courses and tutorials.How can I stay updated with the latest web development trends?
Follow industry blogs, join web development communities, and attend conferences or webinars.Are there any free platforms to practice web development MCQs?
Websites like W3Schools, HackerRank, and Quizlet offer free web development MCQs for practice.