Web development and web programming sound very similar — and they are. But there’s one very important distinction. Web development refers to the overall process of creating websites or web applications, including the project’s design, layout, coding, content creation, and functionality. It involves using a combination of programming languages, tools, and frameworks to bring a website or web application to life. It may also encompass project management activities, such as fielding development requests from stakeholders or freelance clients. Web programming, on the other hand, specifically refers to the coding and scripting of a website, whether the front-end or back-end. It primarily involves writing code to handle data, process user inputs, and generate dynamic content. A web programmer will rarely, if ever, handle a web development project from end to end. They may build a certain section of a site or troubleshoot bugs. Understanding this difference has been crucial in my career, allowing me to appreciate the depth and breadth of skills required in the world of web creation. It's a reminder of the diverse talents and expertise that come together to make the digital world what it is today. Web development and web programming sound very similar — and they are. But there’s one very important distinction. Web development refers to the overall process of creating websites or web applications, including the project’s design, layout, coding, content creation, and functionality. It involves using a combination of programming languages, tools, and frameworks to bring a website or web application to life. It may also encompass project management activities, such as fielding development requests from stakeholders or freelance clients. Web programming, on the other hand, specifically refers to the coding and scripting of a website, whether the front-end or back-end. It primarily involves writing code to handle data, process user inputs, and generate dynamic content. A web programmer will rarely, if ever, handle a web development project from end to end. They may build a certain section of a site or troubleshoot bugs. Understanding this difference has been crucial in my career, allowing me to appreciate the depth and breadth of skills required in the world of web creation. It's a reminder of the diverse talents and expertise that come together to make the digital world what it is today. Web development and web programming sound very similar — and they are. But there’s one very important distinction. Web development refers to the overall process of creating websites or web applications, including the project’s design, layout, coding, content creation, and functionality. It involves using a combination of programming languages, tools, and frameworks to bring a website or web application to life. It may also encompass project management activities, such as fielding development requests from stakeholders or freelance clients.

1. Web Technologies (CSC336)
Week 01
Introduction to the course
MIAN MUHAMMAD TALHA
LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH CAMPUS

2. About Myself
OFFICE CS Faculty Hall
EMAIL mtalha@ciitwah.edu.pk
EDUCATION
Masters of Science in Computer Science (MSCS)
Bachelors of Science in Computer Science (BSCS)
COMSATS University Islamabad, Wah Campus
INDUSTRIAL EXPERIENCE
Full-Stack Software Quality Assurance Engineer
At National & International Firms
CUI WAH PROFILE
http://ww2.comsats.edu.pk/faculty/FacultyDetails.aspx?Uid
=31852
Created by Mian Muhammad Talha 2

3. About the Course (1/2)
CREDIT HOURS
03 Credit Hours
02 Hours Theory + 03 Hours Lab / Week
QUIZES
04 as per CUI policy
Unlimited as per my policy
Nature: Pre-announced / Surprise
ASSIGNMENTS
04 as per CUI policy
Unlimited as per my policy
Nature: Pre-announced / Surprise
ASSIGNMENTS DEADLINE /
SUBMISSION
For Pre-announced Assignments
Deadlines will not be comprised Submission through
CUOnline
Created by Mian Muhammad Talha 3

4. About the Course (2/2)
EXAMINATIONS
Mid Exam 25 Marks (No Retake)
Terminal Exam 30 Marks (No Retake)
Semester Project 20 Marks (No Excuse)
RECOMMENDATIONS
I am the Authority……
No Favoritism, No Sifarish
ATTENDANCE
06 Absentees as per CUI policy
07 Absentees as per my policy (LIMIT)
Handle and Adjust Your Course Clashes On Your Own
No Compromise on Attendance
Created by Mian Muhammad Talha 4

5. SWITCH YOUR CELL PHONES TO
SILENT / VIBRATION MODE DURING LECTURE
Created by Mian Muhammad Talha 5

6. Let’s Start With Your Introduction
Created by Mian Muhammad Talha 6
_____________________________
My CGPA, Hobbies, Life Goals are
I think in Web Tech we will …….
_____________________________
_____________________________

7. 06
05
04
What is Web Technology?
Market Trends
Web Structure
Course Outline
Our Goals
Required Tools
Layout
03
02
01
Created by Mian Muhammad Talha 7

8. Course
Outline
01.
Created by Mian Muhammad Talha 8

