Government of Pakistan

National Vocational and Technical Training Commission

Prime Minister’s Hunarmand Pakistan Program

"Skills for All"

Course Contents / Lesson Plan

Course Title: Web Designing & Web Engineering

Duration: 6 Months

Revised Edition
Trainer Name

Course Title Web Designing & Web Engineering

Objectives and Employable skills and hands-on practice for Web Designing & Web
Expectations Engineering

This course is designed to start you on a path toward future studies in web
development and web engineering, no matter how little experience or technical
knowledge you currently have. The web is a very big place, and if you are the
typical internet user, you probably visit several websites every day, whether for
business, entertainment, or education. But have you ever wondered how these
websites actually work? How are they built? How do browsers, computers, and
mobile devices interact with the web? What skills are necessary to build a
website? With more than 1 billion websites now on the internet, the answers to
these questions could be your first step toward a better understanding of the
internet and developing a new set of internet skills.

By the end of this course, you will be able to describe the Domain Name, Web
Hosting, Domain Name Servers ( DNS ), How domain name and web hosting
works together, structure and functionality of the world wide web, create
dynamic web pages using a combination of HTML, PHP, Asp.Net, Bootstrap,
CSS, and JavaScript, apply essential programming language concepts when
creating HTML forms, select an appropriate web hosting service, and publish
your webpages for the world to see. Furthermore, you will study web designing
and development tools like Adobe Dreamweaver, Microsoft Expression, Visual
Studio and then how to use content management systems ( CMS ) like,
WordPress, Wix, Shopify etc, to create, publish and manage CMS based
dynamic website without any using coding or programming language. Finally,
you will be able to develop a working model for creating your own personal or
business websites in the future and be fully prepared to take the next step in a
more advanced web development or design course or specialization.

Main Expectations:
In short, the course under reference should be delivered by professional
instructors in such a robust hands-on manner that the trainees are comfortably
able to employ their skills for earning money (through wage/self-employment)
at its conclusion.
This course thus clearly goes beyond the domain of the traditional training
practices in vogue and underscores an expectation that a market-centric
approach will be adopted as the main driving force while delivering it. The
instructors should therefore be experienced enough to be able to identify the
training needs for the possible market roles available out there. Moreover, they
should also know the strengths and weaknesses of each trainee to prepare
them for such market roles during/after the training.

i. Specially designed practical tasks to be performed by the trainees have

been included in the Annexure-I to this document. The record of all
tasks performed individually or in groups must be preserved by the
management of the training Institute clearly labeling name, trade,
2 | Web Designing and Web Engineering
 session, etc so that these are ready to be physically inspected/verified
through monitoring visits from time to time. The weekly distribution of
tasks has also been indicated in the weekly lesson plan given in this
document.
ii. To materialize the main expectations, a special module on Job Search
& Entrepreneurial Skills has been included in the latter part of this
course (5th & 6th month) through which, the trainees will be made aware
of the Job search techniques in the local as well as international job
markets (Gulf countries). Awareness around the visa process and
immigration laws of the most favored labor destination countries also
form a part of this module. Moreover, the trainees would also be
encouraged to venture into self-employment and exposed to the main
requirements in this regard. It is also expected that a sense of civic
duties/roles and responsibilities will also be inculcated in the trainees to
make them responsible citizens of the country.

iii. A module on Work Place Ethics has also been included to highlight the
importance of good and positive behavior in the workplace in the line
with the best practices elsewhere in the world. An outline of such
qualities has been given in the Appendix to this document. Its
importance should be conveyed in a format that is attractive and
interesting for the trainees such as through PPT slides +short video
documentaries. Needless to say that if the training provider puts his
heart and soul into these otherwise non-technical components, the
image of the Pakistani workforce would undergo a positive
transformation in the local as well as international job markets.
To maintain interest and motivation of the trainees throughout the course,
modern techniques such as:
• Motivational Lectures
• Success Stories
• Case Studies
These techniques would be employed as an additional training tool wherever
possible (these are explained in the subsequent section on Training
Methodology).
Lastly, evaluation of the competencies acquired by the trainees will be done
objectively at various stages of the training and a proper record of the same
will be maintained. Suffice to say that for such evaluations, practical tasks
would be designed by the training providers to gauge the problem-solving
abilities of the trainees.

(i) Motivational Lectures

The proposed methodology for the training under reference employs
motivation as a tool. Hence besides the purely technical content, a trainer is
required to include elements of motivation in his/her lecture. To inspire the
trainees to utilize the training opportunity to the full and strive towards
professional excellence. Motivational lectures may also include general topics
such as the importance of moral values and civic role & responsibilities as a
Pakistani. A motivational lecture should be delivered with enough zeal to
produce a deep impact on the trainees. It may comprise of the following:

 Clear Purpose to convey the message to trainees effectively.

 Personal Story to quote as an example to follow.
3 | Web Designing and Web Engineering
  Trainees fit so that the situation is actionable by trainees and not
represent a just idealism.
 Ending Points to persuade the trainees on changing themselves.

A good motivational lecture should help drive creativity, curiosity, and spark
the desire needed for trainees to want to learn more.
The impact of a successful motivational strategy is amongst others commonly
visible in increased class participation ratios. It increases the trainees’
willingness to be engaged on the practical tasks for a longer time without
boredom and loss of interest because they can see in their mind's eye where
their hard work would take them in short (1-3 years); medium (3 -10 years) and
long term (more than 10 years).

As this tool is expected that the training providers would make arrangements
for regular well planned motivational lectures as part of a coordinated strategy
interspersed throughout the training period as suggested in the weekly lesson
plans in this document.
Course-related motivational lectures online link is available in Annexure-II.

(ii) Success Stories

