NATIONAL SKILLS

QUALIFICATION

LEVEL 3

TITLE:
FRONTEND WEB DEVELOPMENT

YEAR: 2024
 NATIONAL SKILLS QUALIFICATION

NSQ LEVEL 3 CERTIFICATE IN FRONTEND WEB DEVELOPMENT

QUALIFICATION PURPOSE
This qualification aims to provide learners with knowledge and skills to create visually appealing
and interactive web interfaces using HTML, CSS, JavaScript, and modern frameworks.

QUALIFICATION OBJECTIVES
The learner should be able to: -

i. Master HTML, CSS, and JavaScript to create and style web pages.
ii. Use version control systems like Git for managing code.
iii. Apply principles of responsive web design.
iv. Use UI/UX design to create user-friendly interfaces.
v. Troubleshoot common issues in web development.
vi. Develop logical thinking and problem-solving skills through coding.
vii. Manage small projects from conception to deployment.
viii. Collaborate effectively with team members using tools like GitHub.
ix. Use modern frontend frameworks.
x. Use web development tools and environments.
xi. Communicate technical concepts clearly and effectively.
xii. Document codes.
 Mandatory Units

Unit Reference NOS Title Cred Guided Rema

No Number it Learnin rk
Valu g
e Hours
UNIT 01 FWD/FED/09/L3 Information Technology 3 30 LEVEL 3
Ethics
UNIT 02 FWD/FED/01/L3 Introduction to Frontend 2 20 LEVEL 3
Development
UNIT 03 FWD/FED/02/L3 HYPERTEXT 2 20 LEVEL 3
MARKUP
LANGUAGE (HTML)
UNIT 04 FWD/FED/03/L3 CASCADING STYLE 2 20 LEVEL 3
SHEETS (CSS)
UNIT 05 FWD/FED/04/L3 JavaScript 3 30 LEVEL 3
UNIT 06 FWD Version Control with Git 3 30 LEVEL 3
/FED/05/L3
UNIT 07 FWD/FED/06/L3 Responsive Web Design 3 30 LEVEL 3
UNIT 08 FWD/FED/07/L3 Bootstrap Basic 2 20 LEVEL 3
UNIT 09 FWD/FED/08/L3 Content Management 2 20
System (CMS)
UNIT 10 FWD/FED/09/L3 Introduction to UI/UX 3 30 LEVEL 3
Design
UNIT 11 FWD/FED/11/L3 Modern Frontend 3 30 LEVEL 3
Frameworks
TOTAL 28 280

Optional Units

Unit Referenc NOS Title Cred Guided Remar

No e Number it Learnin k
Valu g
e Hours
UNIT 12 ICT/FED/12/L3 Product 2 20
Management
TOTAL 2 20

NOTE: Explain how the learner can achieve the total credit hours
from mandatory and optional units
Mandatory Units: The learner must complete all the mandatory
course units, which total 540 credit hours. This ensures a
comprehensive foundation in frontend web development.

Optional Units: The learner can select optional units to

complement the mandatory units. It allows learners to delve
deeper into specific arears of interest, providing a more
opportunities for hand-on projects and practical application of
skills, reinforcing theoretical knowledge.

NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 01: INFORMATION TECHNOLOGY ETHICS

Unit Reference Number: ICT/FED/01/L3

NSQ Level: 3
Credit Value: 3
Guided Learning Hours: 30

Unit Purpose: This unit aims to equip learners with skills and knowledge of ethical
principles and decision-making in IT practices.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Case Studies Analysis (CSA)
2. Quizzes and Tests (QT)
3. Research Project (RP), etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Explain the importance of ethics in
1
Understand information technology.
ethical 1. Identify common ethical issues in
principles 2
in IT IT, such as privacy and security.
1. Discuss the impact of unethical
3
behavior on individuals and
organizations
LO 2: 2. Analyze case studies to identify
Apply 1
ethical dilemmas in IT.
ethical
decision- 2. Evaluate different approaches to
making in 2
resolving ethical issues.
IT scenarios
2. Make informed decisions based on
3
ethical principles and best
practices

LO 3: 3. Develop policies and guidelines to

Promote 1
ensure ethical behavior in IT.
ethical 3. Educate team members on ethical
practices in 2
IT standards and practices.
environmen 3. Enforce compliance with ethical
3
ts guidelines in IT projects.
 NATIONAL SKILLS QUALIFICATION
LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 02: INTRODUCTION TO FRONTED WEB DEVELOPMENT

Unit Reference Number: ICT/FED/02/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This Unit aims to equip learners with the foundational skills to create
and manage the visual and interactive aspects of websites, ensuring a positive user
experience.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Direct Observation/oral questions (DO)
2. Question and Answer (QA)
3. Witness Testimony (WT)
4. Assignment (ASS), etc.
LEARNING PERFORMANCE Eviden Eviden
OBJECTIVE (LO) CRITERIA ce ce Ref.
Type Page
The learner will: No.
The learner can:
LO 1: 1. Describe a frontend
1 developer.
Understand Roles of
Fronted Web Developer 1. Explain the primary
2 responsibilities of a
frontend developer
1. Explain the importance
3 of collaborating with
backend developers
LO 2: 2. Define what
1 constitutes the client-
Understand
Components of a side (frontend) and
Web Application. server-side (backend)
of a web application
2. Explain the role of the
2 browser in rendering
web pages
2. Evaluate Performance
3 Metrics
LO 3: 3. Identify the main
1 technologies used in
Understand
Technologies used in frontend development
Frontend Web (HTML, CSS, JavaScript)
Development 3. Explain the following:
2  HTML
 CSS
 Javascript
3. Discuss the importance
3 of responsive design.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 03: HTML (Hypertext Markup Language)

Unit Reference Number: ICT/FED/03/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This unit aims to equip learners with foundational skills in HTML.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CR)
3. Written Assessment (WA)
4. Assignment (ASS), etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Use the document type declaration
Create a simple 1 correctly
HTML 1. Include essential tags while creating an
document with 2 HTML document
the correct 1. Properly nest elements within the
structure. 3 document.

LO 2: Use 2. Correctly use tags for headings, paragraphs,

Elements, Tags 1 and lists
and Attributes 2. Apply attributes for links and Sfor images
to create and 2 appropriately.
structure
2. Ensure all tags are properly closed and
content
3 nested.
LO 3: 3. Use form elements to create forms
Create 1
forms: 3. Implement form attributes while creating
Design 2 forms
forms using
3. Ensure forms are accessible and user-
appropriate
3 friendly.
HTML
elements
LO 4: 4. Use table elements while creating tables.
Create 1
Tables: 4. Apply attributes correctly when creating
Design 2 tables.
tables using 4. Ensure tables are properly structured and
appropriate 3 readable.
HTML
elements
LO 5: 5. Use semantic HTML elements
Understand 1 appropriately.
the use
5. Ensure the HTML document is logically
Semantic
2 structured with semantic tags.
HTML
elements to
improve
accessibility
and SEO
LO 6: 6. Use alt attributes for images to provide
Ensure 1 alternative text.
HTML 6. Implement ARIA (Accessible Rich Internet
content is 2 Applications) roles and attributes where
accessible necessary.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
to all users, 6. Ensure forms and interactive elements are
including 3 accessible via keyboard navigation.
those with
disabilities
LO 7: 7. Write well-indented and readable code.
Follow best 1
practices 7. Use comments to explain complex sections
for writing 2 of code.
clean and
maintainabl 7. Avoid deprecated tags and attributes.
e HTML 3
code
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 04: CSS (Cascading Styling Sheets)

Unit Reference Number: ICT/FED/04/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This unit aims to equip learners with skills to style and layout
web pages effectively, ensuring they can create responsive visually
appealing designs.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS), etc.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
LO 1: 1. Use basic selectors to style
1
Apply styles HTML correctly.
to HTML 1. Apply styles to elements.
2
elements
1. Use pseudo-classes and
using CSS 3
pseudo-elements
selectors
appropriately.
LO 2: 2. Implement Flexbox to create
1
Utilize CSS flexible and responsive
layout layouts.
techniques 2. Use CSS Grid to design grid-
2
to create based layouts.
complex 2. Apply positioning techniques
3
layouts effectively.
LO 3: 3. Use media queries to adjust
1
Implement styles for different screen
responsive sizes.
design 3. Apply a mobile-first design
2
principles approach.
using CSS. 3. Ensure layouts are fluid and
3
adapt to various devices.
LO 4: 4.
1
Correctly use properties such
Understand as margin, border, padding,
and apply and width.
4. Understand the impact of the
the CSS box 2
model box-sizing property.
4. Create layouts that respect
3 the box model principles
LO 5: 5.
1
Understand how specificity
Manage CSS affects the application of
specificity styles.
5. Use inheritance to organize
and 2
inheritance CSS.
5. Resolve conflicts between
effectively
3 competing styles.
LO 6: 6. Compile basic SCSS or LESS
Use CSS 1 code.
preprocessor 6. Use variables, nesting, and
s to enhance 2 mixins to streamline CSS.
CSS
6. Understand the benefits of
capabilities 3 using preprocessors in large
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
projects.
LO 7: 7. Implement basic transitions to
Create 1 animate changes in CSS
animations properties.
and 7. Use keyframes to create
transitions 2 complex animations.
using CSS
7. Ensure animations are smooth
3 and enhance user experience.

