Government of Pakistan

National Vocational and Technical Training Commission

Prime Minister’s Youth Skill Development Program

"Skills for All"

Course Contents/ Lesson Plan

Course Title: Full Stack Web Development (Laravel)
Duration: 3 Months
 Revised Edition
Trainer Name Mr. Nauman Zafar Hashmi
MS CS

Course Title Full Stack Web Development (Laravel)

Objectives Employable skills and hands on practice for Web Application

and Development
Expectations
Course provides an opportunity to build a great career in the field of Web
development, course start from basic level and then move towards the advance
level. Starting from introduction of HTML and CSS then move towards
design principles and patterns of Web. This course will cover the different
aspects for Web development.

Main Expectations:

The aim for the course to prepare the trainees to work as Web Developers in the
field of Web Development in a wide variety of Large/Small scale computer-related
industries and has a strong emphasis on Web and Laravel Development. The
roadmap of the course will start from basic level to advance level to solve
problems related to the Web.

Teaching staff will provide the technical knowledge and abilities required to
solve tasks and problems that are goal-oriented. They will use participant
centered, practically oriented methods. They will also develop a program of
practical assessment that reflects the learning outcomes stated in the
curriculum. Trainees of the IT curriculum will also develop their willingness and
ability as individuals to clarify issues, as well as think through and assess
development opportunities.

Teaching staff will also support trainees in developing characteristics such as

self-reliance, reliability, responsibility, a sense of duty and a willingness and
ability to criticize and accept criticism well and to adapt their future behavior
accordingly.

Teaching staff also use the IT curriculum to address the development of

professional competence. Trainees will acquire the ability to work in a
professional environment.

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

included as task. The record of all tasks performed individually or in groups
must be preserved by the management of the training Institute clearly
labeling name, trade, session etc. so that these are ready to be

2 | Full Stack Web Development (Laravel)

 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.

2. In order to materialize the main expectations, a special module on Job

Search & Entrepreneurial Skills has been included in the later part of
this course through which, the trainees will be made aware of the Job
search techniques in the local as well as international job markets (Gul
countries). Awareness around the visa process and immigration laws of
the most favored labor destination countries also forms 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.

3. A module on Workplace Ethics has also been included to highlight the

importance of good and positive behavior at work place 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 traineessuch
as through PPT slides +short video documentaries. Needless to say that
if the training provider puts his heart and soul into theseotherwise non-
technical components, the image of Pakistani workforce would undergo
a positive transformation in the local as well as international job markets.

In order 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 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.

1. Motivational Lectures

3 | Full Stack Web Development (Laravel)

 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:

1. Clear Purpose to convey message to trainees effectively.

2. Personal Story to quote as an example to follow.

3. Trainees Fit so that the situation is actionable by trainees and not

represent a just idealism.

4. 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.

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 longer time without boredom and loss of
interest because they can clearly 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.

5. Success Stories

Another effective way of motivating the trainees is by means of 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 by

means of a video/documentary of someone that has risen to fortune, acclaim or
brilliant achievement. A success story shows how a person achieved his goa
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

4 | Full Stack Web Development (Laravel)

 reader/listener knows nothing of what is being revealed. Optimum impact is
created when the story is revealed in the form of:-

1. Directly in person (At least 2-3 cases must be arranged by the

training institute)

2. 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 at annexure III.

3. 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. I
is an effective way to help the trainees comprehend in depth both the 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 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 to be presented to the trainees. The trainer may
adopt a power point presentation or video format for such case studies
whichever is deemed suitable but it’s important that only those cases are
selected that are relevant and of a learning value.

The Trainees should be required and supervised to carefully analyze the cases.

For the purpose they must be encouraged to inquire and collect specific
information / data, actively participate in the discussions, and intended solutions
of the problem / situation.

Case studies can be implemented in the following ways: -

5 | Full Stack Web Development (Laravel)

 1. A good quality E-commerce website

2. Any portal website or web application

Entry level of Since intake level is Bachelors/ Intermediate, the expectations from the trainees
trainees are:

 To have knowledge of Computer Programming Languages

 Knowledge of Front End Web Development

 To have concept of Web Designing

