Government of Pakistan
National Vocational and Technical Training Commission
Prime Minister’s Youth Skills Development Program
"Skills for All"
Course Contents / Lesson Plan
Course Title: Microsoft .NET Core with ReactJS
Duration: 3 Months
Revised Edition
2 | Microsoft .NET Core with ReactJS
Trainer Name
Authur Name
Zunnoorain Ashraf
Sr. Software Engineer
Course Title
Microsoft .NET Core with ReactJS
Objectives and
Expectations
Employable skills and hands-on practice in Microsoft .NET Core with
ReactJS
This is a special course designed to address unemployment in the youth.
The course aims to achieve the above objective through hands on practical
training delivery by a team of dedicated professionals having rich
market/work experience. This course is therefore not just for developing a
theoretical understanding/back ground of the trainees. Contrary to that, it is
primarily aimed at equipping the trainees to perform commercially in a
market space in independent capacity or as a member of a team.
The course therefore is designed to impart not only technical skills but also
soft skills (i.e. interpersonal/communication skills; personal grooming of the
trainees etc.) as well as entrepreneurial skills (i.e. marketing skills; free lancing
etc.). The course also seeks to inculcate work ethics to foster better citizenship
in general and improve the image of Pakistani work force in particular.
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,
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 (5
th
& 6
th
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
3 | Microsoft .NET Core with ReactJS
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.
• 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).
4 | Microsoft .NET Core with ReactJS
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.
The 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
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: -
5 | Microsoft .NET Core with ReactJS
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
For an advanced course of Microsoft .NET Core with ReactJS proposed
entry level is minimum bachelors in relevant subject, so expectations from
the trainees are:
• Have knowledge of Programming Languages C# and VB.NET
• Have Understanding of .NET Framework
• Have concept of HTML, CSS, and JavaScript
• Having a Basic Understanding of Web Development Concepts
• Having SQL Server Database Knowledge
• Familiarity with MVC Architecture
• Having knowledge of Web APIs
• Familiar with ReactJS
Learning
Outcomes of
the course
By the end of this course, students will be able to:
• Design/Development of Web Applications, eCommerce Website and
CMS
• Understanding of modern tool usage for Web Development in
Industry
• Comprehensive knowledge of React JS, including its component-
based architecture.
• Ability to create and manage React components.
• Proficiency in developing Single Page Applications using React for
the frontend.
• Integration of React with .NET Core APIs.
• Consuming and handling data from APIs within a React application.
Course
Execution Plan
The total duration of the course: 3 months (12 Weeks)
Class hours: 4 hours per day
Theory: 20%
Practical: 80%
Weekly hours: 20 hours per week
Total contact hours: 260 hours
Companies
offering jobs in
the respective
trade
• Senior Dotnet and Reactjs Developer - Calrom Islamabad: Software
House develop innovative travel software solutions, designed from
the ground up in partnership with some of the world's leading airlines.
• Dotnet Developer - SigmaTec Solutions Pvt. Limited Islamabad:
Software House in Islamabad provide unique ability to combine vital
product development expertise with deep technical competence and
business comprehension.
• React Developer - Rainsoft Financials Karachi: Rainsoft Financials
(Pvt.) Ltd. is an IT and IT enabled off-shore BPO service provider for
the US financial services industry.
6 | Microsoft .NET Core with ReactJS
• Junior .NET Developer - Ciklum · Islamabad: Dot Net Web API Expert
Job
Opportunities
• Web Applications Developer
• Back – End Web Developer using ASP.NET Core
• Full Stack Web Developer using ASP.NET Core
• Front - End Developer
No of Students
25
Learning Place
Classroom / Lab
Instructional
Resources
1. HTML/CSS/JavaScript:
https://dotnettutorials.net/course/html-tutorials/
https://dotnettutorials.net/course/css-tutorials-for-beginners-and-
professionals/
https://dotnettutorials.net/course/javascript-tutorial-for-beginners-and-
professionals/
These links will provide step by step knowledge of HTML, CSS, and
JavaScript for both beginners and experts to develop basic static Web
Page.
2. SQL Server:
https://dotnettutorials.net/course/sql-server/
This link provides a basic and expert tutorial about SQL Server for
creating and managing database and perform different functions e.g.
Clauses, Joins, Views and Store Procedures on data stored in
database.
3. ASP.NET Core MVC:
https://dotnettutorials.net/course/asp-dot-net-mvc-tutorials/
In this ASP.NET MVC Tutorial For Beginners and
Professionals series, it covered all the features of ASP.NET MVC.
You will learn from the basic to advanced level features of ASP.NET
MVC like JavaScript, jQuery, Entity framework, and much more.
7 | Microsoft .NET Core with ReactJS
4. ASP.NET Web API:
https://dotnettutorials.net/course/asp-net-web-api/
This tutorial will cover all the features of ASP.NET Web API provided
by Microsoft i.e., it is used to develop HTTP-Based Web Services on
top of .NET Framework.
5. React JS Tutorials
https://dotnettutorials.net/course/reactjs-tutorials/
This React Tutorial will take you through most of the practical
applications of React. It will cover all the concepts of React JS with
Real-Time Applications from the very basic to advanced features of
React JS.
6. ASP.NET Web API + React JS – Full Stack CRUD App:
https://www.youtube.com/watch?v=EJgzPBO2juM
This video provides step by step tutorial for Full Stack CRUD App
tutorial using ASP.NET Core + SQL and React JS
8 | Microsoft .NET Core with ReactJS
MODULES
Sched
uled
Weeks
Module Title
Days
Hours
Home
Assignmen
t
Week 1
Introduction to
Web
Development
and ASP.NET
Day 1
Hour 1
• Task 1
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
9 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week 2
Working with
SQL Server
Day 1
Hour 1
• Task 2
10 | Microsoft .NET Core with ReactJS
Hour 2
Details may
be seen at
Annexure-I
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
Hour 2
11 | Microsoft .NET Core with ReactJS
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
12 | Microsoft .NET Core with ReactJS
Hour 3
Hour 4
Week 3
Working with
SQL Server
Database
Day 1
Hour 1
• Task 3
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
13 | Microsoft .NET Core with ReactJS
Day 3
Hour 1
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
14 | Microsoft .NET Core with ReactJS
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week 4
ASP.NET MVC
Core -
Introduction
Day 1
Hour 1
• Task 4
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
15 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week 5
ASP.NET MVC
Core -
Continue
Day 1
Hour 1
• Task 5
16 | Microsoft .NET Core with ReactJS
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
Hour 2
17 | Microsoft .NET Core with ReactJS
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
18 | Microsoft .NET Core with ReactJS
Week 6
ASP.NET MVC
Core -
Continue
Day 1
Hour 1
• Task 6
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
19 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
20 | Microsoft .NET Core with ReactJS
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week 7
ASP.NET MVC
Core -
Continue
Day 1
Hour 1
• Task 7
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
21 | Microsoft .NET Core with ReactJS
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
Hour 2
Hour 3
Hour 4
22 | Microsoft .NET Core with ReactJS
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week 8
ASP.NET WEB
API
Day 1
Hour 1
• Task 8
Details may
be seen at
Annexure-I
23 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
Hour 2
24 | Microsoft .NET Core with ReactJS
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
25 | Microsoft .NET Core with ReactJS
Week 9
React JS
Day 1
Hour 1
• Task 9
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
26 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
27 | Microsoft .NET Core with ReactJS
Hour 2
Hour 3
Hour 4
Week
10
Advanced
Computer
Vision
Day 1
Hour 1
• Task 10
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
28 | Microsoft .NET Core with ReactJS
Hour 4
Day 3
Hour 1
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
29 | Microsoft .NET Core with ReactJS
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week
11
Connecting
Front-End with
Back-End
Day 1
Hour 1
• Task 11
Details may
be seen at
Annexure-I
Hour 2
Hour 3
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
30 | Microsoft .NET Core with ReactJS
Day 3
Hour 1
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Week
12
Freelancing
Tools &
Techniques
Day 1
Hour 1
• Task 12
Details may
be seen at
Annexure-I
Final
Project
Hour 2
Hour 3
31 | Microsoft .NET Core with ReactJS
Hour 4
Day 2
Hour 1
Hour 2
Hour 3
Hour 4
Day 3
Hour 1
Hour 2
Hour 3
Hour 4
Day 4
Hour 1
Hour 2
32 | Microsoft .NET Core with ReactJS
Hour 3
Hour 4
Day 5
Hour 1
Hour 2
Hour 3
Hour 4
Tasks for Certificate in Microsoft ASP.NET Core MVC and React JS
33 | Microsoft .NET Core with ReactJS
Task
No.
Task
Description
Week
1.
Interactive Quiz
Game
Develop an interactive quiz game with HTML for
the structure, CSS for styling, and JavaScript for
quiz logic and user interaction. Provide feedback
on correct and incorrect answers.
Week 1
2.
Design a Library
System Database
Design a Database for Library Management with at
least 5 tables.
Retrieve Information from multiple tables using
WHERE Clause, JOINS and Built-in Functions. Also
apply Indexing on appropriate columns and evaluate
query performance
Week 2
3.
Database
Optimization and
Automation
Use the Library Management Database and do the
following
1. Stored Procedures:
• To perform common CRUD
operations on key tables in the
database.
2. Views:
• Create views to simplify complex
queries.
3. Triggers:
• Implement triggers to automate
specific actions.
4. Optimization:
• Identify and optimize any existing
stored procedures
5. Error Handling:
• Implement proper error handling
mechanisms in your stored
procedures and triggers.
Week 3
4.
Building a Simple
Library
Management
System Application
using ASP.NET
Core MVC
Design a web application for Library Management
System
1. Modeling the Book Table
2. Setting Up Entity Framework
3. Implementing CRUD Operations
4. Routing and Navigation
5. Displaying Books Information
6. Validation
7. Entity Framework Relationships
8. Security Considerations.
Week 4
5.
Working on Library
Management
System
Modify the Library Management System with HTML
Helper and User SQL Server Database for CRUD
Operations using Entity Framework
Week 5
6.
Update Library
Management
System for Client
Side
Update your Library Management System with
AJAX Technologies for View, Update, Delete
Functions
Week 6
34 | Microsoft .NET Core with ReactJS
7.
Securing your
Library
Management
Application
Apply ASP.NET Core MVC Security Functionalities
on your Library Management System
Week 7
8.
Develop and
Consume Web API
Develop ASP.NET Core Web API for Library
Management System and Consume it for Web
Application
Week 8
9.
Building a simple
React Application
Build a React JS application includes Component
Design, State Management, Routing and API
Integration
Week 9
10.
Modifying React
Application for
front-end
Update your React JS Application that will have UI
Implementation, State Management
Implementation, Error Handling and Optimization
Week10
11.
Complete Library
Management
System
Connect your Back-End SQL Server with Front-End
Using ASP.NET MVC and React JS for Library
Management System. Use ASP.NET Web APIs for
CRUD Operations
Week11
12.
Final Project
Develop Full Stack Web Application with ASP.NET
Core MVC and Web API includes React JS
Week12
35 | Microsoft .NET Core with ReactJS
Annexure-II:
Motivational Lectures
Microsoft ASP.NET Core and ReactJS
What are the advantages of .NET Core over .NET framework:
https://www.youtube.com/watch?v=Rc-rrH2yJhA
This video provides an overview of the impact that .NET Core brings to the web development over
the .NET framework.
How Robotics Will Change the World: https://www.youtube.com/watch?v=UwsrzCVZAb8
This video provides an overview of the impact that robotics is having on society, including in fields
such as healthcare, manufacturing, and agriculture.
Learn ASP.NET Core 6.0 - Full Course for Beginners:
https://www.youtube.com/watch?v=LOfXDdqWVWY&list=PL18HZjtdIA4DiYGQj1zst6myBAV
E3wgMg
This video set will provide the complete web development using ASP.NET Core.
Introduction to React Js + Installation | Complete React Course:
https://www.youtube.com/watch?v=-
mJFZp84TIY&list=PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt
Complete react course: In this react course, we will see how to use react using projects. React is
an amazing library for creating user interfaces.
36 | Microsoft .NET Core with ReactJS
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:
37 | Microsoft .NET Core with ReactJS
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.