Web Technologies (CSC336)
Week 01
Introduction to the course
MIAN MUHAMMAD TALHA
LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH
CAMPUS
About Myself
OFFICE CS Faculty Hall
EMAIL [email protected]
Masters of Science in Computer Science (MSCS)
EDUCATION Bachelors of Science in Computer Science (BSCS)
COMSATS University Islamabad, Wah Campus
Full-Stack Software Quality Assurance Engineer
INDUSTRIAL EXPERIENCE
At National & International Firms
CUI WAH PROFILE http://ww2.comsats.edu.pk/faculty/FacultyDetails.aspx?Uid=31852
Created by Mian Muhammad Talha 2
About the Course (1/2)
03 Credit Hours
CREDIT HOURS
02 Hours Theory + 03 Hours Lab / Week
04 as per CUI policy
QUIZES Unlimited as per my policy
Nature: Pre-announced / Surprise
04 as per CUI policy
ASSIGNMENTS Unlimited as per my policy
Nature: Pre-announced / Surprise
ASSIGNMENTS DEADLINE / For Pre-announced Assignments
SUBMISSION Deadlines will not be comprised Submission through CUOnline
Created by Mian Muhammad Talha 3
About the Course (2/2)
Mid Exam 25 Marks (No Retake)
EXAMINATIONS Terminal Exam 30 Marks (No Retake)
Semester Project 20 Marks (No Excuse)
I am the Authority……
RECOMMENDATIONS
No Favoritism, No Sifarish
06 Absentees as per CUI policy
ATTENDANCE
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
SWITCH YOUR CELL PHONES TO
SILENT / VIBRATION MODE DURING LECTURE
Created by Mian Muhammad Talha 5
Let’s Start With Your Introduction
___________________________
__
My CGPA, Hobbies, Life Goals are
___________________________
__
___________________________
I think in Web Tech we will …….
__
Created by Mian Muhammad Talha 6
Layout
01 Course Outline
02 What is Web Technology?
03 Web Structure
04 Market Trends
05 Our Goals
06 Required Tools
Created by Mian Muhammad Talha 7
01.
Course
Outline
Created by Mian Muhammad Talha 8
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:
4. 1. Web Engineering, Sahil Rai, Kuk University Notes,
2020.
5. 2. Web Programming with HTML5, CSS, and
JavaScript, John Dean, Jones & Bartlett Learning 2018
YouTube + Google + ChatGPT
Created by Mian Muhammad Talha 11
What is
Web
Technology?
Created by Mian Muhammad Talha 12
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
What is Web Technology?
• 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.
Created by Mian Muhammad Talha 14
Famous Web Applications
Created by Mian Muhammad Talha 15
Famous Web Applications
Created by Mian Muhammad Talha 16
Web
Structure
Created by Mian Muhammad Talha 17
Main Concepts of Web Structure
Web Browsers
World Wide Web Web Server
Web Pages
Created by Mian Muhammad Talha 18
Web Structure
World Wide Web
The World Wide Web is based on several different technologies:
URLs (Uniform Resource Locators), Hypertext Markup
Language (HTML), and Hypertext Transfer Protocol (HTTP).
Created by Mian Muhammad Talha 19
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
Web Structure
•
Web
Web
Server
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
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
Division of Web Structure
Front - End Back - End
Backend is the server side
Front - End is also
of a website. It is the part of
referred to as the ‘client
the website that users
side’ of the application.
cannot see and interact. It is
The part of a website that
the portion of software that
the user interacts directly
does not come in direct
is termed as front end.
contact with the users. It is
used to store and arrange
data.
Created by Mian Muhammad Talha 23
Fr
o
nt
E
n
d
Created by Mian Muhammad Talha 24
B
ac
k
E
n
d
Created by Mian Muhammad Talha 25
Market
Trends
Created by Mian Muhammad Talha 26
Who is a Web Developer?
• 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).
Created by Mian Muhammad Talha 27
Web Developers in Market
Front - End Back - End
Front-end developers Back-end developers are
Full Stack
are responsible for responsible for the server-
building the user- proficient in both side logic and infrastructure
facing parts of a front-end and back- that power websites and
website that users end development, web applications. They
interact with directly. allowing them to handle data storage,
They focus on creating handle the entire web processing, and
visually appealing and development process communication between the
interactive elements from start to finish. front end and various
that enhance user databases or external
engagement. services.
Created by Mian Muhammad Talha 28
Market Trends (Front End)
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.
Created by Mian Muhammad Talha 29
Market Trends (Front End)
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
Created by Mian Muhammad Talha 30
Created by Mian Muhammad Talha 31
Market Trends (Back End)
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.
Created by Mian Muhammad Talha 32
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
Created by Mian Muhammad Talha 34
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
Market Trends (Back End)
Front-End Angular React HTML, CSS, JavaScript
PHP (or Perl/Python)
Back-End Node.js with Express.js Node.js with Express.js
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
Created by Mian Muhammad Talha 37
Our Goals
Created by Mian Muhammad Talha 38
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
Why Laravel?
Aspect Teaching Laravel Teaching MERN
Intuitive syntax and clear Complex setup and components
Ease of Learning and Use
documentation. might overwhelm beginners.
Community and Learning Active community, Laracasts, Strong community, but resources
Resources comprehensive tutorials. might be less beginner-friendly.
Built-in features for quick Requires integration of various
Rapid Application Development
development. tools and libraries.
Human-readable syntax, suitable More complex JavaScript syntax,
Elegant Syntax and Readability
for beginners. especially with async operations.
Fundamental Concepts Teaches MVC, routing, Similar concepts, but complex
Emphasis authentication, and databases. configuration can divert focus.
Still widely used in the industry, Trendy but might not cover all job
Job Market and Opportunities
offers job opportunities. requirements.
Created by Mian Muhammad Talha 40
Required
Tools
Created by Mian Muhammad Talha 41
Required Tools
Framework Code Editor
IDE
For Local
Server
Created by Mian Muhammad Talha 42
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
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 & Name &
Registration # Registration # Group Name Laptop Status
of Student 01 of Student 02
Ali Hassan Anum Asghar
Web Wizards Both Have
SP20-BCS-034 SP20-BCS-041
Created by Mian Muhammad Talha 44
