Introduction to

Web Development
About Me

§ Technology enthusiast
§ Working as a Full Stack Developer at Unboxing Art
§ Developed over 20 web and app projects in the last
5 years
§ Mentored over 1,00,000+ students in multiple
programming languages and frameworks across
1500+ live sessions
§ Delivered corporate training sessions for companies
like Ola, Innovacer, etc.
§ Conducted several offline bootcamps in prestigious
colleges, including IIT Jammu and SCSVMV University,
AQUIB AJANI Kanchipuram
§ Took webinars for student clubs and chapters such
as IEEE and ACM in different colleges
Full Stack Developer Roadmap
Jump start
your tech
career

5. Level-up your skills

4. Back-end Development
3. Front-end Development

2. Web Design and Development

1. Fundamentals
By the end of the session:

You will have a foundational understanding of web technologies,

front-end and back-end development, popular frameworks and
technologies, databases, and algorithms. With this knowledge, you
will be better equipped to progress through the bootcamp and
become job-ready.
Pop Quiz

Q. What is the full form of Wi-Fi?

a. Wireless Fire

b. Wireless Fidelity

c. Wireless Fiction

d. Wireless Fit
Pop Quiz

Q. What is the full form of Wi-Fi?

a. Wireless Fire

b. Wireless Fidelity

c. Wireless Fiction

d. Wireless Fit
Tech Revolution

Industrial Technological

Revolution Revolution

Primarily people used People learned to work The first

to work in agriculture with machines and computers were
assembly lines to produce developed
goods more efficiently
World’s First Computer
Evolution of Computers – 1970 to 2010s

Computers became smaller, faster, and more affordable with

improvements in technology over time.
Poll Time

Q. Which of the following number systems did the Babbage Engine

use?

a. Binary

b. Octal

c. Decimal

d. Hexadecimal
Poll Time

Q. Which of the following number systems did the Babbage Engine

use?

a. Binary

b. Octal

c. Decimal

d. Hexadecimal
Identify the Word Written Here in Binary

01011001 01100101 01110011

The Need for Programming

???

Business grew
John Owned a shop and
tracks his inventory
and sales using a He found it difficult to
paper ledger keep track of everything
manually

Fascinated by the Realized to learn to

With the help of a programming language, John
ability of computers communicate with
the computer automated inventory tracking and sales processes,
to automate tasks making his business much more efficient.
The Need for Programming

Markup
Programming Scripting
languages like
languages like languages like
HTML and XML
Java, Python, and JavaScript and
are used to
C++ are used to Python are used
structure and
write software to automate
format content,
that can run on a tasks or
such as web
computer. manipulate data.
pages.
The Need for Web Development

Realizes potential customers are

Sarah runs a bakery using the internet to search for
Decline in business local businesses

Worked with a web developer to

Website attracted new customers from Business begins to grow again
design and build a website
the internet

The need for web developers as a profession is highlighted by Sarah's success.

Power of the Web

Even a simple game designed by a developer for personal use can be a huge
success and make a huge difference.
Power of the Web - Wordle

• Developed by a web developer Josh

Wardle, in Brooklyn for his wife

• Released in October 2021 and became

viral in December 2021

• Purchased by "The New York Times"

company
What is Web Development?

Creating a web-based application that helps solve a problem.

This could be for a product or a service.

Includes: web design, web development, database management, deployment, etc.

What is Web Development?

Web development does not necessarily refer to developing a static

website; rather, it deals with providing dynamic solutions to any
industry problem.
Poll Time

Q. How will you categorize a website that shows a view-only portfolio

of a full stack developer?

a. static

b. Dynamic

c. Can’t say

d. None of the above

Poll Time

Q. How will you categorize a website that shows a view-only portfolio

of a full stack developer?

a. Static

b. Dynamic

c. Can’t say

d. None of the above

Web Based Products - LMS

Learning Management Solutions (LMS) provides online courses for upskilling and
learning. Hence, solving the problem of learning anytime, anywhere!
Web Based Products - CRM

Customer Relationship Management systems (CRM) make it easy for companies

to manage customers and their requirements. Thus, solving the problem of
relationship management in a structured manner.
Pop Quiz

Q. Which of the following tasks can now be performed online?

a. Booking a ticket

b. Renting a car

c. Ordering food

d. All the above

Pop Quiz

Q. Which of the following tasks can now be performed online?

a. Booking a ticket

b. Renting a car

c. Ordering food

d. All the above

Why Web Development is Essential?

If you look around yourself, you are surrounded by Web technology.

E-commerce Book hotels Doctor Online

stores appointments banking