Learning By the end of this course, the trainees should be able to perform the
Outcomes of the following competencies:
course
By the end of this course, the trainees should gain the following
competencies:

 Knowledge of Web Application and website.

 Knowledge of Web Designing principles and capabilities to
solve allproblems related to the Web.
 Hands on experience in Web development to make any kind of
website with ease.
 Perform various tests to detect and provide best possible solution.
 Practical knowledge Configuration in web server.

Job Searching
 More than 250 multinationals and local companies in Pakistan CV
building as per job demand
 Web Developer (Laravel Developer)

Course Total duration of course:3 months (12 Weeks)

Execution Plan
Class hours:2 hours per day

Theory:20%

Practical: 80%

Weekly hours: 4 hours per week

6 | Full Stack Web Development (Laravel)

 Total contact hours: 48 hours

Companies  Multinational Companies

offering jobs in  Software Houses
the respective  IT Industries
trade
 Media House
 Govt. or Semi-Govt. sector
 Corporate sectors

Job  Web Designer

Opportunities/jo  Web Developer
b titles  Laravel Developer
 Full Stack Web Developer
 Freelancer

No of Students 25

Learning Place Classroom / Lab

Instructional https://www.tutorialspoint.com/internet_technologies/w
Resources ebsites_development.htm
Web Development
https://www.guru.com/d/freelancers/skill/web-development/
Web Development Skill
https://laravel.com/
Laravel Framework

7 | Full Stack Web Development (Laravel)

 MODULES

Scheduled Module Title Learning Units Remarks

Weeks

Week 1  Introduction  Getting to Know HTML and CSS

to HTML &  Fundamentals of HTML and CSS  Task 1
CSS  Introducing the Web Design Playground  Task 2
 Learning how to construct HTML tags and CSS  Task 3
properties  Task 4
 Learn the most common text
 Building Your First Web Page
Week 2  Introduction  Dividing page text into paragraphs and sections
to HTML &  Adding numbered lists
CSS  Building bulleted lists
 Styling the text font, size, and style
 Aligning and indenting paragraphs  Task 5
 Adding text and background colors
 Planning and sketching your personal home page
 Choosing typefaces for your page
 Adding the header and navigation links
 Adding the body text
 Adding Images and Other Media
 Creating color gradients
 Project: Creating a Portfolio Page
Week 3  Bootstrap  Introduction to Bootstrap
 Download and usage
 Supported browser and devices
 Learn Colors
 Learn Components
 Dropdown options in web page  Task 6
 Learn CSS variables
 Website Optimization
 Bootstrap Grid System
 Bootstrap Columns and Rows
 Bootstrap Utilities
Week 4  Bootstrap  Bootstrap Typography
 Bootstrap Images  Task 7
 Bootstrap Tables and figures
 Bootstrap Tables borders
 Bootstrap Forms
 Bootstrap Disabled form
 Bootstrap Check and radio
 Bootstrap Range
 Bootstrap Input group
 Bootstrap Input group
8 | Full Stack Web Development (Laravel)
  Bootstrap Cards
 Bootstrap Carousel
 Bootstrap Close button
 Bootstrap Collapse
 Bootstrap Dropdowns
 Bootstrap List group
 Bootstrap Modal
 Bootstrap NAV and tabs
 Project: Creating a Portfolio Page using
Bootstrap
Week 5  JavaScript  Introduction to JavaScript
& SQL  Download and usage Task 8
 Supported browser and devices
 Event Handling
 Learn Events
 Call back functions
 Application programming
 Asynchronous Programming
Week 6  JavaScript  SQL Queries
& SQL  Database concepts Task 9
 Table creation
 Relationships
 Read Operations
 Create Operations
 Update Operations
 Delete Operations
 Connections
Week 7  PHP &  PHP Basics
Laravel  Introduction to PHP Task 10
 PHP Operations
 Server-Side Scripting with PHP
 PHP statements
 Data handling
 Data validation
Week 8  PHP &  handle form data and manage sessions
Laravel  Introduction to Laravel Task 11
 Laravel framework
 MVC Architecture
 Create routes
 Artisan
Week 9  PHP &  Composer
Laravel  Controllers Task 12
 Views
 Models
 ORM
 Database interactions

9 | Full Stack Web Development (Laravel)

 Week 10  PHP &  Migrations