11. Textbooks:
1.1. Web Design Playground: HTML & CSS the
Interactive Way, Paul McFedries, Manning, 2019.
2.2. Beginning PHP and MySQL: From Novice to
Professional, Frank M. Kromann, Apress, 2018.
3.3. Laravel Up and Running, A Framework for
Building Modern PHP Apps, Matt. Stauffer, Oreilly,
2019.
Reference Books:
1.1. Web Engineering, Sahil Rai, Kuk University
Notes, 2020.
2.2. Web Programming with HTML5, CSS, and
JavaScript, John Dean, Jones & Bartlett Learning
2018
YouTube + Google +
ChatGPT
Created by Mian Muhammad Talha 11

12. What is
Web
Technology?
Created by Mian Muhammad Talha 12

13. What is Web Technology?
• Web Technology is a broad field that encompasses the tools,
processes, and protocols used to create, deliver, and manage
content over the internet.
• Web Technology refers to the various tools and techniques that
are utilized in the process of communication between different
types of devices over the Internet.
• Web Technology / Web Development / Web Programming
usually refers to create websites for the Internet (WWW) or
sometimes for the Intranet (Private Networks)
Created by Mian Muhammad Talha 13

14. • It is the creation of Dynamic Web Applications.
• In today's digital age, web technology plays a crucial role in
connecting people, businesses, and information globally.
• In short, Web Technology / Web Development / Web
Programming is the creation of an application that works over
the internet i.e. websites.
What is Web Technology?
Created by Mian Muhammad Talha 14

15. Famous Web Applications
Created by Mian Muhammad Talha 15

16. Famous Web Applications
Created by Mian Muhammad Talha 16

17. Web
Structure
Created by Mian Muhammad Talha 17

18. Main Concepts of Web Structure
World Wide Web Web Server
Web Browsers
Web Pages
Created by Mian Muhammad Talha 18

19. Web Structure
The World Wide Web is based on several different
technologies: URLs (Uniform Resource Locators),
Hypertext Markup Language (HTML), and Hypertext
Transfer Protocol (HTTP).
World Wide Web
Created by Mian Muhammad Talha 19

20. Web Structure
Web Browsers
• Web browsers are software applications that allow users to
access and view web pages. They interpret HTML and other
web technologies to render content in a visually appealing
format.
• It provides an interface between the server and the client and
requests to the server for web documents and services.
Created by Mian Muhammad Talha 20

21. Web Structure
Web Server
• Web servers are computers that store and serve web content
to users when requested. They play a crucial role in delivering
web pages and resources to users' browsers.
• This exchange takes place using Hypertext Transfer Protocol
(HTTP).
Created by Mian Muhammad Talha 21

22. Web Structure
Web Pages
Web pages are individual digital documents or pieces of content
that are displayed in web browsers. These pages can contain text,
images, videos, interactive forms, and other multimedia elements.
Created by Mian Muhammad Talha 22

23. Division of Web Structure
Front - End Back - End
Front - End is also
referred to as the
‘client side’ of the
application. The part of
a website that the user
interacts directly is
termed as front end.
Backend is the server
side of a website. It is the
part of the website that
users cannot see and
interact. It is the portion
of software that does not
come in direct contact
with the users. It is used
to store and arrange
data.
Created by Mian Muhammad Talha 23

24. F
r
o
n
t
E
n
d
Created by Mian Muhammad Talha 24

25. B
a
c
k
E
n
d
Created by Mian Muhammad Talha 25

26. Market
Trends
Created by Mian Muhammad Talha 26

27. • A web developer is a professional who specializes in designing,
creating, and maintaining websites and web applications.
• Web developers are responsible for bringing a website's design
and functionality to life, ensuring that it functions smoothly and
provides a seamless user experience.
• They use a variety of programming languages, frameworks, and
tools to build both the visible parts of a website (front end) and
the underlying infrastructure (back end).
Who is a Web Developer?
Created by Mian Muhammad Talha 27

28. Web Developers in Market
Front - End Back - End
Front-end
developers are
responsible for
building the user-
facing parts of a
website that users
interact with directly.
They focus on
creating visually
appealing and
interactive elements
that enhance user
engagement.
Back-end developers are
responsible for the
server-side logic and
infrastructure that power
websites and web
applications. They handle
data storage, processing,
and communication
between the front end
and various databases or
external services.
Full Stack
proficient in both
front-end and back-
end development,
allowing them to
handle the entire
web development
process from start to
finish.
Created by Mian Muhammad Talha 28

29. Front-end frameworks provide web developers with the tools they
need to create basic web designs and add custom functionality
quickly.
But before getting hands on the front-end frameworks we must
have strong knowledge of HTML, CSS, and JavaScript.
Market Trends (Front End)
Created by Mian Muhammad Talha 29