The world is powered by the web, and being a web developer allows you to
understand how large-scale distributed web applications like Netflix, Amazon, and
Uber run.
What's in It for You?
Growth in Web and Web Development

“Web development is a global industry.”

• Internet users worldwide comprise more than 5.4 billion.

• There are more than 1.9 billion websites worldwide.

• 62% of companies increased their sales by designing responsive

mobile platforms for their websites, according to SAG ipl.

• 68% of the companies that developed a website after using it as a

mobile app saw a rise in sales, according to SAG ipl.
Pop Quiz

Q. Which term describes a web application that is curated for a mobile

device?

a. Scalable

b. Progressive

c. Responsive

d. Stacked
Pop Quiz

Q. Which term describes a web application that is curated for a mobile

device?

a. Scalable

b. Progressive

c. Responsive

d. Stacked
Growth in Web and Web Development
Jobs for a Web developer

A quick search on LinkedIn reveals hundreds and thousands of job opportunities

Opportunities for Full Stack Developer

Full Stack developers are needed in the following areas for creating various products:

• Blockchain

• Internet of Things (IoT)

• Augmented Reality

• Virtual Reality

• Chatbots

• Low Code Development

Pop Quiz

Q. Which type of systems allows developers to create applications

without writing code?

a. All-code Platforms

b. Part-code Platforms

c. Low-code Platforms

d. Zero-code Platforms
Pop Quiz

Q. Which type of systems allows developers to create applications

without writing code?

a. All-code Platforms

b. Part-code Platforms

c. Low-code Platforms

d. Zero-code Platforms
Web Development Analogy

Web development Baking a cake

Web development ingredients:

• HTML Structure
• CSS Presentation
• JavaScript Functionality

Web developer Baker

World Wide Web (WWW)

• It was developed for the scientists of different universities and institutes to share
information automatically worldwide.

• WWW or web has a collection of websites and webpages containing information

like hyperlinks and hypertexts.

• Anybody, anywhere, anytime in the world, can access the web to gather information
on any topic.

• Information can be in the form of electronic images, text, sounds, animations, and
movies.
The Genesis of the WWW

Example: Dr. Sheldon (A scientist at a global organization called CERN) wants to share
research papers and documents with his colleagues in another continent.

Two options

Post Email

The challenge is one-to-one communication i.e., only the target recipient will get the
information. It will become a mess if all the scientists want to share their work.
History of the WWW

• WWW is a project at the European Particle

Physics Laboratory called CERN.

• Tim Berners-Lee, a British Scientist,

published World Wide Web in 1991.

• In 1993, CERN declared that WWW would be

available for free to be used by anyone in the
world. They didn’t copyright it in their name.

Image Source: Wikipedia

Pop Quiz

Q. What is the full form of "E-MAIL"?

a. Easy MAIL

b. Electronic MAIL

c. Embedded MAIL

d. Electric MAIL
Pop Quiz

Q. What is the full form of "E-MAIL"?

a. Easy MAIL

b. Electronic MAIL

c. Embedded MAIL

d. Electric MAIL
How Does WWW Work?

WWW works as a simple client-server model. It uses HTTP, HTML and web
browsers for the transfer of data.

An HTTP request is sent over the

Client requests a web server
Internet using the TCP/IP protocol to
where application content is
the server.
stored
Server

Internet

Client
The web server
Client receives the response
interprets the request
as content, such as a and sends the HTTP
webpage, video, audio, etc. response
Client and Server

Clients Servers

Clients request data and services A Server is simply a service provider who
from the servers services a request and returns a response
Types of Servers

Cloud Server

File Server
Application Server

Mail Server

Database Server
Print Server

Dedicated Server
Proxy Server

Domain Name Service Web Service

Client-Server Model
Poll Time

Q. Which protocol is used to send HTTP requests over the internet?

a. SMTP (Simple Mail Transfer Protocol)

b. FTP (File Transfer Protocol)

c. TCP/IP (Transmission Control Protocol)

d. ARP (Address Resolution Protocol)

Poll Time

Q. Which protocol is used to send HTTP requests over the internet?

a. SMTP (Simple Mail Transfer Protocol)

b. FTP (File Transfer Protocol)

c. TCP/IP (Transmission Control Protocol)

d. ARP (Address Resolution Protocol)

The Web Browser - History and Working

• Web Browser is an application through which we can

access information on the internet or the web.

• Browser is a link between us and the internet.

The Web Browser - History and Working
1990 Worldwide Web, renamed to Nexus

1994 Netscape

1995 Microsoft’s Internet Explorer

1996 Opera

2003 Apple Safari

2004 Mozilla

2007 Mobile Safari Very successful browser was introduced for Apple Phones

2008 Google Chrome Soon took over all the browsers till date

