Front-End / UI Development 1

Contents
What is Web Development? .................................................................................................................................................... 2
What is a Static Website?................................................................................................................................................... 3
What is a Dynamic Website / Web Application? ..................................................................................................................... 3
Web Application Layers: .................................................................................................................................................... 4
What is Computer Network? ................................................................................................................................................... 5
What is Internet? .................................................................................................................................................................. 7
What is ISP? ..................................................................................................................................................................... 7
What is WWW?.................................................................................................................................................................. 7
What is IP? ....................................................................................................................................................................... 7
What is HTTP? .................................................................................................................................................................. 8
What is URL? .................................................................................................................................................................... 8
What is Protocol stack? ..................................................................................................................................................... 9
What is DNS? .................................................................................................................................................................... 9
What is Domain? ............................................................................................................................................................. 10
What is Hosting? ............................................................................................................................................................. 11
Client and Server: ........................................................................................................................................................... 12

YouTube: NaseebCodeStudio
Front-End / UI Development 2

What is Web Development?

Web development refers to the process of creating websites and web applications that are accessible through the
Internet. It involves designing, coding, and implementing the necessary components and functionalities to build a
functional and visually appealing website.

Web development encompasses both the front-end and back-end aspects of a website.
Front-end development focuses on the user interface and user experience (UI/UX) of a website. It involves using
languages such as HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript to create the
layout, design, and interactivity of web pages.

Back-end development, on the other hand, involves the server-side programming and database management. It
includes using programming languages like PHP, Python, Ruby, or JavaScript (with frameworks like [Link]) to handle
the logic, functionality, and data processing of the website. It also involves integrating with databases to store and
retrieve information dynamically.

Web development may also involve other aspects such as web security, performance optimization, content
management system (CMS) integration, and search engine optimization (SEO) to ensure the website functions well
and meets the needs of its users.

In summary, web development is the process of building and creating websites and web applications by combining
front-end and back-end technologies to provide a seamless and interactive online experience.

The web contains a vast array of interconnected information, resources, and services. It is a global network of
websites, web pages, multimedia content, and web applications that can be accessed through the Internet.

Here are some of the key elements and components that the web typically contains:
1. Websites: These are collections of related web pages that are interconnected and hosted on web servers.
Websites serve as the main unit of information and are often dedicated to specific topics, organizations,
businesses, or individuals.
2. Web Pages: These are individual documents that make up a website. They are typically written in HTML
(Hypertext Markup Language) and contain text, images, multimedia elements, and hyperlinks to navigate to
other pages or external resources.
3. Hyperlinks: Also known as links, these are clickable elements within web pages that connect to other web
pages or resources. Hyperlinks enable users to navigate between different websites, pages, or sections within
a website.
4. Multimedia Content: The web contains a wide range of multimedia elements such as images, videos, audio
files, and animations. These elements enhance the visual and interactive aspects of web pages, providing a
richer user experience.
5. Web Applications: These are interactive software programs that run on web browsers. Web applications can
perform various functions, such as online shopping, social media, email, productivity tools, and much more.
They often require back-end programming and database integration to handle data processing and user
interactions.
6. Services: The web hosts numerous online services and platforms that offer functionalities like search engines,
email services, social media networks, cloud storage, streaming platforms, online banking, and more. These
services enable users to perform specific tasks, access information, communicate, collaborate, and engage in
various online activities.
7. APIs (Application Programming Interfaces): APIs allow different web applications and services to communicate
and interact with each other. They enable data exchange, functionality integration, and seamless interactions
between different web platforms and applications.

YouTube: NaseebCodeStudio
Front-End / UI Development 3

8. Metadata and Markup: The web utilizes metadata, such as HTML tags, to provide structure, formatting, and
meaning to the content. Markup languages like HTML and XML help define the elements and organization of
web pages, making them machine-readable and understandable by web browsers and search engines.

These are just a few of the essential components that make up the web. It is a vast and ever-expanding network
that continues to evolve with new technologies and innovations.

What is a Static Website?