30. Type Library Framework Framework
Language JavaScript TypeScript JavaScript
Community Large and Active Large and Active Active and Growing
Popularity Very Popular Popular Rapidly Growing
Learning Curve Moderate Steeper Gentle
Architecture Component-Based Component-Based Component-Based
State Management Redux, Context API RxJS, NgRx, Services Vuex
Performance High Good Good
Size Lightweight Larger Lightweight
Flexibility Flexible Opinionated Flexible
Market Trends (Front End)
Created by Mian Muhammad Talha 30

31. Created by Mian Muhammad Talha 31

32. Back-end frameworks, being a process that stays invisible for
users, backend development sends and receives information,
communicates with the frontend, and displays the data as a web
page.
Back-end side need to operate flawlessly for the software solution
to be effective and responsive.
Market Trends (Back End)
Created by Mian Muhammad Talha 32

33. Market Trends (Back End)
Type Framework Framework Framework
Language PHP JavaScript (Node.js) Python
Community Large and Active Large and Active Active and Growing
Popularity Popular Very Popular Popular
Learning Curve Easy - Moderate Moderate Moderate
Architecture MVC Minimal, Flexible MVT
Security Built-in Middleware Built-in
Performance Good Very Good Good
Size Lightweight Larger Lightweight
Flexibility Highly Flexible Highly Flexible Opinionated
Created by Mian Muhammad Talha 33

34. Created by Mian Muhammad Talha 34

35. Market Trends (Full Stack)
Full stack developers are versatile and capable of building end-to-
end web applications, making them valuable assets for startups,
small teams, and projects with limited resources.
Full stack developers need to be proficient in a combination of
programming languages, libraries, and frameworks for both the
front-end and back-end.
Created by Mian Muhammad Talha 35

36. Market Trends (Back End)
Front-End Angular React
HTML, CSS,
JavaScript
Back-End
Node.js with
Express.js
Node.js with
Express.js
PHP (or
Perl/Python) with
Apache
Database MongoDB MongoDB MySQL
JavaScript Angular, Node.js React, Node.js Node.js
Community Large and Active Large and Active Large and Active
Popularity Popular Very Popular Popular
Flexibility Flexible Flexible Flexible
Performance Good Very Good Good
Created by Mian Muhammad Talha 36

37. Created by Mian Muhammad Talha 37

38. Our Goals
Created by Mian Muhammad Talha 38

39. Our Goals
Our objective is to attain a minimum of beginner to
intermediate proficiency in this course, starting from the
fundamentals of web development, including HTML and
CSS, and progressing to a proficient understanding of a
user-friendly framework.
Semester Project and Time-Time Tasks will surely help us to
achieve our goals.
Created by Mian Muhammad Talha 39

40. Why Laravel?
Aspect Teaching Laravel Teaching MERN
Ease of Learning and Use
Intuitive syntax and clear
documentation.
Complex setup and
components might
overwhelm beginners.
Community and Learning
Resources
Active community,
Laracasts, comprehensive
tutorials.
Strong community, but
resources might be less
beginner-friendly.
Rapid Application
Development
Built-in features for quick
development.
Requires integration of
various tools and libraries.
Elegant Syntax and
Readability
Human-readable syntax,
suitable for beginners.
More complex JavaScript
syntax, especially with async
operations.
Fundamental Concepts
Emphasis
Teaches MVC, routing,
authentication, and
databases.
Similar concepts, but
complex configuration can
divert focus.
Job Market and
Opportunities
Still widely used in the
industry, offers job
opportunities.
Trendy but might not cover
all job requirements.
Created by Mian Muhammad Talha 40

41. Required
Tools
Created by Mian Muhammad Talha 41

42. Required Tools
For Local Server
Code Editor IDE
Framework
Created by Mian Muhammad Talha 42

43. Online Learning Links
Online Code Editor:
https://www.w3schools.com/tryit/default.asp
HTML: https://www.w3schools.com/html/default.asp
CSS: https://www.w3schools.com/css/default.asp
Bootstrap:
https://www.w3schools.com/bootstrap/bootstrap_ver.asp
PHP: https://www.w3schools.com/php/default.asp
Created by Mian Muhammad Talha 43

44. Task # 01 (Project Initiation)
Make a GROUP of 02 Members for the semester project,
discuss and set a DESCENT NAME for your group and share
the details with your CR.
CR has to prepare an Excel sheet which must contain Four
columns
Name &
Registration # of
Student 01
Name &
Registration # of
Student 02
Group Name Laptop Status
Ali Hassan
SP20-BCS-
034
Anum Asghar
SP20-BCS-
041
Web Wizards Both Have
Created by Mian Muhammad Talha 44