Another effective way of motivating the trainees is using Success Stories. Its
inclusion in the weekly lesson plan at regular intervals has been recommended
till the end of the training.
A success story may be disseminated orally, through a presentation, or using
a video/documentary of someone that has risen to fortune, acclaim, or brilliant
achievement. A success story shows how a person achieved his goal through
hard work, dedication, and devotion. An inspiring success story contains
compelling and significant facts articulated clearly and easily comprehendible
words. Moreover, it is helpful if it is assumed that the reader/listener knows
nothing of what is being revealed. The optimum impact is created when the
story is revealed in the form of:-
 Directly in person (At least 2-3 cases must be arranged by the training
institute)
 Through an audio/ videotaped message (2-3 high-quality videos must
be arranged by the training institute)
It is expected that the training provider would collect relevant high-quality
success stories for inclusion in the training as suggested in the weekly lesson
plan given in this document.
Suggestive structure and sequence of a sample success story and its various
shapes can be seen in Annexure III.

(iii) Case Studies

Where a situation allows, case studies can also be presented to the trainees to
widen their understanding of the real-life specific problem/situation and to
explore the solutions.
In simple terms, the case study method of teaching uses a real-life case
example/a typical case to demonstrate a phenomenon in action and explain
theoretical as well as practical aspects of the knowledge related to the same. It
is an effective way to help the trainees comprehend in depth both the

4 | Web Designing and Web Engineering

 theoretical and practical aspects of the complex phenomenon in depth with
ease. Case teaching can also stimulate the trainees to participate in
discussions and thereby boost their confidence. It also makes the classroom
atmosphere interesting thus maintaining the trainee interest in training till the
end of the course.
Depending on suitability to the trade, the weekly lesson plan in this document
may suggest case studies be presented to the trainees. The trainer may adopt
a PowerPoint presentation or video format for such case studies whichever is
deemed suitable but only those cases must be selected that are relevant and
of a learning value.
The Trainees should be required and supervised to carefully analyze the
cases.
For this purpose, they must be encouraged to inquire and collect specific
information/data, actively participate in the discussions, and intended solutions
to the problem/situation.

Case studies can be implemented in the following ways: -

i. A good quality trade-specific documentary (At least 2-3

documentaries must be arranged by the training institute)

ii. Health & Safety case studies (2 cases regarding safety and
industrial accidents must be arranged by the training institute)

iii. Field visits (At least one visit to a trade-specific major industry/ site
must be arranged by the training institute)
Entry-level of
trainees Intermediate

Learning By the end of this course, students will be able to:

Outcomes of  Understand Domain Name Registration and Web Hosting Subscription
the course  Understand Linkage/Configuration of Web Hosting with Domain Name
via DNS
 Understand the basic programming language of HTML (Hyper Text
Markup Language) and PHP ( Hypertext Preprocessor ) with their most
common tags.
 Understanding of CSS (Cascade Style Sheet ) and Bootstrap and their
application.
 Understanding of JavaScript and its application.
 Understanding of Asp.Net and its application.
 Understanding of source code compiling software like Adobe
Dreamweaver, Microsoft Expression and Microsoft Visual Studio.
 Understand the well-known Php Based CMS – Content Management
Systems like WordPress.
 Understand the Difference between Website and Web Portal
 Create and Publish Static Website using HTML, CSS and JavaScript.
 Create and Publish Dynamic Website using PHP and Asp.Net.
 Create and Publish Dynamic Website using CMS of WordPress.
Course The total duration of the course: 6 months (26 Weeks)
Execution Plan Class hours: 4 hours per day

5 | Web Designing and Web Engineering

 Theory: 20%
Practical: 80%
Weekly hours: 20 hours per week
Total contact hours: 520 hours
Companies 1. Software Houses
offering jobs in 2. Digital Advertising Agencies
the respective 3. Web Agencies
trade 4. BPO Services Industry
5. Freelance Industry
6. IT Departments of all Major Industries

Job All over the world there is a high demand in the Web Development and Web
Opportunities Engineering industry for Welders in various fields Such as: junior and senior
web designer, junior and senior web developer, junior WordPress developer,
senior WordPress developer, and full stack web developer. With the help of
this course, we will be able to give technical trainings of web development to
our youth. There are also opportunities for start-up entrepreneurship due to
the high demand in the market in following designated jobs.
 Junior Web Developer
 Senior Web Developer
 WordPress Web Developer
 Full Stack Web Developer
No of Students 25
Learning Place Classroom / Lab
Instructional 1. HTML & CSS: Design and Build Web Sites
Resources Originally published: October 25, 2011
Author: Jon Duckett
Original language: English
2. JavaScript and JQuery: Interactive Front-End Web Development
Originally published: 2013
Author: Jon Duckett
Original language: English

3. Learning PHP, MySQL & JavaScript: With JQuery, CSS & HTML5
Originally published: 2011
Author: Robin Nixon

4. 1‑Hour WordPress 2021: A Visual Step‑by‑step Guide ...

Originally published: January 12, 2021
Author: Dr Andy Williams

5. C# 10 and .NET 6 - Modern Cross-Platform Development - Sixth

Edition: Build Apps, Websites, and Services with ASP.NET Core 6,
Blazor, and EF Core 6 Using Visual Studio 2022 and Visual Studio
Code
Originally published: November 9, 2021
Author: Mark Price

6 | Web Designing and Web Engineering

MODULES

Scheduled Module Title Learning Units Remarks

Weeks

Week 1 Orientation/Course  Motivational Lecture (For further

Introduction detail please see Page No: 3& 4)
 Job market
 Course Applications
Overview of Domain Home
 Institute/work ethics
Name, Web Hosting Assignment
 Describe Domain Name with respect
and Basic Website to the most common TLDs and their
Structuring  Task 1
importance
 Task 2
 Describe ICANN and demonstrate,
 Task 3
how it works.
 Describe, how to register a domain