LO 8: 8. Write well-organized and

Follow best 1 readable CSS code.
practices for
8. Use comments to explain
writing clean 2
and complex sections of CSS.
maintainable 8. Avoid redundant and unused
CSS 3 CSS rules.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 05: JAVASCRIPT

Unit Reference Number: FWD/FED/05/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 24

Unit Purpose: This unit aims to equip leaners with skills and knowledge of and
dynamic content on web pages by allowing developers to create and control multimedia,
animations, and user interactions.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS), etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Declare variables using the right
1
Write basic JavaScript Syntax
JavaScript 1. Write functions using function
2
code using declarations and expressions.
correct 1. Use control structures
syntax 3
LO 2: 2. Manipulate HTML elements using
DOM 1
methods
Manipulate
2. Modify element properties and
the
2
Document attributes.
Object 2. Perform various task with
Model 3
elements from the DOM
(DOM) to
dynamically
update
content

LO 3: 3. Attach event listeners

Event 1
using addEventListener.
Implement 3. Handle common events.
event 2
listeners to 3. Prevent default behaviors and
3
handle user event propagation when
interactions necessary.
.
LO 4: 4. Work with primitive data types.
Understand 1
4. Use complex data types
and use 2
different 4. Perform operations on arrays and
data types 3 objects.
and
structures
LO 5: 5. Call functions with parameters and
Define and 1 return values.
invoke 5. Understand the difference
functions, 2 between global and local scope.
understand 5. Use closures to create private
ing scope 3 variables and functions.
and
closures
LO 6: 6. Use callback functions.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
Handle 1
6. Handle promises
asynchrono 2
us using then and catch.
6. Write asynchronous code in a
operations
3
using synchronous style.
callbacks,
promises
and
asyn/await

LO 7: 7. Handle exceptions
Implement 1
7. Throw custom errors using
error 2
handling in the throw statement.
JavaScript. 7. Debug code using [Link] and
3 browser developer tools.
LO 8: 8. Write well-structured and readable
Follow best 1 code.
practices 8. Use comments to explain complex
for writing 2 logic.
clean and 8. Avoid common pitfalls such as
maintainabl 3 global variables and deeply nested
e JavaScript code.
Code.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT - GENERAL SERVICE

Unit 06: Version Control with Git

Unit Reference Number: ICT/FED/06/L3

NSQ Level: 3
Credit Value: 3
Guided Learning Hours: 30

Unit Purpose: This unit aims to equip learners with skills and knowledge to manage
and track changes to their code efficiently, enabling collaboration and maintaining
project integrity.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS),
5. Mini Project, etc.
UNIT 05: Version Control with Git
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
LO 1: 1.1 Initialize a new Git repository
Use basic using git init.
Git 1.2 Clone an existing repository
commands using git clone.
to track 1.3 Stage changes using git add.
changes in
1.4 Commit changes with
a project.
meaningful messages using git
commit.
1.5 View the status of the
repository using git status
LO 2: 2.1 Create new branches using git
Manage branch and git checkout -b.
branches
2.2 Switch between branches
to work on
using git checkout.
different
features or 2.3 Merge branches using git
fixes. merge.
2.4 Resolve merge conflicts
effectively.
LO 3: Use 3.1 Push local changes to a remote
GitHub for repository using git push.
collaborati 3.2 Pull changes from a remote
on and repository using git pull.
remote 3.3 Clone repositories from GitHub.
repository 3.4 Manage pull requests for code
manageme
reviews.
nt.
LO 4: 4.1 View the commit history
Understand using git log.
and 4.2 Revert to previous commits
navigate using git checkout and git
the version revert.
history of a 4.3 Understand the difference
project. between git reset and git
revert.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
5.1 Identify conflicts using git
LO 5: status and git diff.
Resolve 5.2 Manually resolve conflicts in
conflicts code.
that arise 5.3 Commit resolved changes to
during the repository.
merging.