2011 Opera Mini Made for Android Mobile

2015 Microsoft Edge Designed in competition to Google Chrome

Pop Quiz

Q. What was the name of the first web browser?

a. World Wide Web

b. Netscape Navigator

c. Internet Explorer

d. Safari
Pop Quiz

Q. What was the name of the first web browser?

a. World Wide Web

b. Netscape Navigator

c. Internet Explorer

d. Safari
Let Us Type a URL and Hit Enter!

Type URL Browser Request - Response

in the checks DNS cycle
browser

• URL (Uniform Resource Locator) is the address of the website that you are looking for on
the internet. For example: https://www.knowledgehut.com/

• DNS (Domain Name Server) is like the address book of the internet. It maps the URL with the
I.P. address of the host of that URL.
Request - Response Cycle

The customer comes in and is greeted by the staff/waiter.

(TCP connection established)

Makes order (API/waiter carries the request to the

backend (Kitchen)) → gets our order back
Request - Response Cycle

When a client (your computer) requests a web page, that information is processed by the web server
(responder). If the request is a server-side script before the information is returned to the client, the
script is executed on the server, and the result of the script is returned to the client.

Once the client receives the returned information from the server, if it contains a client-side script
(Ex: JavaScript), your computer browser executes that script before displaying the web page.
Request - Response Cycle

HTTP provides rules to define the exchange of information in the request-

response cycle.
Pop Quiz

Q. Identify the Top-Level Domain in this URL:

https://www.google.com/q="Full%20Stack"

a. https://

b. google

c. .com

d. /search
Pop Quiz

Q. Identify the Top-Level Domain in this URL:

https://www.google.com/q="Full%20Stack"

a. https://

b. google

c. .com

d. /search
How do Websites Work?
Request Gets a Response

REQUEST

RESPONSE

Server Internet A User

Modern Websites - Think Gmail, Office 365

JavaScript application is downloaded

Server A User
Modern Web Applications - Think Gmail, Office 365

JavaScript app runs

in the browser

Server
A User

WEB APPLICATIONS
Built using HTML5, CSS3 and JavaScript
From Websites to Web Applications to Mobile Apps

Website Web Applications Mobile Application

• A collection of web pages Like Spreadsheets, Google • An application designed to
having information in the documents, Gmail, Photo run on a mobile phone.
form of images, text, editing apps etc., are • We can say it’s a mobile
videos, etc. examples of web applications view of a website.
• Website has to be which can run on a web • Example: amazon.com,
published on at least one server. google.com, etc., have
web browser to get their websites and have
access. mobile apps also.
• A website has to have a
domain name.
• Example: amazon.com,
google.com, etc.
From Websites to Web Applications to Mobile Apps

Website Web Applications Mobile Application

• Companies have shifted from websites to web applications to mobile apps to

increase accessibility among people.

• This evolution leads to more business and increased customer satisfaction.

• All the above things co-exist and are used by their required user as per their
comfort.
Pop Quiz

Q. Microsoft Office is a popular suite of applications. In what all

formats are these apps available today?

a. Desktop Applications

b. Web Applications

c. Mobile Applications

d. All the above

Pop Quiz

Q. Microsoft Office is a popular suite of applications. In what all

formats are these apps available today?

a. Desktop Applications

b. Web Applications

c. Mobile Applications

d. All the above

Two Sides of a Web Application

REQUEST

RESPONSE

Internet
Server A User

BACKEND FRONTEND
Activity – Exploring Network Tab in Dev Tools

1. Head over to youtube.com and open any video from the home screen.
2. Open the developer tools of the browser and switch to the network tab.

3. Write a comment on the video and look for the request that starts with 'create_comment'
4. Click on the request, it should open the 'headers' section of the request. Here, observe the
'Request method' and 'Status code'. Note down you observation, it will help you in answering
your final quiz of the session.
5. For brownie points, also explore the payload section of 'create_comment' request. Can you
see your comment text popping up here? This tells you that the browser sent this data to the
server which added it to the database.
Summary

• Web technology powers the world as we see it and is only set to grow in the
future.

• WWW is the technology that makes information available to people across the
world.

• Client-server model - the requestor is called a client, and the one serving those
requests is called the server.

• Request-response cycle is the process through which clients make requests, and
the server responds to those requests.

• HTTP is the protocol that both client and server are required to follow while they
are in the request-response cycle.

• HTTP provides standard request methods and status codes to facilitate this
communication seamlessly.
 Next Session:
Introduction to Full-Stack Development and Pseudocode

Thank You

Copyright © Knowledgehut Upgrad., All rights reserved

Confidential Information, intended for approved distribution list of Knowledgehut Upgrad