Details may
name using any domain registrar.
be seen at
 Describe Web Hosting, Types, Web Annexure-I
Hosting Company, DNS and Common
Parameters of Web Hosting Account
 Describe Basic Website Structure
 Design a Basic Static Web Page to
print a single text line.
Week 2 Webpage Designing  Success stories ( For further detail
with HTML Basics please see Page No: 3& 4)
using Notepad
Students are introduced to:
 Extensions of Web Pages ( .html,
.htm, .php .aspx )
 Basic Structuring of HTML based
Web Page.
 Designing of HTML Web Page
with Title Tag
 Designing of HTML Web Page  Task 4
with displaying Background
Image Details may
 Designing of HTML Web Page be seen at
with displaying Inline Annexure-I
Image/images
 Designing of HTML Web Page
using inline styling of font, size
and color
 Designing of HTML Web Page
with embedding a YouTube
video
 Designing of HTML Web Page
with a table or multiple columns
and rows.

7 | Web Designing and Web Engineering

Week 3
Webpage Designing  Motivational Lecture( For further
using CSS and detail please see Page No: 3& 4)
JavaScript in Adobe Students are introduced to:
Dreamweaver or  Understanding of Dreamweaver
Microsoft software to create and manage
Expression html, php and dot net web pages
 Install Adobe Dreamweaver
Software on the laptop/desktop
 Understanding of Microsoft
Expression software to create  Task 5
and manage html, php and dot
net web pages Details may
 Install Microsoft Expression on be seen at
laptop/desktop Annexure-I
 Different webpage layouts (view)
of Dreamweaver and Microsoft
Expression ( code, design split ).
 Understanding of Basic CSS
 Understanding of Basic
JavaScript
 Define Basic Libraries
 Design a webpage using Basic
CSS and JavaScript as library
files.
 Design a basic HTML Form with
JavaScript Controls
Week 4
Designing a html-  Success stories ( For further detail
based website of please see Page No: 3& 4)
 Task 6
Multiple Webpages Students are introduced to learn:
with CSS and  Designing a complete HTML Details may
JavaScript, using based website of multiple web be seen at
Dreamweaver or pages, using basic CSS and Annexure-I
Microsoft JavaScript files in Dreamweaver
Expression or Microsoft Expression  Monthly
 Uploading the html website on Test 1
Live Cloud Server / Web Hosting
 Troubleshoot and resolve the
html website issue
Week 5  Motivational Lecture( For further
detail please see Page No: 3& 4)
Introduction to PHP
Students are introduced to:  Task 7
 Setup PHP on the local Machine.
 Basic Structure of PHP Details may
 Complete PHP Syntax and be seen at
Programming Language Basics. Annexure-I
 Handle Strings in Webpage with
String Functions
 Setup Apache Server Framework
on the laptop/desktop
8 | Web Designing and Web Engineering
  Setup Mysql Database on the
laptop/desktop
 Concept of already available
complete packaged Linux
framework
(Apache+PHP+Mysql) for
windows like xamp and wamp.
Week 6
Learn PHP  Success stories ( For further detail
Variables and please see Page No: 3& 4)
Functions Students are introduced to:  Task 8
 Define Variables and Constants.
 Write PHP program using Data Details may
Types - Strings, Numbers, be seen at
Double, Boolean and null. Annexure-I
 Learn the basics of defining
Functions, Passing Parameters
and Function Concepts.
Week 7 Learn PHP Arrays  Motivational Lecture( For further
and Loops detail please see Page No: 3& 4)
Students are introduced to:  Task 9
 Describe types of loops
 Describe usage of different types Details may
of loops. be seen at
 Write conditions and looping Annexure-I
statements in PHP
 Describe Arrays, its types and
their applications.
 Handling Arrays in PHP.
Week 8 Design & Develop  Success stories ( For further detail
PHP based Website please see Page No: 3& 4)
using Dreamweaver
or Microsoft Students are introduced to:  Task 10
Expression  Learn to organize the source  Task 11
code with Namespaces.
 Learn how to use PHP to handle Details may
HTML forms. be seen at
 Learn how to use PHP to Annexure-I
validate HTML forms.
 Learn how to use object-oriented  Monthly
programming in PHP. Test 2
 Build Complete PHP based
dynamic website using loops,
functions, arrays and forms.

9 | Web Designing and Web Engineering

Week 9
Introduction to  Motivational Lecture( For further
Basic Microsoft detail please see Page No: 3& 4)
ASP.Net Students are introduced to:
Development with  Download and install Visual
Visual Studio and Studio
MS SQL Server  Download and Install Microsoft
SQL Server  Task 12
 Understand the  Task 13
settings/preferences of Visual
Studio Details may
 Understand the be seen at
settings/preferences of MS SQL Annexure-I
Server
 Understand the purpose of
web.config
 Understand the concept of a
code-behind file
 Build a simple user interface
using drag and drop
Week 10
Learn how to  Success stories ( For further detail
connect MS SQL please see Page No: 3& 4)
database with
Asp.net Web Pages Students are introduced to:
 Learn how to connect ASP.NET
to SQL Server and view the
 Task 14
results live
 Learn how to use the List View
Details may
with Paging and SQL Server.
be seen at
 Learn how to update, delete and
Annexure-I
update data from a web page
with SQL Server
 Learn how to interact with
databases using AJAX

Week 11 Learn how to  Motivational Lecture (For further

generate text area, detail please see Page No: 3& 4)  Task 15
drop downs, radio
button, lists and Students are introduced to:
 Create and manage text area, Details may
tables, dynamically
drop downs, radio buttons, lists be seen at
and tables in web page using Annexure-I
visual studio and generate
asp.net web page/s.
Week 12
Learn How to  Success stories ( For further detail  Task 16
Create, Compile please see Page No: 3& 4)
and Build a .Net Details may
 Understand the concept of an