LO 6: 6.1 Write clear and concise commit

Follow Best messages.
Practices. 6.2 Commit changes frequently but
keep commits small and
focused.
6.3 Use .gitignore to exclude
unnecessary files from the
repository.
6.4 Regularly update branches to
avoid conflicts.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 07: Responsive Design Principles

Unit Reference Number: ICT/FED/07/L3

NSQ Level: 3
Credit Value: 3
Guided Learning Hours: 30

Unit Purpose: This unit aims to equip learners with skills and knowledge to create
dynamic web pages that adapt seamlessly to different screen sizes and devices, ensuring
optimal user experience.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS),
5. Mini Project, etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Use media queries to apply
1
Implement different styles based on device
media width, height, orientation, and
queries to resolution.
adjust styles 1. Ensure that layouts adapt
2
for different seamlessly across various
screen sizes. devices, including desktops,
tablets, and smartphones.
1. Test media queries to confirm
3
they work as intended on
multiple devices.
LO 2: 2. Use relative units instead of
Create 1
fixed units for widths, heights,
flexible and margins.
layouts that 2. Implement fluid grid systems to
adapt to 2
ensure content scales
different proportionally.
screen sizes 2. Ensure that elements resize and
3
reposition appropriately as the
viewport changes.
LO 3: 3. Use the srcset attribute to
Ensure 1
provide multiple image
images are resolutions.
responsive 3. Implement CSS techniques
and adapt to 2
like max-width: 100% to ensure
different images scale within their
screen sizes. containers.
3. Optimize images for different
3
devices to improve loading
times and performance.
LO 4: 4. Design the mobile version of
Apply a 1 the website first, then enhance
mobile-first it for larger screens.
design 4. Prioritize essential content and
approach. 2 functionality for mobile users.
4. Ensure that the mobile design is
3 clean, simple, and user-friendly.
LO 5: 5. Use relative units for font sizes
Implement 1 to ensure scalability.
responsive 5. Adjust font sizes, line heights,
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
typography. 2 and spacing for different screen
sizes.
5. Ensure text remains readable
3 and accessible on all devices.
LO 6: Design 6. Implement navigation patterns
responsive 1 that work well on both mobile
navigation and desktop devices
menus. 6. Ensure navigation is easily
2 accessible and usable on
touchscreens.
6. Test navigation functionality
3 across various devices and
screen sizes.
LO 7: 7. Minimize the use of large files
Optimise 1 and unnecessary scripts.
performance 7. Implement lazy loading for
for 2 images and other media.
responsive 7. Ensure fast loading times and
websites. 3 smooth interactions on all
devices.
LO 8: Ensure 8. Use ARIA (Accessible Rich
responsive 1 Internet Applications) roles and
designs are attributes to enhance
accessible to accessibility.
all users. 8. Ensure that responsive
2 elements are navigable via
keyboard and screen readers.
8. Test responsive designs for
3 accessibility compliance
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 08: BOOTSTRAP BASICS

Unit Reference Number: ICT/FED/08/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This unit aims to equip learners with skills and knowledge to use the
Bootstrap framework for creating responsive and visually appealing web designs
efficiently.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Quizzes and Tests (QT)
3. Portfolio Review (PR), etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Explain the purpose and benefits
1
Understand of using Bootstrap in web
the development.
fundament 1. Identify the core components and
2
als of structure of a Bootstrap project.
Bootstrap 1. Describe the mobile-first approach
3
and responsive design principles
in Bootstrap.
LO 2: 2. Utilize the Bootstrap grid system
Develop 1
to create responsive layouts.
responsive
web 2. Implement Bootstrap classes to
layouts 2
style HTML elements effectively.
using
Bootstrap 2. Create navigation bars, forms, and
3
other UI components using
Bootstrap.