A static website is a type of website that consists of fixed web pages with content that remains the same for every
visitor. In other words, the content of a static website is hardcoded directly into the HTML and other files that make
up the website, and it doesn't change dynamically based on user interactions or data from a database.

Example: [Link] etc.

It has fixed will not change as we reload it. (Read Only)

Here are some key characteristics of a static website:

1. Fixed Content: The content of a static website is pre-defined and doesn't change unless manually updated by
the website owner. This content includes text, images, videos, and other media.
2. Limited Interactivity: Static websites typically have minimal interactive elements. They don't offer features
like user logins, commenting systems, or personalized content for individual users.
3. Easy Maintenance: Since the content is hardcoded, maintaining a static website involves making changes
directly to the HTML or other files. This simplicity often results in easier maintenance and faster loading
times.
4. Lower Development Complexity: Compared to dynamic websites, static websites are generally easier and
quicker to develop. They don't require server-side programming or database integration, which reduces
development complexity.
5. Hosting: Static websites can be hosted on any web server, as they only require a server capable of serving
HTML files. They don't require additional server-side technologies or databases.
6. SEO-Friendly: Static websites are typically more SEO-friendly because search engines can easily crawl and
index their content. With the proper optimization techniques, static websites can rank well in search engine
results.

Static websites are often used for simple online brochures, portfolios, landing pages, informational websites, and
other cases where dynamic content or complex functionality is not required. However, they may not be suitable for
websites that require frequent updates, user interactivity, or real-time data integration.

What is a Dynamic Website / Web Application?

A dynamic website is a type of website that generates and delivers content dynamically, allowing for personalized and
interactive user experiences. Unlike static websites, dynamic websites use server-side technologies and database
integration to retrieve and display content based on user interactions and data inputs.

Example: [Link] etc.

Will change content as we refresh it. (Changeable)

Here are some key characteristics of a dynamic website:

1. Dynamic Content: The content of a dynamic website is generated on the fly, often by querying a database or
processing user inputs. This enables the website to display different content to different users or update the
content in real-time.
2. Interactive Features: Dynamic websites can include various interactive features such as user registration,
login systems, commenting sections, forms, search functionality, and personalized user experiences. These
features enable users to interact with the website and contribute their own data.

YouTube: NaseebCodeStudio
Front-End / UI Development 4

3. Data-driven: Dynamic websites often rely on databases to store and manage large amounts of data. The
website retrieves information from the database based on user requests, inputs, or other dynamic factors,
allowing for dynamic content generation.
4. Server-side Technologies: Dynamic websites utilize server-side programming languages like PHP, Python,
Ruby, or JavaScript (with frameworks like [Link]) to process user requests, interact with databases, and
generate dynamic content. These programming languages enable the execution of complex logic and
dynamic functionalities.
5. Content Management Systems (CMS): Many dynamic websites are built on CMS platforms like WordPress,
Drupal, or Joomla. CMSs provide a user-friendly interface for website owners or administrators to update
and manage content without requiring extensive coding knowledge.
6. Scalability and Flexibility: Dynamic websites are highly scalable and flexible as they can handle large amounts
of data and accommodate complex functionalities. They can be easily updated, expanded, and customized to
meet changing business needs.
7. Hosting Considerations: Dynamic websites often require web servers that support server-side technologies
and database integration. They may also need database management systems (DBMS) for efficient data
storage and retrieval.

Dynamic websites are commonly used for e-commerce platforms, social networking sites, online forums, news
portals, blogs, and other applications that require frequent content updates, user interactions, and personalized
experiences. Their ability to generate content dynamically makes them suitable for applications that involve complex
data processing and user-driven interactions.

Web Application Layers:

There are three layers exits in a Web Application:

1. Front End / UI
Things that we can see on a website, or the
visual aspects of a website, are referred to as
the front end or user interface (UI).

Front End Technologies:

• HTML • CSS Framework (Tailwind CSS OR
• CSS Bootstrap)
• JavaScript • Browser Developer Tools
• JavaScript Libraries ([Link])
2. Back End
The logical (Brain) part of a website, which performs various
operations and processes data, is known as the backend.

