Government of Pakistan

National Vocational and Technical Training Commission

Prime Minister’s Hunarmand Pakistan Program

"Skills for All"

Course Contents / Lesson Plan

Course Title: CIT ( Web Development )
Duration: 3 Months

Revised Edition
 Trainer Name

Author Name Muhammad Asfand Naveed ( CEO Proglabs )

Course Title CIT ( Web Development )

Objectives of This comprehensive course offers participants the chance to forge a rewarding
Course career in the dynamic realm of web application development. It's the ultimate web
development program, encompassing everything you need to know from the basics
to advanced tools and techniques. Starting from the ground up, you'll delve into
HTML5, CSS, JS, jQuery, PHP, MySQL, AJAX, LARAVEL, and essential website design
concepts. By mastering common tasks required for both development and
administration, you'll be well-equipped to thrive in the ever-evolving world of web
development.
Entry-level of
Intermediate / Matric Science
trainees
Learning Knowledge Proficiency Details
Outcomes of
● Knowledge to build REAL world creative and modern website from very
the course
scratch using modern web technologies
● Knowledge of new ways of coding, tips & tricks and modern best
practices to build a professional website.
● Knowledge of wire-framing, HTML5, CSS3, jQuery and Bootstrap (+BS 5)
Framework
● Knowledge to build a fully responsive website which will look perfect on all
the small & wide screens.
● Knowledge of PHP, OOP, AJAX, MySQL

● The basics of Laravel such as installation, routing, template, controller,

model, migration, seeder etc.
● You will make your first crud app with Laravel

● You will make Restful API

● You will make Gallery app with Laravel and jQuery

● You will learn blade template in Laravel

Skills Proficiency Details

● Students of web development
 ● Anyone who wants to learn how to build websites using PHP

● Anyone interested in a proper certification in PHP course in Lahore or any

other city
● People already working as web developers who want to learn the latest
techniques and tricks in PHP based web development
● Employees of web development companies and software houses who want
to polish their skills further in Web Development especially with focus on
PHP
● Business owners who want to build and run their own websites
themselves
Course Execution The total duration of the course: 3 months (12 Weeks)
Plan Class hours: 4 hours per day
Theory: 20%
Practical: 80%
Weekly hours: 20 hours per week

Total contact hours: 240 hours

Companies 1. Upwork
offering jobs in the 2. Freelancing
respective trade 3. Fiverr
4. Government Institutes
5. Software Houses
6. Crossover
7. All Private Institutes who are managing software
Job Opportunities
All over the world there is a high demand in the Information Technology industry
for developers in various fields such as mobile application developer, web
developer and graphic designer. Smartphones have brought about revolution;
Animation technology has come a long way since the early days of hand-drawn
cartoons. Nowadays you will find websites and apps on everything. This increase in
usage of websites, apps and android smart devices has created new opportunities
for all to earn big and make a career out of this field. With the help of this course,
we will be able to give technical training in Information Technology to our youth.
There are also opportunities for start-up entrepreneurship due to the high demand
in the market in following designated jobs;
● Software Engineers

● Mobile App Developers

● DBAs

● Web Developers

● Network Administrator

● IT Support Officer

● Manager / Assistant Manager IT

No of Students 25
Learning Place Classroom / Lab
Instructional
● https://www.w3schools.com/
Resources
● https://www.tutorialspoint.com/

● https://www.php.net/

● https://laravel.com/

● Beginning Laravel

● Build Websites with Laravel 10.x

Scheduled Module Days Learning Units Home
Weeks Title Assignment
Motivational Lecture
Week 1
Course Introduction
Day 1 Job market
Course Applications
Introduction to World Wide Web
Website
Day 2 Web Pages
Different types of websites

Architecture of static and dynamic

Webpages
Day 3
Compare Static websites with
Dynamic websites
Introducti Difference between Frontend &
on & Backend Language
Front-End Install Chrome Browser Chrome
Developm
ent Web Developer Tools
(Basics)
Install VS Code Editor
Day 4
What Is HTML?
HTML building blocks
Basic HTML Page Structure
Headings & Paragraphs

HTML Formatting
Day 5 HTML Attributes

Block Level Element vs Inline Element

Week 2 HTML Tag vs. Element ● Task
1 To
Day 1 HTML Image & Link
● Task
 17
HTML Table HTML Lists
Day 2

Day 3 HTML Forms