LO 3: 3. Modify Bootstrap variables to

Customize 1
customize the appearance of
Bootstrap components.
component 3. Use custom CSS to override
s 2
Bootstrap styles.
3. Integrate third-party plugins with
3
Bootstrap for enhanced
functionality.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 09: CONTENT MANAGEMENT SYSTEM (CMS)

Unit Reference Number: ICT/FED/09/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This unit aims equip learners with the skills and knowledge to create,
manage, and customize websites using the Content Management System.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Quizzes and Tests (QT)
3. Portfolio Review (PR), etc.
LEARNING PERFORMANCE CRITERIA Eviden Eviden
OBJECTIVE ce ce Ref.
(LO) Type Page
The learner can: No.
The learner
will:
LO 1: 1. Explain the purpose and features
1
Understand of a Content Management System.
the basics 1. Configure a Content Management
of Content 2
System site.
Management 1. Navigate the Content
System 3
Management System dashboard
and manage site settings.
LO 2: 2. Publish posts and pages.
Create 1
content in 2. Organize content using categories
2
Content and tags.
Management
System 2. Manage media files and galleries
3
within Content Management
System.

LO 3: 3. Activate themes to change the

Customize 1
site’s appearance.
Content 3. Customize theme settings and
Management 2
templates.
System
3. Configure plugins to extend site
themes and 3
plugins functionality.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 10: Introduction to UI/UX Design

Unit Reference Number: ICT/FED/10/L3

NSQ Level: 3
Credit Value: 3
Guided Learning Hours: 30

Unit Purpose: This unit aims to equip learners with skills and knowledge to create
intuitive, user-friendly, and visually appealing web interfaces that enhance overall user
experience and accessibility.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS),
5. Mini Project, etc.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
LO 1: 1. Give a detailed UI and UX
Differentiate 1
design
between user 1. Describe how UI and UX work
interface (UI) 2
together to create a
and User cohesive product.
Experience 1. Provide examples of good UI
(UX) design. 3
and UX design.
LO 2: 2. Conduct user research to
Apply user- 1
understand the target
centered audience.
design 2. Create user personas based
principles. 2
on research findings.
2. Use empathy maps to
3
capture user needs and pain
points.
LO 3: 3. Use principles such as
Apply 1
balance, contrast, hierarchy,
fundamental and alignment in designs.
design 3. Ensure designs are visually
principles in 2
appealing and functional.
UI/UX projects.
3. Apply color theory and
3
typography effectively.
LO 4: Create 4. Develop low-fidelity
wireframes 1 wireframes to outline basic
and layout and structure.
prototypes to 4. Create high-fidelity
visualize 2 prototypes to demonstrate
design detailed design and
concepts. interactions.
4. Use tools like Sketch, Figma,
3 or Adobe XD for wireframing
and prototyping.
LO 5: Conduct 5. Execute usability tests with
usability 1 real users.
testing to 5. Analyze test results to
gather 2 identify usability issues.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
feedback on 5. Iterate on designs based on
designs. 3 user feedback.

LO 6: Organise 6. Create sitemaps to outline

and structure 1 the structure of a website or
content app.
effectively. 6. Develop user flows to map
2 out the user journey.

6. Ensure content is logically

3 organized and easy to
navigate.

LO 7: 7. Create interactive
Design 1 components like buttons,
interactive forms, and menus.
elements that 7. Ensure interactions are
enhance user 2 intuitive and provide clear
experience. feedback.
7. Use animations and
3 transitions to improve user
engagement.
LO 8: 8. Follow accessibility
Ensure 1 guidelines in designs.
designs are 8. Use ARIA roles and attributes
accessible to 2 to enhance accessibility.
all users,
8. Test designs with assistive
including
3 technologies like screen
those with
disabilities. readers.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 11: Modern Frameworks

Unit Reference Number: ICT/FED/11/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 24

Unit Purpose: This unit aims to equip learners with foundational skills to use
contemporary frontend frameworks, enabling them to build dynamic, responsive, and
maintainable web applications.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS),
5. Mini Project, etc.
UNIT 11: Modern Frameworks
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE (LO) e Type e Ref.
Page
The learner The learner can: No.
will:
LO 1: 1. Describe the purpose and
Explain 1
benefits of using a frontend
basics of framework.
modern 1. Explain the core concepts
frontend 2
such as components, state
framework management, and lifecycle
(e.g., React, methods.
[Link], 1. Compare different
Angular). 3
frameworks and their use
cases.