The backend of a website refers to the server-side of web

development, where the logic, functionality, and data
processing occur. It is responsible for handling requests,
processing data, interacting with databases, and generating
dynamic content to be displayed on the front end.

Backend Technologies:
• PHP • [Link]
• PYTHON

YouTube: NaseebCodeStudio
Front-End / UI Development 5

3. Database
A database is used to store web and user data.

A database plays a crucial role in managing both web data and user data.

Web data refers to the content, information, or records specific to the

website itself. This can include website settings, configuration data, static
content, multimedia files, and other elements necessary for the functioning
of the website.

User data, on the other hand, pertains to the information associated with
individual users of the web application. This may include user profiles,
authentication credentials, personal preferences, activity logs, transaction history, and any other data
specific to individual users or their interactions with the website.

Database Technologies:
• MySQL • Amazon Neptune
• PostgreSQL • InfluxDB
• MongoDB • Redis

Front End + Back End + Database = Full Stack Development

After learning full-stack development, you can pursue various opportunities such as securing a job, creating
your own projects, editing existing websites, and freelancing.

What is Computer Network?

A computer network is a set of devices connected through links. A node
can be computer, printer, or any other device capable of sending or receiving
the data. The links connecting the nodes are known as communication
channels.

DCN → Data Communication Network

• Computer Network is a group of computers connected with each

other through wires, optical fibers or optical links so that various
devices can interact with each other through a network.
• The aim of the computer network is the sharing of resources among various devices.
• In the case of computer network technology, there are several types of networks that vary from simple to
complex level.

Components of Computer Network:

1. National Interface Card (NIC) 4. Modem
2. Hub 5. Router
3. Switches 6. Cables and Connectors

NIC (National interface card)

NIC is a device that helps the computer to communicate with another device. The
network interface card contains the hardware addresses; the data-link layer protocol
uses this address to identify the system on the network so that it transfers the data to
the correct destination.

YouTube: NaseebCodeStudio
Front-End / UI Development 6

Hub
Hub is a central device that splits the network connection into multiple devices. When
computer requests for information from a computer, it sends the request to the Hub. Hub
distributes this request to all the interconnected computers.

Switch
Switch is a networking device that groups all the devices over the network to transfer the
data to another device.

Cables and connectors

• Twisted pair cable: It is a high-speed cable that transmits the data over 1Gbps or more.
• Coaxial cable: Coaxial cable resembles like a TV installation cable. Coaxial cable is more expensive than twisted
pair cable, but it provides the high data transmission speed.
• Fiber optic cable: Fiber optic cable is a high-speed cable that transmits the data using light beams.

Modem Router
Router is a device that connects the LAN to the internet.

Modem connects the computer to the internet over the existing telephone line.

Types of computer Network:

a) LAN(Local Area Network)

Local Area Network is a group of computers connected to each other in a small area
such as building, office.

b) PAN(Personal Area Network)

Personal Area Network is a network arranged within an individual person, typically

within a range of 10 meters.

There are two types of PAN network:

• Wired Personal Area Network
• Wireless Personal Area Network

c) MAN(Metropolitan Area Network)

A metropolitan area network is a network that covers a larger geographic area by

interconnecting a different LAN to form a larger network.

d) WAN(Wide Area Network)

A Wide Area Network is a network that extends over a large geographical area
such as states or countries.

YouTube: NaseebCodeStudio
Front-End / UI Development 7

What is Internet?
The Internet is a vast network that connects computers all over the world. Through the
Internet, people can share information and communicate from anywhere with an Internet
connection. OR the Network of Networks is called an internet.

• Inter means interconnected.

• Net means networks.

What is ISP?
• To provide Internet access to its customers.
• An internet service provider (ISP) is a company that provides access to the internet. ISPs can provide this access
through multiple means, including dial-up, DSL, cable, wireless and fiber-optic connections. A variety of
companies serve as ISPs, including cable providers, mobile carriers, and telephone companies.
• In conclusion, an ISP (Internet Service Provider) is a company that offers consumers internet access, whereas
an IP (Internet Protocol) is a unique numerical number provided to every device connected to the internet.

