National Examination Paper:
FRONT-END DESIGN AND DEVELOPMENT
Level: L5
MOCK FOR THE 2024/2025 NATIONAL
EXAMINATIONS
QUESTION PAPER
YI
TRADE: SOFTWARE DEVELOPMENT
EN
CANDIDATE NAMES:
IS
…………………………………………………………………………….
/G
INDEX NUMBER:
………………………………………………………………………………….
TG
DURATION: 3 HOURS
ES
INSTRUCTIONS TO CANDIDATES:
1. Read and understand all instructions before answering.
2. For multiple-choice questions, choose only one correct answer and clearly circle
the letter or number.
3. Erasing or altering answers is strictly prohibited and will lead to zero mark for the
affected question.
4. Use only blue or black ink pens (no pencils or colored pens)
May 2025
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 1 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT
ATTEMP ALL QUESTIONS
01. Which of the following is a front-end programming (4Marks)
language?
A) Java
B) Python
C) HTML
D) C++
02. Answer by True(T) or False(F): (4Marks)
CSS stands for Cascading Style Sheets.
03. Which of the following is used to structure content on a (4Marks)
web page?
A) JavaScript
YI
B) HTML
C) CSS EN
D) SQL
04. Answer by True(T) or False(F): (4Marks)
IS
JavaScript is mainly used for styling the web page.
A) True
/G
B) False
05. Which CSS property is used to change the background (4Marks)
TG
color of an element?
A) color
B) background-color
ES
C) font-size
D) padding
06. Answer by True(T) or False(F): (4Marks)
The <div> tag is used to define an inline element in
HTML.
07. Match the front-end technologies/tools to their correct (8Marks)
descriptions: (2 marks each)
Front-End Descriptions
technologies/tools
1. HTML A) A framework for
building user interfaces
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 2 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT
B) A markup language
2. CSS used to create the
structure of web pages
C) A scripting language
3. JavaScript
used to make web pages
interactive
D) A stylesheet language
used for describing the
4. [Link] presentation of a
document
08. What is the primary role of CSS in front-end web (4Marks)
development?
YI
a. To define the structure of a web page EN
b. To add interactivity to a web page
c. To style and visually format the web page elements
d. To connect the frontend to a database
IS
09. In front-end development, why is HTML considered as (4Marks)
foundational technology?
/G
a. Because it controls data storage
b. Because it defines the structure and content of web
TG
pages
c. Because it handles database queries
ES
d. Because it optimizes server performance
10. What is the function of the DOM (Document Object (5 Marks)
Model) in front-end development?
a. It stores website data in a database
b. It defines how JavaScript handles backend logic
c. It represents the structure of a web page for dynamic
interaction
d. It secures user data on the server
11. You want to center a div element horizontally on a web (5Marks)
page using CSS. Which property would you use?
A) text-align: center;
B) margin: auto;
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 3 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT
C) position: absolute;
D) float: center;
12. In JavaScript, which method would you use to change (5Marks)
the text content of an HTML element with the id title?
A) [Link]("title").textContent = "New
Title";
B) [Link]("title").innerHTML = "New
Title";
C) [Link]("title").setText("New Title");
D) Both A and B
13. You want to create a responsive web page that adapts to (5Marks)
different screen sizes. Which CSS media query would you
use to apply styles for screens smaller than 600px?
A) @media screen and (min-width: 600px) {}
YI
B) @media screen and (max-width: 600px) {}
C) @media screen and (width: 600px) {}
EN
D) @media screen and (height: 600px) {}
14. You are working with a navigation menu and want to (5Marks)
IS
hide it when the screen size is smaller than 768px. Which
CSS rule will achieve this?
/G
A) @media screen and (max-width: 768px) { display:
none; }
B) @media screen and (min-width: 768px) { display: none;
TG
}
C) @media screen and (max-width: 768px) { visibility:
ES
hidden; }
D) @media screen and (min-width: 768px) { visibility:
hidden; }
15. You are working on a website, and the page is loading (5Marks)
very slowly. Upon inspection, you realize that there are
several large image files. What should you do first to
address the issue?
A) Use larger image files for better quality
B) Compress or optimize the image files for faster loading
C) Remove the images from the page
D) Load all images on page load
16. A website's design is responsive on smaller screens but (5Marks)
breaks on larger screens. What is the most likely cause of
this issue?
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 4 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT
A) The CSS media queries are incorrectly set for smaller
screens
B) The layout is not flexible or doesn't use relative units
C) JavaScript is not being loaded properly
D) The HTML code is invalid
17. While testing a front-end feature, you notice that a (5 Marks)
button works as expected in some browsers but not in
others. What should you consider as the most likely
cause?
A) The CSS code for the button is invalid
B) The button's functionality relies on browser-specific
features
C) The JavaScript code for the button is outdated
D) The browser's default styles are being overridden
YI
18. You are working on a website that needs to support both (5 Marks)
light and dark themes. Which approach would be the
EN
most efficient way to implement theme switching?
A) Use JavaScript to toggle between two separate CSS
files
IS
B) Use CSS @media queries to detect the system's
preferred theme and apply styles accordingly
/G
C) Manually change the background color using
JavaScript
TG
D) Use a CSS class for each theme and switch it
manually
19. You have a large-scale front-end application, and the (5 Marks)
ES
page load time is high due to excessive JavaScript files.
Which of the following would be the best way to optimize
performance?
A) Minimize and bundle JavaScript files
B) Remove all JavaScript files
C) Use inline JavaScript for everything
D) Load JavaScript files asynchronously only
20. You need to create a dynamic form on your website that (5 Marks)
validates the input fields before submitting the data.
Which JavaScript code would you use to validate an
email field?
A)
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 5 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT
var email = [Link]('email').value;
if (email === "") { alert("Email is required!"); }
B)
var email = [Link]('email').value;
var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,6}$/;
if () { alert("Invalid email format!"); }
C)
var email = [Link]('email').value;
if () { alert("Invalid email format!"); }
YI
D) EN
var email = [Link]('email').value;
if (email === "") { alert("Please enter a valid email
IS
address."); }
/G
21. You need to create a single-page application (SPA) using (5 Marks)
React. Which of the following is the first step in setting up
the application?
TG
A) Install React Router for navigation
B) Create a new React project using create-react-app
C) Set up state management using Redux
ES
D) Add a backend API to the project
END
MOCK for the 2024/2025 National Examinations (Questionnaire) Page 6 of 6
Downloaded by NDAHIRIWE MUKE Fidele on Thu, 29 May 2025 14:21:44 CAT