Web project and be seen at
object and its properties
run it in a web Annexure-I

10 | Web Designing and Web Engineering

 browser  Create a .net web project and
run it in a browser, and examine
the html code in a browser
 Create a complete dynamic web
project in visual studio with
connection of MS SQL
Database.
 Compile and Build the Source
code of asp.net and run the web
page in any browser
Start Preparing  Motivational Lecture( For further
your portfolio detail please see Page No: 3& 4)
Students are introduced to:
 the concept of design portfolios
 the concept of present design
work/projects in a professional manner
 websites that provide free portfolio
hosting such as Behance and Dribble
 creating a portfolio
 how to select work for presenting in
your portfolio
Build your CV Download professional CV template from
any good site (https://www.coolfreecv.com
or relevant)
 Add Personal Information
 Add Educational details
 Add Experience/Portfolio
 Add contact details/profile links
Week 13 Midterm

Week 14
Introduction to  Success stories ( For further detail
WordPress and please see Page No: 3& 4)
Xamp. Students are introduced to:

 WordPress and its directory

structure.
 Download, Install and Configure
xamp on your laptop or desktop
 Start Xamp services and Create  Home
mysql database using Assignment
phpMyAdmin of xamp
 Download, Install and Configure  Task 17
WordPress on your PC, so you
can learn without having to pay Details may
hosting or domain fees, using be seen at
xamp. Annexure-I
 Understand the main features of
WordPress
11 | Web Designing and Web Engineering
Week 15
Customize  Motivational Lecture (For further
WordPress Website detail please see Page No: 3& 4)
Students are introduced to:
 Navigate around the WordPress
dashboard, know what
everything does and how to use
it.
 Create pages and posts, and
most importantly, know the  Task 18
difference between the two.
 Correctly use post categories Details may
and tags and understand why be seen at
these can cause you problems at Annexure-I
the search engines if used
incorrectly.
 Create custom menus and
navigation systems that both
visitors and search engines will
find useful.
 Create a static homepage useful
for most websites, or a blog like
homepage useful for bloggers.
Introduction to  Motivational Lecture (For further
Freelancing detail please see Page No: 3& 4)
Students are introduced to:
 the concept of freelancing
 how to become freelance and create a
sustainable income
 pros and cons of freelancing 
 the ethical and professional way of
becoming a productive freelancer
 resources available for freelancing in
the field of design
 how to join freelancing sites
 the process of creating a freelancing
profile
Create an Create an account by following these
account profile steps:
on Fiverr (at least Step 1: Personal Info

two gigs) and Step 2: Professional Info
Upwork Step 3: Linked Accounts
Step 4: Account Security
Week 16
Understand plugins  Success stories ( For further detail ● Task 19
& themes and how please see Page No: 3& 4)
Details may
to find/install them Students are introduced to: be seen at
● Find, Install, activate and configure Annexure-I
12 | Web Designing and Web Engineering
 any given WordPress plugins
● Find, Install, activate and configure
any given WordPress theme
● Troubleshoot the errors and warnings.
Week 17 Secure and  Motivational Lecture (For further
Optimize detail please see Page No: 3& 4)
WordPress Website ● Task 20
Students are introduced to:
● Know how to configure WordPress for Details may
best results be seen at
● Protect their WordPress website from Annexure-I
hackers and spammers using given
modules/plugins  Monthly
● Create a Responsive Website that Test 3
looks good on any browser
● Optimize WordPress Website with
relevant plugins /modules
Week 18 Deploying  Success stories (For further detail
WordPress Website please see Page No: 3& 4)
on cloud server /  Task 21
web hosting Students are introduced to:  Task 22
 Getting the complete website backup  Task 23
from xamp ( local machine )
 Restoration of complete WordPress Details may
website backup on cloud server/web be seen at
hosting Annexure-I
 Connectivity of database with
WordPress website file using wp-
config file.
 Correction of Permalinks/URLs
Week 19 Understanding and  Motivational Lecture (For further
Configuration of detail please see Page No: 3& 4)
htaccess and
php.ini file at web Students are introduced to:
hosting  Understanding of importance of  Task 24
htaccess file, its parameters and
application Details may
 Understanding of importance of be seen at
php.ini file , its parameters and their Annexure-I
application
Week 20 On-Page SEO  Success stories ( For further detail  Task 25
please see Page No: 3& 4)
Details may
Students are introduced to: be seen at
 Understanding of On-Site SEO Annexure-I
with respect to:
o Optimization of Page Title as
per the google standards
o Optimization of Page Meta
title as per the google
standards

13 | Web Designing and Web Engineering

 o Optimization of Page Meta
Description as per the Google
Standards
o Optimization of Page Meta
Tags and Keywords as per
the google Standards.
Week 21 Employable Project/ ● Guidelines to the Trainees for
Assignment selection of students employable
(6 weeks) project like final year project (FYP)
i.e. 21-26 besides ● Assign Independent project to each
regular classes. Trainee
OR ● A project-based on trainee’s aptitude
On the job training ( and acquired skills.
2 weeks) ● Designed by keeping in view the
emerging trends in the local market as
well as across the globe.
● The project idea may be based on
Entrepreneur.
● Leading to successful employment.
● The duration of the project will be 6
weeks
 Final viva/assessment will be
conducted on project assignments.
 At the end of the session, the project
will be presented in a skills
competition
 The skill competition will be conducted
on zonal, regional, and National
levels.
 The project will be presented in front
of Industrialists for commercialization
 The best business idea will be placed
in the NAVTTC business incubation
center for commercialization.
OR
On the job training for 2 weeks:
 Aims to provide 2 weeks of industrial
training to the Trainees as part of the
overall training program
 Ideal for the manufacturing trades
 As an alternative to the projects that
involve expensive equipment
 Focuses on increasing Trainee’s