What is WWW?
e) WWW stands for the World Wide Web which is a subset of an internet.
f) There are many types of services provided by an internet one of them is WWW.
g) It is a system of interconnected documents and resources that are accessible over the Internet. The WWW is
a global network of web pages, websites, and web applications that allow users to access and share
information, communicate, and engage in various activities online.

Note: TCP means address of an application; IP means address of a system. These are used when to
communication to a system using same software like: WhatsApp, messenger, Instagram etc.

What is IP?
h) IP stands for Internet Protocol which is an address of a
computer.
i) IP stands for Internet Protocol. It is a set of rules that governs
the format and addressing scheme used for communication
between devices on a network, specifically the Internet. The IP
protocol is responsible for routing and delivering data packets
from a source device to a destination device over a network.
j) Every device connected to a network, including the Internet, is
assigned an IP address. An IP address is a unique numerical label
that serves as an identifier for a device on a network. It enables devices to send and receive data to and from
other devices over the Internet.
k) There are two main versions of IP currently in use: IPv4 (Internet Protocol version 4) and IPv6 (Internet
Protocol version 6). IPv4 uses a 32-bit addressing scheme and supports approximately 4.3 billion unique IP
addresses. On the other hand, IPv6 uses a 128-bit addressing scheme and provides a significantly larger pool
of unique IP addresses, accommodating the growing number of devices connected to the Internet.

YouTube: NaseebCodeStudio
Front-End / UI Development 8

What is HTTP?
l) HTTP stands for Hypertext Transfer Protocol.
m) It is a protocol used to access the data on the
World Wide Web (www).
n) The HTTP protocol can be used to transfer the
data in the form of plain text, hypertext, audio,
video, and so on.
o) This protocol is known as Hypertext Transfer
Protocol because of its efficiency that allows us
to use in a hypertext environment where there are rapid jumps from one document to another document.
p) HTTP is similar to the FTP as it also transfers the files from one host to another host. But, HTTP is simpler than
FTP as HTTP uses only one connection, i.e., no control connection to transfer the files.
q) HTTP is used to carry the data in the form of MIME-like format.
r) HTTP is similar to SMTP as the data is transferred between client and server. The HTTP differs from the SMTP
in the way the messages are sent from the client to the server and from server to the client. SMTP messages
are stored and forwarded while HTTP messages are delivered immediately.
s) HTTPS means hypertext transfer protocol with security.

What is URL?
• A client that wants to access the document in an
internet needs an address and to facilitate the access
of documents, the HTTP uses the concept of Uniform
Resource Locator (URL).
• The Uniform Resource Locator (URL) is a standard way
of specifying any kind of information on the internet.
• The URL defines four parts: method, host computer, port, and path.
• Method: The method is the protocol used to retrieve the document from a server. For example, HTTP.
• Host: The host is the computer where the information is stored, and the computer is given an alias name.
Web pages are mainly stored in the computers and the computers are given an alias name that begins with
the characters "www". This field is not mandatory.
• Port: The URL can also contain the port number of the server, but it's an optional field. If the port number is
included, then it must come between the host and path and it should be separated from the host by a colon.
• Path: Path is the pathname of the file where the information is stored. The path itself contain slashes that
separate the directories from the subdirectories and files.

Let's break down a URL into its individual components using the example of a fictional website:
URL: [Link]
o Method: In a URL, the method is not explicitly specified. The method is part of the HTTP request, which is
used to interact with the server. Common methods are GET, POST, PUT, DELETE, etc. In this example, we are
assuming a standard HTTP request, so we don't include the method in the URL.
o Host: The host is the domain name or IP address of the server where the website is hosted. In this case, the
host is [Link].
o Port: The port number is optional and specifies the network port to which the client should connect on the
server. If the port is not specified, the default port for HTTP (port 80) is assumed. In this example, the port is
8080.
o Path: The path specifies the specific location or resource on the server that the client wants to access. It
comes after the hostname and port (if specified) and starts with a forward slash (/). In this example, the path
is /products/electronics.