HTML Layout Elements HTML Iframe
Day 4 HTML Media Elements

HTML & CSS

What is CSS?
Day 5 CSS Syntax Selector Types

Inclusion
Week 3
CSS Rules Overriding
CSS Comments
Day 1 CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS &
Bootstra Day 2 CSS Padding ● Task
p 18 To
CSS Height/Width
● Task 25
CSS Lists
CSS Tables
Day 3 CSS Display
CSS Float
What Is Bootstrap?
Bootstrap Grid System
Day 4 Bootstrap Colors
Bootstrap Buttons
 Bootstrap Navbar

Bootstrap Modal
Day 5 Bootstrap Tables

Bootstrap Forms

What is JavaScript?
Week 4
Day 1 JavaScript Output Statements

JavaScript Variables
JavaScript Operators
Day 2 Conditional Statements ● Task
26 To
JavaScript Loop Types
● Task 29
Day 3 ● for-loop

● while loop

● do While loop
Day 4 JavaScript Functions
Day 5 JavaScript Objects & Arrays
What Is jQuery?
Week 5
Day 1 jQuery Setup

jQuery Selectors

Day 2 jQuery Events

jQuery Effects
jQuery & ● Task 30
PHP
Overview of PHP

Variables
Day 3 Constants,

Output Statements

Operators
Day 4
Decision Making
 Day 5
Loop Types

Day 1 Functions
Week 6 ● Task
31 To
Day 2 Arrays
● Task
Day 3 PHP Forms 34

Midterm Day 4 Midterm Exam

Exam
Day 5 Misterm Exam

Day 1 Object Oriented Programming

Week 7 Class
Object,
PHP & OOP Access Specifiers/Modifiers
Member Variables

Static Variables
Day 2 Member Functions
● Task
Inheritance
35 To
● Task 37

Parent class

Child Class
Day 3 Constructors

Destructors

Polymorphism

Day 4 Function Overloading

Abstraction Encapsulation

Session
 Day 5 Cookies

Databases Introduction

Database Types

What is a Query
Week 8
Day 1 SQL Basic Commands

MYSQL Joins.
PHP & SQL Creating a database using ● Task 38
PHP MY ADMIN.

Day 2 DDL, DML & DRL operations

in SQL

Day 3 DB Integration with PHP

Day 4 CRUD Operations using

Day 5 MYSQL & php

Laravel Day 1 Introduction to Laravel

Week 9
Laravel Project Setup
● Task 39

Day 2 Laravel Architecture

Concepts

Day 3 Routing

Laravel Day 4 Blade Template

Day 5 Migrations

Day 1 Migrations
 Day 2
Week 10 Relationships
Laravel
● Task 40
Day 3 Relationships
Day 4 Security
Day 5 Security
Day 1 [Project 1] crud application
Week 11
Day 2 [Project 1] crud application

Project Day 3 [Project 3] Gallery App

Day 4 Final Project (data crud + gallery combo)
Day 5 Final Project (data crud + gallery combo)
Day 1 Project Evaluation
Week 12
Project Day 2 Project Evaluation
Evalua Day 3 Project Evaluation
tion &
Final Day 4 Project Evaluation
Term
Day 5 Final Term Exam
Exam
 Annexure-I:Tasks for Advance Web Application Development

Task no. Task Description Week

1 Using Heading, Write an HTML code that displays all 6 headings with each
Paragraph, Line
Break,and Horizontal heading on new line having paragraphs and the end Week 2
Rule Tags

of each paragraph; place a line (Horizontal Rule).

2 Use Comments Make a webpage Comment.html having text “I am
and Include Tags in
a single code. Internal Text” with having commented text “I am
Comment” that will
not display in the webpage. Make another webpage
with

name IIncluded.html containing the text “I am

External Text” and

display its contents in Comment.html webpage.