motivation, productivity, efficiency, and
quick learning approach.
Week 22 Learn Google Success stories ( For further detail  Task 26
Search Console please see Page No: 3& 4)
Students are introduced to: Details may
 Describe the importance of be seen at
google search console Annexure-I
 Learn to add property in google
14 | Web Designing and Web Engineering
 search console
 Learn the importance of
sitemap and generate Website
XML based sitemap using
plugin or sitemap generating
website and submit to Google
Search Console
 Learn the importance of
Robots.txt file, its parameters
and Generate or write a
Robot.txt file and Submit to
Google Search Console
 Crawling and indexing web
pages in google search console
 Troubleshooting and fixing the
web page errors.
How to search
and apply for jobs  Browse the following website
in at least two and create an account on
labor marketplace each website
countries (KSA,  Bayt.com – The Middle
UAE, etc.) East Leading Job Site
 Monster Gulf – The
International Job Portal
 Gulf Talent – Jobs in Dubai
and the Middle East
 Find the handy ‘search’ option at
the top of your homepage to
search for the jobs that best suit
your skills.
 Select the job type from the first
‘Job Type’ drop-down menu,
next, select the location from
the second drop- down menu.
 Enter any keywords you want to
use to find suitable job vacancies.
 On the results page you can
search for part-time jobs only, full-
time jobs only, employers only, or
agencies only. Tick the boxes as
appropriate to your search.
 Search for jobs by:
 Company
 Category
 Location
 All jobs
 Agency
 Industry
Week 23 Google Analytics Motivational Lecture (For further  Task 27
15 | Web Designing and Web Engineering
 detail please see Page No: 3& 4)
Students are introduced to: Details may
 Describe the importance of be seen at
Google Analytics Annexure-I
 Adding property in google
Analytics
 Configuring Property and
managing views in google
analytics
Week 24  Success stories ( For further detail
3rd Party Integration please see Page No: 3& 4)
with WordPress
Website Students are introduced to:
 Describe APIs ( Application
Programmers Interface ) and its types
with respect to its importance,
configuration and application
 Describe, how to integrate any API
with WordPress website
Week 25 E Commerce Motivational Lecture (For further detail
Website designing please see Page No: 3& 4)
and development in
WordPress using Students are introduced to:
WooCommerce  Describe E Commerce and its
difference from Conventional
Commerce  Task 28
 Describe major modules of E
commerce website like inventory Details may
management system, order be seen at
management system, delivery Annexure-I
management, payment methods and
customer support services.
 Find, Install and Configure
WooCommerce Plugin at
WordPress Website
 Manage the WooCommerce settings
as per the given criteria
Week 26 Entrepreneurship  Success stories ( For further detail Final
and Final please see Page No: 3& 4) Assessment
Assessment in  Job Market Searching
project  Self-employment
 Introduction
 Fundamentals of Business
Development
 Entrepreneurship
 Startup Funding
 Business Incubation and Acceleration
 Business Value Statement
 Business Model Canvas
 Sales and Marketing Strategies
16 | Web Designing and Web Engineering
  How to Reach Customers and Engage
 Stakeholders Power Grid
 RACI Model, SWOT Analysis, PEST
Analysis
 SMART Objectives
 OKRs
 Cost Management (OPEX, CAPEX,
ROCE, etc.)

Final Assessment
Annexure-I:

Tasks For Certificate in Web Designing and Web Engineering

Task Task Description Week

No.
1. Find the career path  Prepare a career path related to your course
and also highlight the emerging trends in the
local as well as international market
2. Work Ethics  Generate a report on Institute work ethics and Week 1
professionalism related to your course
3. Identify Top Level  Prepare a list of top level domain names, web
Domain Names, hosting companies and build a simple and
(TLDs), Web Hosting basic HTML website with basic structure to print
Companies and a single text line.
Structure of Basic
HTML Web page in
notepad
4.
Build an HTML web  Identify different web page extensions for html,
page with given php and asp.net.
basic parameters  Build an HTML web page with background
(tags) image, inline image, embedding youtube video,
different columns and rows, table and inline
styling of font size and color in notepad
Week-2
5. Build an HTML web
 Install Adobe Dreamweaver
page with separate
 Install Microsoft Expression
CSS and JavaScript
file in Adobe  Demonstrate the settings/preferences in Adobe
Dreamweaver and Dreamweaver
Microsoft  Demonstrate the settings/preferences in
Expression Microsoft Expression Week 3
 Demonstrate basic html libraries in the main
web page
 Build a basic CSS file with basic (sample)
stylings code, call it in the main web page and

17 | Web Designing and Web Engineering

 check its working
 Build a basic JavaScript file with basic (sample)
code, call it in the main web page and check its
working
6. Build a complete  Build a complete website of multiple (4-5) web
HTML based website pages, with main menu, styling and scripting
with 4-5 web pages through separate css and js files in Adobe
using separate CSS Dreamweaver or Microsoft Expression
and JavaScript file
Week 4
in Dreamweaver or
Microsoft
Expression

7. Setup PHP, Apache  Download and Install PHP (latest version ) on

and MySQL the laptop/desktop
Week 5
Environment on  Download and install latest version of Apache
Windows machine. on the laptop/desktop
 Setup MySQL database
Demonstrate basic  Build a sample webpage in PHP and run it on
structure of PHP and the installed Apache/php/MySQL environment
build a sample static
webpage in PHP
8. Demonstrate PHP 
Demonstrate PHP Variables and Constants
Variables and their 
Build a webpage with writing a PHP Week 6
usage program using Data Types - Strings,
Numbers, Double, Boolean and null.
 Use php function in the webpage.