YouTube: NaseebCodeStudio
Front-End / UI Development 9

So, the breakdown of the URL components is as follows:

• Method: Not specified in the URL (part of the HTTP request).
• Host: [Link]
• Port: 8080
• Path: /products/electronics

Putting it all together, the complete URL would be: [Link]

What is Protocol stack?

A protocol stack, also known as a network stack or networking protocol suite, is a comprehensive set of networking
protocols that work together to enable communication and data exchange between different devices in a computer
network. It is a layered structure, where each layer is responsible for specific tasks, and communication between layers
is well-defined.

The concept of a protocol stack originates from the OSI (Open Systems Interconnection) model and the TCP/IP
(Transmission Control Protocol/Internet Protocol) suite, which are two widely used reference models for
understanding and implementing network communication.

The protocol stack is organized into multiple layers, and each layer serves a distinct purpose, abstracting the
complexity of network communication and promoting interoperability between different devices and systems. The
standard protocol stacks consist of the following layers:

1) Application Layer: This top layer deals with user applications and provides interfaces for network services like
email, web browsing, file transfer, etc. Protocols like HTTP, FTP, SMTP, and DNS operate at this layer.
2) Transport Layer: The transport layer is responsible for reliable data transfer and end-to-end communication.
It manages segmentation, flow control, and error detection. TCP (Transmission Control Protocol) and UDP
(User Datagram Protocol) are common transport layer protocols.
3) Network Layer: The network layer handles routing of data packets from the source to the destination across
multiple networks. IP (Internet Protocol) is the primary network layer protocol.
4) Data Link Layer: This layer ensures reliable data transfer between two directly connected devices on the same
network. It handles framing, addressing, and error detection. Ethernet and Wi-Fi are examples of data link
layer protocols.
5) Physical Layer: The physical layer deals with the actual physical transmission of data over the network medium.
It defines the electrical, mechanical, and procedural specifications for devices to transmit and receive data.

Each layer communicates with its counterpart layer on the receiving device through specific protocols and interfaces.
Data is passed down through the layers on the sender side (encapsulation), and on the receiver side, the data is
unpacked layer by layer (encapsulation) until it reaches the application layer.

By using a protocol stack, network communication becomes more manageable, scalable, and standardized, allowing
devices and systems from different manufacturers to interoperate seamlessly in a networked environment.

What is DNS?
An application layer protocol defines how the application processes running on different systems, pass the messages
to each other.

• DNS stands for Domain Name System.

• DNS is a directory service that provides a mapping between the name of a host on the network and its
numerical address.
• To convert IP address into domain name.
• DNS is required for the functioning of the internet.
• Each node in a tree has a domain name, and a full domain name is a sequence of symbols specified by dots.

YouTube: NaseebCodeStudio
Front-End / UI Development 10

• DNS is a service that translates the domain name into IP addresses. This allows the users of networks to utilize
user-friendly names when looking for other hosts instead of remembering the IP addresses.
• For example, suppose the FTP site at EduSoft had an IP address of [Link], most people would reach
this site by specifying [Link]. Therefore, the domain name is more reliable than IP address.

DNS is a TCP/IP protocol used on different platforms. The domain name space is divided into three different
sections: generic domains, country domains, and inverse domain.

Label Description
aero Airlines and aerospace companies
biz Businesses or firms
com Commercial Organizations
coop Cooperative business Organizations
edu Educational institutions
gov Government institutions
info Information service providers
int International Organizations
mil Military groups
museum Museum & other nonprofit organizations
name Personal names
net Network Support centers
org Nonprofit Organizations
pro Professional individual Organizations

Generic Domains
• It defines the registered hosts according to their generic behavior.
• Each node in a tree defines the domain name, which is an index to the DNS database.
• It uses three-character labels, and these labels describe the organization type.

Country Domain
The format of country domain is same as a generic domain, but it uses two-character country abbreviations (e.g., us
for the United States) in place of three character organizational abbreviations.