LO 2: 2. Create reusable components

Build simple 1
with props and state.
components 2. Implement component
using the 2
composition to build complex
chosen UIs.
framework. 2. Use JSX (for React) or
3
template syntax (for
[Link]/Angular) effectively.
LO 3: 2. Use state hooks or equivalent
Manage state 1
methods in other frameworks.
within a 3. Implement state lifting to
component or 2
manage shared state
application. between components.
3. Use context or state
3
management libraries for
global state management.
LO 4: 4. Set up routing using libraries
Implement 1
4. Create nested routes and
client-side 2
routing in a dynamic routing.
single-page 4. Handle route parameters and
application 3 query strings.
(SPA).
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE (LO) e Type e Ref.
Page
The learner The learner can: No.
will:
LO 5: 5. Use fetch or axios to make
Integrate 1 HTTP requests.
external APIs
5. Update the UI based on API
to fetch and 2
display data. responses.
5. Implement error handling for
3 API calls.
LO 6: 6. Build controlled and
Create and 1 uncontrolled forms.
manage
6. Validate form inputs and
forms within 2
the handle form submission.
framework. 6. Use form libraries to simplify
3 form management.
LO 7: 7. Implement code splitting and
Optimize the 1 lazy loading.
performance 7. Use memorization techniques
of the 2 to prevent unnecessary re-
application. renders.
7. Optimize rendering
3 performance using tools like
React Profiler or Vue
Devtools.
LO 8: 8. Use testing libraries like Jest,
Write and run 1 React Testing Library, or Vue
tests for Test Utils.
components 8. Write unit tests for individual
and 2 components.
application 8. Implement integration tests
3 to ensure components work
together correctly.
LO 9: 9. Write clean, maintainable,
Follow Best 1 and scalable code.
Practices. 9. Use version control effectively
2 to manage code changes.
9. Document components and
3 application logic clearly.
 NATIONAL SKILLS QUALIFICATION

LEVEL 3: FRONTEND WEB DEVELOPMENT

Unit 12: Product Management

Unit Reference Number: ICT/FED/12/L3

NSQ Level: 3
Credit Value: 2
Guided Learning Hours: 20

Unit Purpose: This unit aims to equip learners with foundational skills to oversee the
lifecycle of frontend projects, ensuring they meet user needs and business goals.

Unit assessment requirements/ evidence requirements:

Assessment must be carried out in real workplace environment in which learning and
human development is carried out.
Assessment methods to be used include:
1. Practical Assessment (PA)
2. Code Review (CA)
3. Written Assessment (WA)
4. Assignment (ASS),
5. FINAL Project, etc.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
LO 1: 1.1 Clearly articulate the product
Define vision and mission.
Product 1.2 Set measurable and achievable
goals and product goals.
objectives 1.3 Align product objectives with
user needs and business goals.
LO 2: 2.1 Develop a timeline with key
Create a milestones and deliverables.
Product 2.2 Identify dependencies and
Roadmap. potential risks.
2.3 Communicate the roadmap
effectively to stakeholders.
LO 3: 3.1 Use frameworks like MoSCoW
Prioritize or RICE to prioritize features.
Features
3.2 Balance user needs with
and Tasks.
technical feasibility and
business impact.
3.3 Regularly adjust priorities
based on feedback and
changes.
LO 4: 4.1 Conduct user surveys and
Collect and interviews.
Analyse 4.2 Analyse feedback to identify
User trends and insights.
Feedback 4.3 Implement changes based on
user feedback to improve the
product.
LO 5: 5.1 Oversee the product from
Manage ideation to launch and beyond.
Product 5.2 Ensure timely delivery of
Lifecycle. product milestones.
5.3 Maintain high-quality standards
throughout the product
lifecycle.
LO 6: 6.1 Advocate for user needs in all
Ensure design decisions.
User- 6.2 Conduct usability testing to
Centric validate design choices.
LEARNING PERFORMANCE CRITERIA Evidenc Evidenc
OBJECTIVE e Type e Ref.
(LO) Page
The learner can: No.
The learner
will:
Design. 6.3 Iterate on designs based on
user feedback and testing
results.