9. Demonstrate Loops  Demonstrate different types of loops in PHP
and Arrays in PHP based webpage
web page  Demonstrate different types of arrays in PHP
based webpage
Week 7
10. Build a complete  Build a complete static website of 4 to 5 web
static website of 4 to pages in PHP using php variables, functions,
5 web pages in PHP loops, arrays using separate CSS and
JavaScript files in Adobe Dreamweaver or
Microsoft Expression
11. Build a complete
 Build a complete dynamic website of 4 to 5 web Week 8
dynamic website of
pages in PHP with mysql database, using php
4 to 5 web pages in
based web forms and their connectivity with the
PHP with Mysql
database
12. Installation of MS
 Demonstrate the installation of MS Visual
Visual Studio and
Studio and MS SQL Server and their different Week 9
MS SQL Server
layouts.
 Demonstrate the basic settings & preferences
of MS Visual Studio and MS SQL Server

18 | Web Designing and Web Engineering

 13. Demonstrate the  Understand the purpose of web.config
concept of  Understand the concept of a code-behind
web.config file build file
a simple user
interface in visual  Build a simple user interface using drag and
studio drop.
14. Demonstrate MS  Create ms sql database using Sql server
SQL Server  Connect database with asp.net web pages Week 10
database connection using web.config
with asp.net web  Demonstrate how to update, delete and
pages update data from a web page with SQL
Server
 Interact with MS SQL databases using
AJAX in visual studio
15. Demonstrate to  Create and manage text area, drop downs,
generate text area, radio buttons, lists and tables in asp.net web
Week 11
drop downs, radio page using visual studio
button, lists and
tables, dynamically
16. Create, Compile and  Demonstrate the concept of an object and
Build an asp.net its properties in visual studio
webpage with its  Create a .net web project and run it in a
connection with MS browser, and examine the html code in a Week 12
SQL database browser
 Create a complete dynamic web project in
visual studio with connection of MS SQL
Database.
 Compile and Build the Source code of asp.net
and run the web page in any browser
17. Download, Install  Download, Install and Configure xamp on
and Configure Xamp your windows based laptop or desktop
 Start Xamp Services and Create Mysql
Download, Install database using xamp via phpMyAdmin
and Configure  Download and Install WordPress with Mysql
Week 14
WordPress database
18. Customize  Demonstrate the basic settings of
WordPress Website WordPress dashboard which includes,
with basic settings general, permalinks, reading and writing
configurations.
 Create pages and posts and demonstrate
the difference of these two.
 Upload media ( images and video ), and use Week 15
them in the page and post.
 Create custom menus and navigation
systems that both visitors and search
engines will find useful.
 Create a static homepage useful for most
websites, or a blog like homepage useful for
bloggers.

19 | Web Designing and Web Engineering

 Find, Install and ● Find, Install, activate and configure any given
Activate plugins & WordPress plugins
19. themes ● Find, Install, activate and configure any given Week 16
WordPress theme
 Troubleshoot the errors and warnings
Secure WordPress  Find, Download, Install and Activate WordPress
Website Security Plugins like Wordefence and Succuri
Week 17
 Generate API Key of Succuri Plugin and do the
Optimize WordPress needful hardening settings
20. Website
 Scan the website using wordefence plugin and
generate the report of infected files
 Optimize website using plugin of Autoptimize
 Optimize website images using Smush (Plugin)
Generate Website  Complete website backup from xamp ( local
Backup machine ) manual: website files and database
separately.
21.
 Complete website backup using WordPress
plugin ( WP Migrate )

Restore Website  Restoration of complete WordPress website Week 18

22. Backup backup on cloud server/web hosting using
cpanel backup restoration module
Troubleshoot the  Connectivity of database with WordPress
Connectivity of website file using wp-config file.
23.
mysql database on  Correction of Permalinks/URLs ( from localhost
LIVE web hosting to live domain name )
Configuration of  Configure htaccess file to manage the
htaccess and php.ini parameters of website errors, warnings,
file at web hosting notices, path and SSL
24.  Configure the php.ini file to manage the Week 19
parameters of max file upload size, max php
variables, max processing time, max file
attachment size and php version.
On-Page SEO  As per the SEO standards Optimize the main
home page of WordPress website with respect
to:
25.
o Page Meta Title
o Page Meta Description
o Page Meta Tags and Keywords
Create Google  Adding website URL as property in google Week 20
Search Console search console
Account and Submit  Generate Website XML based sitemap
Website as a and submit to Google Search Console
property in it.  Generate Robot.txt file and Submit
26.
 Crawl and index web pages in google
search console
 Generate a report of errors and warning, if
find any on the website, using google
search console.

20 | Web Designing and Web Engineering

 Create Google  Create Google Analytics Account and add
Analytics and property in google Analytics
27. Submit Website as a  Configuring Property with verification code and
property in it. managing views in google analytics

E Commerce  Demonstrate E Commerce website and its Week