Inverse Domain
The inverse domain is used for mapping an address to a name. When the server has received a request from the client,
and the server contains the files of only authorized clients. To determine whether the client is on the authorized list
or not, it sends a query to the DNS server and ask for mapping an address to the name.

What is Domain?
A domain name is the address people type into a browser to reach a site. Much like a fingerprint, each domain name
is unique to a specific website. Domains were created as a human-friendly way to access the Internet Protocol (IP),
which represents a website’s online locator.

An IP address is a string of numbers assigned to every computer, consisting of four decimal numbers ranging from 0
to 255 separated by periods. While these seemingly random series of numbers are great for computers, it’s much
easier for humans to use words they can remember. And similar to saving a number on your phone, domain names
allow us to save [Link] as [Link]

YouTube: NaseebCodeStudio
Front-End / UI Development 11

The Internet Corporation for Assigned Names and Numbers (ICANN) oversees all domain registrations, allocates and
assigns IP addresses, runs accreditation systems for domain registrars and keeps a centralized database of all domain
names and their IPs. The ICANN also has the authority to approve new domain extensions (also known as TLDs),
manage them and shut them down if they don’t follow the determined rules.

What is Hosting?
Web hosting is the storage and delivery of your site’s files, elements and content to an internet browser. When a user
types in a domain name, it’s translated into a series of specific IP numbers (also known as your site's IP address), which
connects it to the server where your site is hosted. The server then delivers your site's content to the user according
to their request, so when they arrive at your domain name, they will view your homepage.

You can think of web hosting as similar to renting a storage space. Inside is stored all of your site's elements and files.
A server is a physical computer or virtual system that provides information and data over a network.

Where and how your site is hosted has an impact on its performance. So, you need to make sure that the web hosting
service you choose is secure and reliable. When a server is unable to complete the request to display a site (also known
as server down-time), it can be difficult—potentially impossible—for users to access your site. This can cost you repeat
users, conversions and sales.

What is Browser?
• Browser is a tool which is used to access resources, websites, documents etc. on the internet.
• Browser uses Browser Engine which helps to execute / Process our request, Browser Engine is a brain of a
browser.

YouTube: NaseebCodeStudio
Front-End / UI Development 12

SERVER

FIND FILE
BACK END
RESPONSE

PROCESS

Client and Server:

Client and Server are two fundamental components in computer networking and the architecture of distributed
systems.

• The client sends a request, and the server returns a response. This exchange of messages is an example of
inter-process communication. To communicate, the computers must have a common language, and they
must follow rules so that both the client and the server know what to expect.
• Client: A client is a computing device or software application that makes requests to access resources,
services, or data from another device, known as the server. Clients initiate communication and typically
operate in response to user interactions. They can be personal computers, smartphones, tablets, or any other
device with networking capabilities. Clients send requests to servers and receive responses containing the
requested information or services.
• Server: A server is a powerful computing device or software application designed to respond to client requests
by providing resources, services, or data. Servers are designed to be always-on and ready to serve multiple
clients simultaneously. They store and manage data, host applications, and coordinate communication
between clients. Servers can range from web servers that deliver websites to database servers that store and
retrieve data for applications. They play a crucial role in enabling communication and resource sharing in
networks and distributed systems.

Types of Requests:
1. Get
2. Delete
3. Put (update) etc.

Local ISP and Regional ISP:

• Regional ISP is next in the hierarchy. The local ISP is
connected to regional ISP.
• A router is a special hardware system consisting of a
processor, memory, and an I/O interface, used for the
purpose of interconnecting networks. A router can

YouTube: NaseebCodeStudio
Front-End / UI Development 13

interconnect networks having different technologies, different media, and physical addressing schemes or
frame formats.
• The regional ISP connects the local ISP’s located in various cities via routers.
• If the packet received by regional ISP is for a client connected to this regional ISP, then the packet is delivered;
otherwise, packet is sent to the regional ISP’s backbone.

As we connect to the internet to communicate with another person the following steps are followed:
Hardware ➔ IP ➔ TCP(port no of request) ➔ Application

These are well enough to know before starting web development.

YouTube: NaseebCodeStudio