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