Laravel  Seeding Task 13
 Database connections
 Read/Write operations
 Laravel Database Migration and Seeding
 Web Application basic development
Week 11  Final
Project Full Stack Web Application Development
Week 12  Final
Project

Week 13 Final Assessment

10 | Full Stack Web Development (Laravel)

 Annexure-I:

Tasks in Full Stack Web Development (Laravel)

Task
Task Description Week
No.
Create Your First Write the HTML code for a basic
1. HTML Page webpage containing headings,
paragraphs, and an unordered list.
Understand the structure of an HTML
document.
Integrate CSS to style the HTML page. Experiment
Adding Style with different CSS properties to modify text, Week 1
2.
with CSS background, and margins.

Embed images and videos into your HTML

3. Enhancing page. Apply CSS styling to multimedia
Webpages with elements for a visually appealing presentation.
Multimedia
Apply CSS transitions to create smooth element
4. Adding Transitions transitions. Experiment with CSS animations to add
and Animations interactive and engaging features.
Designing Create an HTML form with various input types, labels,
5. Forms with and a submit button. Understand the role of forms in Week 2
HTML collecting user input.
 Bootstrap Introduction and Setup
6. Bootstrap – I Week 3
 Grid System Implementation
 Responsive Design with Bootstrap Utilities
 Customizing the Bootstrap Theme
7. Bootstrap – II  Integrating Bootstrap into an Existing Project Week 4
 Comparing Bootstrap with Other CSS
Frameworks

SQL Create a database and tables using SQL. Perform

8. basic CRUD operations (Create, Read, Update, and Week 5
Fundamentals
Delete) with SQL. Understand database concepts like
relationships.
DOM Interact with the Document Object Model (DOM) to Week 6
9.
Manipulation dynamically update HTML and CSS. Implement event
listeners to respond to user interactions.

11 | Full Stack Web Development (Laravel)

 10. PHP Basics Write PHP code to perform simple tasks and
calculations. Understand variables, data types, and Week 7
basic control structures in PHP.
11. Server-Side Create a PHP script to handle form submissions. Week 8
Scripting with PHP Implement sessions for user authentication.
Explore the fundamentals of server-side scripting
with PHP.
12. Laravel Basics Create routes, controllers, and views in
Laravel. Utilize Eloquent ORM for Week 9
database interactions. Build a foundation
in Laravel development.
13. Laravel Database migration and seeding in Laravel.
Week 10
Database Practice structuring and populating databases
Migration using Laravel's migration features.
and Seeding
 On Job Training
 Final Year Project Week 11
14. Final Project
& Week 12

12 | Full Stack Web Development (Laravel)

 Annexure-II:

Full Stack Web

Development (Laravel)

1. Why should you learn Laravel in 2023?

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

2. Understand Laravel basics | Laravel Tutorial

https://www.youtube.com/watch?v=AEVhR-hD2Wk&t=60s

3. Simple User CRUD App

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

4. Pakistani Laravel developer at Technosofts

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

13 | Full Stack Web Development (Laravel)

 Annexure-III
SUCCESS STORY

S. Key Information Detail/Description

No

1. Self & Family Muhammad Saqib, who lives in KPK Swabi, is an

background example of how hard work and perseverance can
reap rich rewards working as Web Developer
Internee at Meatlesoft Lahore.

But this isn’t a story of overnight success – Saqib had

to work hard to differentiate himself and stay true to
his goal.

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

2. How he came on board Certification in Full Stack Web Development

NAVTTC Training/ or got (Laravel) from NUTECH (NAVTTC partner institute)
trained through any other
source

3. Post training activities Saqib’s area of expertise is in PHP Programming.

But it wasn’t so simple. During the Web training, he
secure a position as an internee in an organization.

“I needed to understand what worked, so I do

programming and practice day and night on the Web
Development software’s to get a strong grip on PHP
and Laravel. It was an uphill struggle, but I didn’t want
to giveup,” he explains.

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: -

14 | Full Stack Web Development (Laravel)

 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

15 | Full Stack Web Development (Laravel)

 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

16 | Full Stack Web Development (Laravel)

 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.

17 | Full Stack Web Development (Laravel)