3 Use Image Tag with Insert image in the webpage with height=30,
attributes.
width=30 having 3 border size and when we bring
mouse on the image, it displays text “I am Image in
Webpage”.
4 Use of Hyperlink Use <A HREF> . . . </A> Tag with all attributes to
create a Local Link to any file.
Make second link which is used to link High Level
Directory. Make third link which is used to link any
Internet website.
Lastly make fourth link which contains an email
address and when user clicks the link, email editor
opens up.
5 Background image Make a webpage with image as a Background and
when we scroll this webpage, the image stays fix and
only the top of the webpage scrolls.
 6 Make a complete html Make the following Report Form (The Country Dropdown
form
List must contain 7 Countries in Ascending Order but when
form is loaded, by default Pakistan is Selected.

Task Task Description Week

No.
7 Buttons with Make the Submit and Reset buttons in the form having
images
pictures on it instead of simple text.

External Style Call an External Style Sheet in the webpage in which Font Size
8 Sheet
of the text must be 77 points Color of the text must be green
and background of the webpage must be yellow.
9 Use of on Click Change the color of the text when it is clicked.
Event
Use of on Mouse When we bring the mouse on the image, the image changes its
10 Over
Event position.
11 Navigation bar Make two navigation bars with CSS using class and id attribute.
using CSS
One should be on the top of the page and the second should be
displayed on left of the page in shape of
a column.
12 Forms Make a login and signup form on different pages that should be
displayed in the center of the page using CSS
and html.
13 Dropdowns Make dropdowns with nested HTML tags and CSS.

14 Bootstrap based Make different sizes of columns using bootstrap classes.

columns
15 Forms using Make a form using Bootstrap classes for buttons and
bootstrap
forms.
16 Progress Bar A progress bar for student’s skills in coding languages
using bootstrap.
17 Bootstrap based Make 3 pages of home page, admission form, and about
pages
us page using bootstrap classes with navigation bars, headers,
footers and forms.

18 Use Output Display your name on the screen using JavaScript. Week –3
Statement
of JavaScript
19 Use of If…else Use If...else statement of JavaScript to write a code to Display
Condition
“Good Morning” or “Good Afternoon” according to
current Time.
20 Use of switch Use the switch statement to display “today is (whatever day it
statement
is)” according to the current day.
21 Use of for loop Use of loop to display a string of all the names of months
using JS functions and variables.
22 Alert message Make an alert message display on the screen if the user
clicks a button.
23 JavaScript Make a JavaScript calculator that should answer addition,
calculator
multiplication and subtraction question using JavaScript
variables.
24 Hide and show in Make a paragraph line and two buttons named “hide” and
jQuery “show” using HTML and hide the paragraph if the button “hide”
is clicked, and show the paragraph if the button “show” is
clicked.

25 Slide down Make a button that slides down some content when clicked using
button jQuery.

26 Use of Switch Use the Switch statement of PHP to display the current day of the Week-4
Statement week.

Loops to display Write a Program to display count, from 5 to 15 (as shown below)
27 numbers on using following:
screen
● For Loop

● While Loop

● Do…while Loop

28 Use Output Display your name on the screen using PHP.

Statement
of PHP
Use of Use the If...else statement of PHP to write a code to Display
29 If…else “Good Morning” or “Good Afternoon” according to current time.
Conditi
on
30 Using Create a web page that includes a button and a paragraph Week-5
JQuery element. When the button is clicked, use jQuery to change the
text of the paragraph to a predefined message.
31 Factorial of Write a program to calculate factorial of a number using for Week-6
Number loop in PHP.
32 While Loop to Write a Program to create following pattern using while loop:
display
the pattern *
**
***
****
*****
******
*******
********

33 Do…while Loop to Write a Program to display count, from 1 to 5 using PHP

display the
numbers do...while loop as given below:
1
2
3
4
5
34 Using Array and You need to write a program in PHP using for...each loop to
for…each loop
remove specific elements by value from an array using PHP
program.
Hint:

● Take an array with list of month names.

● Take a variable with the name of value to be deleted

Task Task Description Week

No.
35 Sort the Array Write a function to sort an array Week-7
Elements
36 Find the case of Write a PHP function that checks whether a string is all
string
lowercase.

37 Find String Length Write a PHP program to find the length of the string.
Hint:

● You have to use one variable.

● You must use a built-in PHP String Function.

38 CRUD in PHP Create a PHP web application with CRUD functionality for Week-8

managing user information, including fields for id, first

 name, last name, email, and phone number, enabling users
to create, read, update, and delete
records stored in a MySQL database.
39 Laravel Task 1 Integrate a master template into a Laravel web application Week-9

to ensure consistent layout and design across multiple

pages, utilizing HTML, CSS, and JavaScript, extending the
master template in individual views, and populating dynamic
content sections with
data retrieved from the database or external sources.
40 Laravel Task 2 Create a Laravel web application that demonstrates Week-10

one-to-one, one-to-many, one-to-many inverse, and

polymorphic (one-to-many) relationships, allowing
CRUD operations and proper data management for
each relationship type.
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
● Projector ● Self Confidence
skills and how it
works.
● Computer ● Teamwork
● Understand what
communication ● Flip Chart
skills mean
● Marker
● 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: 10 Start your session by delivering an icebreaker, this will

min enable 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 & Provide a brief introduction of the qualification to the class
Onboarding: and play the “Onboarding Video or Presentation”. In your
20mins 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: 30 MENTOR: Explain to the whole team that you will now be
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”
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: 5 MENTOR: Close the session with the opportunity for anyone
minutes to 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.
 MOTIVATIONAL LECTURES LINKS.

TOPIC SPEAKER LINK

How to Face Qasim Ali Shah https://www.youtube.com/watch?v=OrQte08Ml90
Problems In
Life
Just Control Qasim Ali Shah https://www.youtube.com/watch?v=JzFs yJt-w
Your
Emotions
How to Qasim Ali Shah https://www.youtube.com/watch?v=PhHAQEGehKc
Communicate
Effectively
Your ATTITUDE Tony Robbins https://www.youtube.com/watch?v=5fS3rj6eIFg
is Les Brown David
Everything Goggins Jocko
Willink Wayne
Dyer
Eckart Tolle
Control Your Jim Rohn Les https://www.youtube.com/watch?v=chn86sH0O5U
EMOTIONS Brown TD
Jakes
Tony Robbins
Defeat Fear, Shaykh Atif https://www.youtube.com/watch?v=s10dzfbozd4
Build Confidence Ahmed

Wisdom of Learn Kurooji https://www.youtube.com/watch?v=bEU7V5rJTtw

the Eagle
The Power of Titan Man https://www.youtube.com/watch?v=r8LJ5X2ejqU
ATTITUDE
STOP Arnold https://www.youtube.com/watch?v=kzSBrJmXqdg
WASTING Schwarzenegger
TIME
Risk of Denzel https://www.youtube.com/watch?v=tbnzAVRZ9Xc
Success Washington
 Annexure-III
SUCCESS STORY

S. No Key Information Detail/Description

1. Self & Family background Danyal Saleem, who lives in Mirpur (AJK), is an example of
how hard work and perseverance can reap rich rewards
when bidding for projects online.
The graphic designer works exclusively on an online
freelancing platform and has earned, on average,
US$20,000 per month for the past several months. But this
isn’t a story of overnight success – Danyal has had to work
hard to differentiate himself and stay true to his goal.

It was a full year later, in May 2017, when Danyal finally

decided to jump in. He signed up for one of the numerous
sites that connect designers or coders with people or
companies that have small projects, like designing a logo or
building a website.
He had already started a small business to help pay for his
college education, so he was nervous and apprehensive
about the decision. “I gave myself two or three months at
most. If I didn’t succeed, then I would go back to running
the business as it was showing potential,” he says.
If at first, you don’t succeed, try try again

2. How he came on board Certification in graphic designing from STEPS(NAVTTC partner

NAVTTC Training/ or got institute)
trained through any other
source

3. Post-training activities Danyal’s area of expertise is in graphic design. In his first

month using Fiverr, he pitched mostly for projects centered
around logo designing. But it wasn’t so simple. In the first few
weeks, he didn’t hear back from even a single client, despite
pitching for dozens of projects.

“I needed to understand what worked, so I read blogs,

participated in forums, and analyzed profiles of successful
freelancers. It was an uphill struggle, but I didn’t want to give
up,” he explains.

Danyal says he understands why clients would be

apprehensive giving projects to untested freelancers. They
have hundreds of options to choose from, he
 explains, and to give a project to someone with no
experience requires a strong leap of faith.

A slow stream of projects started to come Danyal’s way.

Within a few months, he was landing an average of a
hundred projects every month, with a large number of repeat
clients. He also expanded the range of his professional
services, branching out from logo design to business cards,
banners, Facebook cover pages, letterheads, and stationery.

But he’s had to face his fair share of challenges too. The
shoddy state of internet infrastructure in his city, Mirpur,
threatened to derail his freelancing career. “Sometimes I
haven’t had connectivity for two days straight,” he explains.
“That’s unthinkable for someone who makes his livelihood
on the internet.”

4. Message to others (under Take the training opportunity seriously Impose

self-discipline and ensure regularity
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
 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:
 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.