Website designing difference from Conventional Commerce
21-22
and development in  Find, Download, Install and Activate
WordPress using WooCommerce Plugin in WordPress Website
WooCommerce  Manage Settings of WooCommerce Pluginwith
28. respect to:
o General
o Payment
o Shipping
o Emails
o Accounts and Privacy
Build your CV Download professional CV template from any good Week
site (https://www.coolfreecv.com or relevant)
21-26
 Add Personal Information
29.
 Add Educational details
 Add Experience/Portfolio
 Add contact details/profile links
Create an account Create an account by following these steps: Week
profile on Fiverr (at Step 1: Personal Info
21-26
least two gigs) and Step 2: Professional Info
30.
Up-work Step 3: Linked Accounts
Step 4: Account Security

How to search and  Browse the following website and create an Week
apply for jobs in at account on each website 21-26
least two labor  Bayt.com – The Middle East Leading Job
marketplace Site
countries (KSA,  Monster Gulf – The International Job
UAE, etc.)
Portal
 Gulf Talent – Jobs in Dubai and the
Middle East
 Find the handy ‘search’ option at the top of your
homepage to search for the jobs that best suit
31.
your skills.
 Select the job type from the first ‘Job Type’
drop-down menu, next, select the location from
the second drop-down menu.
 Enter any keywords you want to use to find
suitable job vacancies.
 On the results page you can search for part-
time jobs only, full-time jobs only, employers
only, or agencies only. Tick the boxes as
appropriate to your search.

21 | Web Designing and Web Engineering

  Search for jobs by:
 Company
 Category
 Location
 All jobs
 Agency
 Industry

Annexure-II:

Motivational Lectures

Web Designing Full Course In Urdu / Hindi Language Class 1 Intro and Basic || Wasi

https://www.youtube.com/watch?v=nq3IEtyrcpM

How to Start working on Fiverr or Upwork? - Urdu/Hindi

https://www.youtube.com/watch?v=a0c5n0Uec9Q

WordPress Customization with Porto Theme For E Commerce - Urdu/Hindi

https://www.youtube.com/watch?v=ju2QKM7Jdc4

Hisham Sarwar Motivational Story | Pakistani Freelancer

https://www.youtube.com/watch?v=CHm_BH7xAXk

21 Yr Old Pakistani Fiverr Millionaire | 25-35 Lakhs a Month Income | Interview

https://www.youtube.com/watch?v=9WrmYYhr7S0

22 | Web Designing and Web Engineering

Success Story of a 23 Year - Old SEO Expert | How This Business Works | Urdu Hindi
Punjabi

https://www.youtube.com/watch?v=tIQ0CWgszI0

Failure to Millionaire - How to Make Money Online | Fiverr Superhero Aaliyaan Success
Story

https://www.youtube.com/watch?v=d1hocXWSpus

How To Propel Your Career- Women in Welding

https://www.youtube.com/watch?v=S_LuVnW-UdQ

Underwater Welder | I AM WOMAN | Lifetime

https://www.youtube.com/watch?v=LZiIXOkE-rc

23 | Web Designing and Web Engineering

 Annexure-II:

SUGGESTIVE FORMAT AND SEQUENCE ORDER OF MOTIVATIONAL LECTURE.

Mentor
Mentors are provided an observation checklist form to evaluate and share their observational
feedback on how students within each team engage and collaborate in a learning environment.
The checklist is provided at two different points: Once towards the end of the course. The
checklists are an opportunity for mentors to share their unique perspective on group dynamics
based on various team activities, gameplay sessions, pitch preparation, and other sessions, giving
insights on the nature of communication and teamwork taking place and how both learning
outcomes and the student experience can be improved in the future.

Session- 1 (Communication):
Please find below an overview of the activities taking place Session plan that will support your
delivery and an overview of this session’s activity.

Session- 1 OVERVIEW
Aims and Objectives:
 To introduce the communication skills and how it will work
 Get to know mentor and team - build rapport and develop a strong sense of a team
 Provide an introduction to communication skills
 Team to collaborate on an activity sheet developing their communication, teamwork, and
problem-solving
 Gain an understanding of participants’ own communication skills rating at the start of the
program

Activity: Participant Time Teacher Time Mentor Time

Intro Attend and
contribute to the
scheduled.
Understand good
communication skills
and how it works.
Understand what good
communication skills
mean
Understand what skills
are important for good
communication skills
Key learning Resources: Enterprise skills
outcomes: developed:
 Understand the  Podium  Communication
communication skills  Projector  Self Confidence
and how it works.  Computer  Teamwork
 Understand what  Flip Chart

24 | Web Designing and Web Engineering

 communication skills  Marker
mean
 Understand what
skills are important
for communication
skills

Schedule Mentor Should do

Welcome: Short welcome and ask the Mentor to introduce him/herself.
5 min Provide a brief welcome to the qualification for the class.
Note for Instructor: Throughout this session, please monitor the
session to ensure nothing inappropriate is being happened.
Icebreaker: Start your session by delivering an icebreaker, this will enable
10 min you and your team to start to build rapport and create a team
presentation for the tasks ahead.
The icebreaker below should work well at introductions and
encouraging communication, but feel free to use others if you
think they are more appropriate. It is important to encourage
young people to get to know each other and build strong team
links during the first hour; this will help to increase their
motivation and communication throughout the sessions.
Introduction & Onboarding: Provide a brief introduction of the qualification to the class and
20mins play the “Onboarding Video or Presentation”. In your introduction
cover the following:
1. Explanation of the program and structure. (Kamyab jawan
Program)
2. How you will use your communication skills in your
professional life.
3. Key contacts and key information – e.g. role of teacher,
mentor, and SEED. Policies and procedures (user agreements
and “contact us” section). Everyone to go to the Group Rules tab
at the top of their screen, read out the rules, and ask everyone to
verbally agree. Ensure that the consequences are clear for using
the platform outside of hours. (9am-8pm)
4. What is up next for the next 2 weeks ahead so young people
know what to expect (see pages 5-7 for an overview of the
challenge). Allow young people to ask any questions about the
session topic.
Team Activity Planning: MENTOR: Explain to the whole team that you will now be
30 minutes planning how to collaborate for the first and second collaborative
Team Activities that will take place outside of the session. There
will not be another session until the next session so this step is
required because communicating and making decisions outside
of a session requires a different strategy that must be agreed
upon so that everyone knows what they are doing for this activity
and how.
 “IDENTIFY ENTREPRENEURS” TEAM ACTIVITY
 “BRAINSTORMING SOCIAL PROBLEMS” TEAM
ACTIVITY”

25 | Web Designing and Web Engineering

 As a team, collaborate on a creative brainstorm on social
problems in your community. Vote on the areas you feel most
passionate about as a team, then write down what change you
would like to see happen.
Make sure the teams have the opportunity to talk about how they
want to work as a team through the activities e.g. when they
want to complete the activities, how to communicate, the role of
the project manager, etc. Make sure you allocate each young
person a specific week that they are the project manager for the
weekly activities and make a note of this.
Type up notes for their strategy if this is helpful - it can be
included underneath the Team Contract.

Session Close: MENTOR: Close the session with the opportunity for anyone to
5 minutes ask any remaining questions.
Instructor:
Facilitate the wrap-up of the session. A quick reminder of what is
coming up next and when the next session will be.

26 | Web Designing and Web Engineering

 Annexure-III

SUCCESS STORY

S. No Key Information Detail/Description

1. Self & Family background Abdul Mateen, a passionate and creative freelance
website designer, graphic designer, and front-end
developer who has earned four years of experience and
skills in this field.

He is from a small village in the Cholistan area where

the residents make a living by raising livestock and
farming. I belong to the area where the majority of the
population live a nomadic lifestyle and have limited
resources of income. Understanding the changing
world’s paradigm, businesses, and entrepreneurship
opportunities, I decided to choose my own destiny and
move to city area. Like every other rebellion face, I was
also criticized for choosing a different path but history
knows “when there is a will, there is always a way.”

Later, he decided to move to Hasilpur Tehsil for my

matriculation degree. I passed matriculation exam with
distinctive marks and I got the laptop from Government
of Punjab because of my good grades. This was the
time when I started interacting with computer and tech
gadgets and from here my love for computers and tech
gadgets started. Because of this love for computers, I
was even willing to work in a computer shop, but my
friends and family were not allowing me to do this. So,
he decided to shift to Islamabad primarily for a
brighter future.

Today due to his consistent efforts; He has made a

respectable name in the freelancing industry and having
an impressive portfolio in his hand.

If at first, you don’t succeed, try try again

2. How he came on board In Islamabad, he got a 3 Year diploma in Computer

NAVTTC Training/ or got Information Technology from Iqra College of
trained through any other Technology and got the first position in Computer
Information Technology from Khyber Pakhtunkhwa
source
Technical Board along with learning of freelancing
expertise.

27 | Web Designing and Web Engineering

3. Post-training activities Along with diploma, he started learning graphic
designing as a student in the freelancing field. he also
had support from my uncle who is a senior software
engineer as helped me learn and upgrade the most in-
demand skills in this field.

He resumed my struggle by enhancing my expertise

from different tutorials available on the YouTube
channels and after almost one and a half years of
struggle, I created an account on Fiverr and
received the first order of my career of $5 only. This
created a spark inside me as I wasn’t able slept that
night due to sheer happiness.

4. Message to others Take the training opportunity seriously

Impose self-discipline and ensure regularity
(under training) Make Hard work pays in the end so be always ready for
the same.

Note: Success story is a source of motivation for the trainees and can be presented in several
ways/forms in a NAVTTC skill development course as under: -

1. To call a passed out successful trainee of the institute. He will narrate his success story to
the trainees in his own words and meet trainees as well.
2. To see and listen to a recorded video/clip (5 to 7 minutes) showing a successful trainee
Audio-video recording that has to cover the above-mentioned points.*
3. The teacher displays the picture of a successful trainee (name, trade, institute,
organization, job, earning, etc) and narrates his/her story in the teacher’s own motivational
words.

* The online success stories of renowned professional can also be obtained from Annex-II

28 | Web Designing and Web Engineering

 Annexure-IV:
Workplace/Institute Ethics Guide

Work ethic is a standard of conduct and values for job performance. The modern definition of what
constitutes good work ethics often varies. Different businesses have different expectations. Work
ethic is a belief that hard work and diligence have a moral benefit and an inherent ability, virtue, or
value to strengthen character and individual abilities. It is a set of values-centered on the
importance of work and manifested by determination or desire to work hard.

The following ten work ethics are defined as essential for student success:

1. Attendance:
Be at work every day possible, plan your absences don’t abuse leave time. Be punctual
every day.
2. Character:
Honesty is the single most important factor having a direct bearing on the final success of
an individual, corporation, or product. Complete assigned tasks correctly and promptly.
Look to improve your skills.
3. Team Work:
The ability to get along with others including those you don’t necessarily like. The ability to
carry your weight and help others who are struggling. Recognize when to speak up with an
idea and when to compromise by blend ideas together.
4. Appearance:
Dress for success set your best foot forward, personal hygiene, good manner, remember
that the first impression of who you are can last a lifetime
5. Attitude:
Listen to suggestions and be positive, accept responsibility. If you make a mistake, admit it.
Values workplace safety rules and precautions for personal and co-worker safety. Avoids
unnecessary risks. Willing to learn new processes, systems, and procedures in light of
changing responsibilities.
6. Productivity:
Do the work correctly, quality and timelines are prized. Get along with fellows, cooperation
is the key to productivity. Help out whenever asked, do extra without being asked. Take
pride in your work, do things the best you know-how. Eagerly focuses energy on
accomplishing tasks, also referred to as demonstrating ownership. Takes pride in work.
7. Organizational Skills:
29 | Web Designing and Web Engineering
 Make an effort to improve, learn ways to better yourself. Time management; utilize time and
resources to get the most out of both. Take an appropriate approach to social interactions
at work. Maintains focus on work responsibilities.
8. Communication:
Written communication, being able to correctly write reports and memos.
Verbal communications, being able to communicate one on one or to a group.
9. Cooperation:
Follow institute rules and regulations, learn and follow expectations. Get along with fellows,
cooperation is the key to productivity. Able to welcome and adapt to changing work
situations and the application of new or different skills.
10. Respect:
Work hard, work to the best of your ability. Carry out orders, do what’s asked the first time.
Show respect, accept, and acknowledge an individual’s talents and knowledge. Respects
diversity in the workplace, including showing due respect for different perspectives,
opinions, and suggestions.

30 | Web Designing and Web Engineering