Who invented the internet? And why?

There’s the internet, a whole bunch of computer networks connected to each other,
and then there’s the World Wide Web, a way of making it easier to share
information using all those interconnected computers.

The internet as we know it today was at least 40 years in the making. According to
one of the founders of the first network, the ARPANET, in the 1960s, this first
network experiment wasn’t about communication at all; it was about optimizing
processor usage, or time-sharing which basically meant that scientists could share
computer power, too. That was because until the 1960s there was basically no
network—you had big machines called mainframes which sat in the room and
processed computing tasks one at a time. With time-sharing, these behemoths could
process several tasks at a time, which meant their power could be used by several
scientists at once. And, obviously, once you start connecting computers together,
you start to wonder about what you need to do to make communications between
them easier. Scientists around the world were trying to solve this problem.

So let’s look at some other key concepts that were developed elsewhere. Starting
with packet switching. In Britain, there was a commercial network, developed by the
National Physical Laboratory, but which never really got off the ground because it
didn’t get funding. But they did come up with the idea of packet switching, a way of
avoiding congestion in busy networks by cutting up data at one end and putting it
back together at the other.The French also played a role.They were working on a
scientific network called CYCLADES, but they didn’t have a big budget, so they
decided to work on direct connections between computers, as opposed to working
with gateway computers. Now, as an aside here, this, admittedly, isn’t very scientific,
but according to one theory, a spin-off of their research was the word “internet”.

So, now it’s the early 1970’s. There’s quite a lot of computer infrastructure, but
communication is awkward and patchy, because different networks can’t talk to
each other. TCP/IP solves this problem. The TCP/IP(Transmission control protocol/
Internet Protocol) protocols form the basic communication language of the internet,
which labels the packets of data and makes sure that even though some pieces of
the same data take a different route, they all arrive at their destination and can be
reassembled.

Networks really began communicating with each other in 1975, so you could argue
that was the beginning of the internet. Email was also very important. It was
developed for ARPANET in 1972. Most internet traffic in 1976 was email, because
academics thought electronic post-it notes were dead-core. With networks that
could talk to each other, communication was becoming easier. But all this
communication was just text- based, and it was pretty ugly to look at.

In the 1980s, a Brit called Timothy Berners-Lee spent time with CERN, the European
Organization for Nuclear Research, where physicists are trying to work out what the
universe is made of. He wanted to manage the scientists’ information and make it
possible for them to share and interconnect their work easily, making progress more
likely. He did so by inventing an interface using HTTP(Hypertext Transfer Protocol),
HTML, and URLs(Uniform resource locator) that made internet browsers possible. He
called his browser the World Wide Web. So he didn’t invent the internet, but he did
invent the Web. The first ever website, which he created, was at CERN in France in
August 1991. So, once the initial infrastructure was in place, the key technologies
had been invented, internet message boards exploded in the 1980s, the phone
companies saw the commercial potential of digital communication, web browsers
spread like wildfire in the early 1990s, and ordinary people discovered email, then
the internet expanded rapidly and steadily and became workable for the masses
from about 1995.

General idea: How the internet works

You open your favorite app on your device and you're instantly connected to the
world. This is all made possible because two devices connect and communicate via a
wired or wireless connection, forming something called a network.

You can connect multiple devices to this network. But this becomes very
complicated very quickly, as each device needs to connect to every other device to
communicate effectively. This problem is solved by something called a network
switch that connects multiple devices and allows them to communicate with each
other.

The network switch can connect to other network switches, and now two networks
can connect. These network switches then connect to more network switches until
you have something called an interconnected network. This interconnected network
has another name that you might be familiar with. It's called the Internet.

When we use websites or video streaming services on the Internet, these are
provided by computers called servers. Our devices are called clients. This is known as
the client-server model. Internet connects the entire world. Have you ever had a
video call with someone on another continent? That video data travel through large
undersea cables connecting the world's networks. These cables can transfer huge
volumes of data per second. There are a lot more technical details that go into
making the Internet possible. But this is the main idea.

Web servers

A server is a computer that runs applications and services ranging from websites to
instant messaging. It's called a server because it provides a service to another
computer and its user also known as the client. It is typically stored in something
called a data center with hundreds or thousands of other servers, all running
different services connected to the internet.

There are many different systems in data centers to ensure that servers have
continuous power, continuous internet connection and are kept called 24 hours per
day. Did you know that there are data centers located all around the world. Many
websites use these to allow you to access your content quickly from the data center
nearest to you. The data center servers are built based on the service purpose. For
example, if the server is only to be used for storing images, it might have a lot of
hard drive space. Whereas a server computing complex calculations might need a
fast processor and a lot of memory. This is usually referred to as a server hardware
which are the physical components of a server.

Once the server hardware is installed in the data center, a piece of code can now
run. The code that runs on the hardware is commonly known as software. One way I
like to remember this is to think of hardware as something you can physically touch
and is difficult to change as you need to physically replace components. Software is
soft or easy to change. You just replace the code running on the server. The surface
is a server can run can vary but right now you will learn about a type of service
software known as a web server.

A web server has many functions which includes website storage and
administration, data storage, security and managing email. Another primary
function is to handle something known as a web request. When you open a browser
on your device and type the name of the website, it's the job of the web server to
send you back to that website's content. This process is known as the request
response cycle and you will learn more about it later. Web servers are also designed
to respond to thousands of requests from clients per second

What are websites and webpages?

 A web page is a document that displays images, texts, videos and other content
in the web browser.

 a website is a collection of webpages that link together.

 Creating consistency between browsers, so that any user can enjoy the internet,
regardless of the browser they choose, is called web standards.

 When the web browser fetches data from an internet connected server, it uses a
piece of software called a rendering engine to translate that data into text and
images. This data is written in Hypertext Markup Language (HTML) and web
browsers read this code to create what we see, hear and experience on the
internet.

 In its most basic form, a webpage is just a text document, you can open and edit
with any text editor, but developers usually use more sophisticated tools for
working with webpages.

 If you want to work with a webpage, you need to know about three technologies
and understand how they interact, their HTML, CSS and JavaScript. HTML
 structures the content you see, CSS controls the colors and style and JavaScript
is responsible for the user interaction.

 HTML stands for hypertext markup language, it works by using something called
markup tags. These tags describe the content that is displayed in the browser
window, this content can be things like headings, paragraphs, images and even
multimedia elements such as audio and video, the way html describes the
content is known as markup.

 CSS is short for cascading style sheets and adds visual enhancements like colors
and layout to the web page, this is commonly known as styling. It works by
enhancing the HTML elements and telling them how to display.

 JavaScript is a programming language that provides web developers with tools

for interactivity, data processing, control and action. JavaScript is the
powerhouse of a web page. It has the ability to manipulate the content that you
see on the screen as you interact with it. In fact, without JavaScript websites
would be kind of boring and very limited in terms of what you can do.

 But how exactly does this code get translated to display the content that you
see on your screen?

When a copy of that webpage is sent from the web server to your browser, each line
of code is processed in sequential order from first to last. As each line is interpreted,
the browser creates the building blocks, which is the visual representation you see
on the screen. This creation process is known as page rendering, the response from
the web server must be a complete web page in order to fulfill the request, to show
the page in the browser.

What is a web browser and how does it work?

A web browser, or browser for short, is a software application that you use to
browse the World Wide Web. It works by sending a request to a web server and then
receives a response containing the content that is to be displayed on the screen of
your device.

Once the browser is open on your device, there is the address bar where you input
the address of the website that you want to visit. The address is commonly known as
the Uniform Resource Locator or URL for short. The URL contains the protocol or the
HTTP, the domain name, usually the name of the website, and the file path, or the
path to the page that is displayed.

When you make a request using this URL, the browser and server communicate
using a protocol known as the Hypertext Transfer Protocol or HTTP. Once the web
browser receives the content, it displays it on the screen of your device. This
exchange of information is made possible by something known as the request
response cycle.
Now, let me demonstrate this using an example many of us are familiar with,
searching the web. First, you open a web browser, which is a software application.
Next, you type the name of your favorite search engine. The name you type contains
something called a domain name. Then when you press Enter, the web browser
sends a request across a network and connects to another computer on the Internet
called a web server.

The web server is a special type of computer that allows other computers to make
requests for data. The web server responds by sending a webpage back to the
browser. Once the browser receives all the response information, the search engine
webpage is made visible. The web page is a coded document that is rendered by the
browser and then presented visually to you, the end-user.

Now that the search engine webpage is loaded in the browser, you interact with that
page to search for what you want to find. For example, type restaurants near me in
the search bar and press the search button. Once again, the browser prepares and
sends a request to the same search engine web server. This time, the request
contains the added instructions to search for the phrase restaurants near me. The
search engine web server processes the request by taking the keyword and using it
to find the requested data.

This data is stored in something called a database, which is connected to the web
server. The web server then picks up that data and sends it back to the browser.
When the web browser receives the full response from the web server, it again
renders a visible webpage with links to some restaurants, a map showing nearby
locations and more related information such as reviews, lists, and even reservations.

Web hosting

 Websites and files are stored on web servers located in datacenters. .

 Developers can launch websites to the Internet using something known as web
hosting. Web hosting is a service where you place your website and files on the
hosting companies web server. You're essentially renting the space in return for
stable and secure storage. You don't need to be accompanied to use a web host.
Individuals can rent space too.

 Some of the different hosting options available include shared hosting, virtual
private hosting, dedicated hosting, and Cloud hosting.

Let's explore each of these hosting types in a little more detail now.

1. Shared hosting- The cheapest form of web hosting is known as shared hosting.
You pay for a location on a web server containing many web hosting accounts with
shared hosting. This means that you also share the service processing power,
memory, and bandwidth with other websites that might slow your performance.
This option is best for a small website with a small number of visitors. Many
developers also use this as a low-cost sandbox environment to practice deploying or
hosting their personal websites. Some companies offer free shared hosting, but with
limitations and often have advertisements embedded in the webpages.

2. VPS- Sites with more considerable demands use virtual private surface or VPS. A
VPS is a virtual server with dedicated CPU, memory, and bandwidth resources. It will
be running on a hardware server with other VPS instances but as the resources are
fixed per VPS instance, your website is unlikely to be impacted by the performance
of other VPS instances. A VPS instance will be more expensive than shared hosting.

3. Dedicated hosting- This will be a hardware server that is dedicated to you only. All
hardware, CPU, memory, and bandwidth resources are yours to use. Generally, this
option is more expensive than a VPS hosting.

4. Cloud hosting- the website is run in something called a Cloud environment, which
spans across multiple physical and virtual servers. If a physical or virtual server fails,
your website will run on a different server and stay online. The main advantage of
Cloud hosting is that you can use as many resources as you need without hardware
limitations. However, you pay based on resource use. For example, if you transfer a
file from the Cloud to a web browser, you'll pay for the bandwidth used for that
transfer at a fractional cent cost per megabyte. While this can quickly become more
expensive, is allows websites and web applications to scale their costs as popularity
grows. This is how many of the major web applications operate.

How the web works

 When you visit a website, the web server hosting that site could be anywhere in
the world. In order for you to find the location of the web server, your browser
will first connect to a Domain Name System (DNS) server.

 When you connect to the web, you do so via an Internet Service Provider (ISP).
You type a domain name or web address into your browser to visit a site; for
example: google.com, bbc.co.uk, microsoft.com

 Your computer contacts a network of servers called Domain Name System (DNS)
servers. These act like phone books; they tell your computer the IP address
associated with the requested domain name. Every device on the web has a
unique IP address; it is like the telephone number for that computer.
Traditionally these were numbers of up to 12 digits separated by periods/full
stops but they are now being updated to sets of up to 32 characters.

 The unique number that the DNS server returns to your computer allows your
browser to contact the web server that hosts the website you requested. A web
server is a computer that is constantly connected to the web, and is set up
especially to send web pages to users.
 The web server then sends the page you requested back to your web browser.

Cookies

Websites save information about you in files called cookies. They are saved on your
computer for the next time you visit that site. Upon your return, the website code
will read that file to see that it’s you. For example, when you go to a website, the
page remembers your username and password – that’s made possible by a cookie.

There are also cookies that remember more detailed information about you. Perhaps
your interests, your web browsing patterns, etc. This means that a site can provide
you more targeted content – often in the form of ads. There are types of cookies,
called third-party cookies, that come from sites you’re not even visiting at the time
and can track you from site to site to gather information about you, which is
sometimes sold to other companies. Sometimes you can block these kinds of cookies,
though not all browsers allow you to.

Internet Protocol

Data sent across the internet is quite an important part of our everyday lives and it
wouldn't be possible without Internet Protocol addresses or IP addresses. A useful
way to think of IP addresses is that they function much like addresses in a postal
system that make it possible for packets of information to be delivered to you.

And like with the postal system things can go wrong. But let's first go over how
things work. When you send data between computers across the internet, a
common way of understanding that data is needed by the computers and networks
that the data travels across. What makes that possible is the Internet Protocol.
Version four and version six are currently the two most widely used standards of
internet protocol.

Think of the old fashioned postal system again when you send a letter to a friend you
need their address otherwise they won't receive your letter. Computers work in a
similar way. Every computer on a network is assigned an IP address. In protocol
version four an IP address contains four octet. It's separated by periods or dots. For
example 192.0.2.235. In protocol version six. An IP address contains eight groups of
hexadecimal digits separated by a colon. For example
4527:0a00:1567:0200:ff00:0042:8329.

When you send data across a network, you send the data as a series of messages
called IP packets. Also known as data grams at a high level IP packets contain a
header and a payload or the data. Think of that old fashioned postal system again,
when you send a letter. You not only include the recipient's address but also your
own address in case a return location is needed. IP packets are the same. They
include the destination IP address and source IP address. These addresses are in the
header along with some additional information to help deliver the packet. And the
payload contains the data of the packet and some of the other protocols which will
cover in a moment.

When sending multiple letters to a friend it's possible they may arrive out of order.
It's possible that a package will get damaged or if you're really unlucky a letter could
get lost. These issues can happen to IP packets too they can arrive out of order,
become damaged or corrupted to in transit or be dropped or lost during transit. To
solve these problems, the payload part of the packets contains other protocols too.
You can think of them as another message inside the payload of the IP packet.

The two most common protocols are the Transmission Control Protocol referred to
as TCP and the User Datagram Protocol, also known as UDP. TCP can solve all three
of the previously mentioned issues but at the cost of a small delay when sending the
data. This protocol is used for sending the data that must arrive correctly and in
order such as a text or image files. UDP solves the corrupt packet issue but packets
can still arrive out of order or not arrive at all. This protocol is used for sending data
that can tolerate some data loss such as voice calls or live video streaming. Both of
these protocols contain payloads that contain further protocols inside of them and
there you have it. The internet uses internet protocols much like an old fashioned
postal system. These protocols can help to make sure that data arrives in order does
not become corrupted or lost or dropped during transit.

HTTP and HTTPS

HTTP is a core operational protocol of the world wide web. It is what enables your
web browser to communicate with a web server that hosts a website. HTTP is the
communication protocol you use whenever you browse the web. HTTP stands for
Hypertext Transfer Protocol. It is a protocol used for transferring web resources such
as HTML documents, images, styles, and other files. HTTP is a request response
based protocol.

A web browser or client sends an HTTP request to a server and the web server sends
the HTTP response back to the browser. Next, let's start exploring the makeup of an
HTTP request. An HTTP requests consists of a method, path, version and headers.

The HTTP method describes the type of action that the client must performed. The
primary or the most commonly used HTTP methods are, GET, POST, PUT, and DELETE.
The GET method is used to retrieve information from the given server. The POST
request is used to send data to the server. The PUT method updates whatever
currently exists on the web server with something else. The DELETE method removes
the resource.

The path is the representation of where the resource is stored on the web server, for
example if you wanted to request an image from a page in a website, then the URL in
the address bar would need to contain the full path to that particular file on the web
server, such as example dot com, forward slash images, forward slash image dot jpg.
There are multiple versions of the HTTP protocol. I won't explore these right now,
but I want you to be aware that Versions 1.1 and 2.0 are the most used.

Finally, there are the headers. Headers contain additional information about the
request and the client that is making the request. For certain requests methods, the
request will also contain a body of content that the client is sending. Now, let's cover
some details about the makeup of an HTTP response.

HTTP responses follow a format similar to the request format. Following the header,
the response will optionally contain a message body consisting of the response
contents such as the HTML document, the image file and so forth. HTTP status codes
contained within the header indicate if the HTTP request successfully completed.
The code values are in the range of 100-599 and are grouped by purpose. The status
message is a text representation of the status code. During your web browsing, have
you ever encountered pages that display 404 error not found or 500 errors? Server is
not responding. These are HTTP status codes

I want to briefly explain to you about the status codes and their grouping. There are
five groups of status codes. They are grouped by the first digit of the error number.

 Informational is grouped 100-199.

 Successful responses are grouped from 200-299.
 Redirection message are 300-399.
 Client error responses range from 400-499
 server error responses are 500-599

Information responses are provisional responses sent by the server. These

responses are interim before the actual response. The most common information
response is 100 continue, which indicates that the web client should continue to
request or ignore the response if the request is already finished. Successful
responses indicate that the request was successfully processed by the web server,
with the most common success response being 200 OK. You're receiving these
responses every day when you receive content successfully from a website.

The meaning of OK, depends on the HTTP method. If the method is GET, it means
that the resource is found and is included in the body of the HTTP response. If it's
POST, it means that the resource was successfully transmitted to the web server and
if it's PUT, the resource was successfully transmitted to the web server. Finally, if the
method is DELETE, it means the resource was deleted.

Redirection responses indicate to the web client that the requested resource has
been moved to a different path. The most common response codes used are 301
moved permanently and 302 found. The difference between the redirection
messages 301 and 302 is that 302 indicates a temporary redirection.The resource
has been temporarily moved. When web browsers receive these responses, they will
automatically submit the request for the resource at the new path.
Client error responses indicate that the requests contained bad syntax or content
and cannot be processed by the web server. The most common codes used are:
 400 is used when the web browser or client submitted bad data to the web
server
 401 is used to indicate that the user must log into an account before the request
can be processed
 403 is used to indicate the request was valid, but that the web server is refusing
to process itThis is often used to indicate that a user does not have sufficient
permissions to execute an action in a web application
 404 is used to indicate that the request resource was not found on the web
server.

Server error responses indicate that a failure occurred on the web server while trying
to process the request. The most common code used is 500 internal server error,
which is a generic error status indicating that the server failed to process the request.

Now, have you ever bought something online and needed to enter your credit card
information? You wouldn't want someone else to get this information from the HTTP
request. This is where HTTPS is involved. HTTPS is the secure version of HTTP. It is
used for secure communication between two computers so that nobody else can see
the information being sent and received. It does this by using something called
encryption.

Like in HTTP, the requests and responses still behave in the same way and have the
same content. The big difference is that before the content is sent, it is turned into a
secret code. Only the other computer can turn the secret code back into its original
content. If someone else was to look at the code, it wouldn't be understandable. You
use HTTPS every day. This is the lock icon you see beside the URL in your web
browser.

Before I finish, I want to leave you with a brief summary of HTTP. Firstly, it is a
protocol used by web clients and web servers. It works to transfer web resources
such as HTML files, and is the foundation of any data exchanges on the web. Also,
remember that by using HTTPS, we send the information securely. Requests are sent
by the client, usually a web browser, and the server replies with responses which
may be the return of an image or an HTML page. HTTPS requests have a syntax that
includes method, path, versions and headers. HTTP responses follow a similar format
to the request. HTTP status codes indicate whether the HTTP requests successfully
completed. The status code is a three-digit number that corresponds with groups
representing different types of results.​
HTTP examples

This reading explores the contents of HTTP requests and responses in more depth.

Request Line
Every HTTP request begins with the request line.
This consists of the HTTP method, the requested resource and the HTTP protocol
version.

GET /home.html HTTP/1.1

In this example, GET is the HTTP method, /home.html is the resource requested
and HTTP 1.1 is the protocol used.

HTTP Methods

HTTP methods indicate the action that the client wishes to perform on the web
server resource.

Common HTTP methods are:

HTTP Method Description

GET The client requests a resource on the web server.
POST The client submits data to a resource on the web server.
PUT The client replaces a resource on the web server.
DELETE The client deletes a resource on the web server.
PATCH The client partially updates a resource on the web server.

HTTP Request Headers

After the request line, the HTTP headers are followed by a line break.
There are various possibilities when including an HTTP header in the HTTP request.
A header is a case-insensitive name followed by a: and then followed by a value.
Common headers are:

Host: example.com
User-
Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firef
ox/50.0
Accept: */*
Accept-Language: en
Content-type: text/json

 The Host header specifies the host of the server and indicates where the
resource is requested from.
 The User-Agent header informs the web server of the application that is
making the request. It often includes the operating system (Windows, Mac,
Linux), version and application vendor.

 The Accept header informs the web server what type of content the client will
accept as the response.

 The Accept-Language header indicates the language and optionally the locale
that the client prefers.

 The Content-type header indicates the type of content being transmitted in

the request body.

HTTP Request Body

HTTP requests can optionally include a request body. A request body is often
included when using the HTTP POST and PUT methods to transmit data.

POST /users HTTP/1.1

Host: example.com

{
"key1":"value1",
"key2":"value2",
"array1":["value3","value4"]
}

PUT /users/1 HTTP/1.1

Host: example.com
Content-type: text/json

{"key1":"value1"}

HTTP Responses

When the web server is finished processing the HTTP request, it will send back an
HTTP response.
The first line of the response is the status line. This line shows the client if the
request was successful or if an error occurred.

HTTP/1.1 200 OK

The line begins with the HTTP protocol version, followed by the status code and a
reason phrase. The reason phrase is a textual representation of the status code.
HTTP Status Codes

The first digit of an HTTP status code indicates the category of the response:
Information, Successful, Redirection, Client Error or Server Error.
The common status codes you'll encounter for each category are:

1XX Informational
Status
Reason Phrase Description
Code
The server received the request headers and should
100 Continue
continue to send the request body.
Switching The client has requested the server to switch
101
Protocols protocols and the server has agreed to do so.

2XX Successful
Status Reason
Description
Code Phrase
Standard response returned by the server to indicate it
200 OK
successfully processed the request.
The server successfully processed the request and a
201 Created
resource was created.
The server accepted the request for processing but the
202 Accepted
processing has not yet been completed.
The server successfully processed the request but is
204 No Content
not returning any content.

3XX Redirection
Status
Reason Phrase Description
Code
Moved This request and all future requests should be
301
Permanently sent to the returned location.
This request should be sent to the returned
302 Found
location.

4XX Client Error

Status Reason
Description
Code Phrase
The server cannot process the request due to a client
400 Bad Request error, e.g., invalid request or transmitted data is too
large.
Unauthorize The client making the request is unauthorized and
401
d should authenticate.
403 Forbidden The request was valid but the server is refusing to
 Status Reason
Description
Code Phrase
process it. This is usually returned due to the client
having insufficient permissions for the website, e.g.,
requesting an administrator action but the user is not
an administrator.
404 Not Found The server did not find the requested resource.
Method Not The web server does not support the HTTP method
405
Allowed used.

5XX Server Error

Status
Reason Phrase Description
Code
A generic error status code given when an
Internal Server
500 unexpected error or condition occurred while
Error
processing the request.
The web server received an invalid response from
502 Bad Gateway
the Application Server.
Service
503 The web server cannot process the request.
Unavailable

HTTP Response Headers

Following the status line, there are optional HTTP response headers followed by a
line break. Similar to the request headers, there are many possible HTTP headers
that can be included in the HTTP response.
Common response headers are:

Date: Fri, 11 Feb 2022 15:00:00 GMT+2

Server: Apache/2.2.14 (Linux)
Content-Length: 84
Content-Type: text/html

 The Date header specifies the date and time the HTTP response was
generated.

 The Server header describes the web server software used to generate the
response.

 The Content-Length header describes the length of the response.

 The Content-Type header describes the media type of the resource returned
(e.g. HTML document, image, video).
HTTP Response Body
Following the HTTP response headers is the HTTP response body. This is the main
content of the HTTP response. This can contain images, video, HTML documents
and other media types.

</html>
<head><title>Test</title></head>
<body>Test HTML page.</body>

<html>
Content-Length: 84
Content-Type: text/html
Server: Apache/2.2.14 (Linux)
Date: Fri, 11 Feb 2022 15:00:00 GMT+2
HTTP/1.1 200 OK

Other Internet Protocols

Hypertext Transfer Protocols (HTTP) are used on top of Transmission Control

Protocol (TCP) to transfer webpages and other content from websites.
The following explores other protocols commonly used on the Internet.

1. Dynamic Host Configuration Protocol (DHCP)

You've learned that computers need IP addresses to communicate with each other.
When your computer connects to a network, the Dynamic Host Configuration
Protocol or DHCP as it is commonly known, is used to assign your computer an IP
address.

Your computer communicates over User Datagram Protocol (UDP) using the
protocol with a type of server called a DHCP server. The server keeps track of
computers on the network and their IP addresses. It will assign your computer an
IP address and respond over the protocol to let it know which IP address to use.
Once your computer has an IP address, it can communicate with other computers
on the network.

2. Domain Name System Protocol (DNS)

Your computer needs a way to know with which IP address to communicate when
you visit a website in your web browser, for example, meta.com. The Domain
Name System Protocol, commonly known as DNS, provides this function. Your
computer then checks with the DNS server associated with the domain name and
then returns the correct IP address.

3. Internet Message Access Protocol (IMAP)

Do you check your emails on your mobile or tablet device? Or maybe you use an
email application on your computer?
Your device needs a way to download emails and manage your mailbox on the
server storing your emails. This is the purpose of the Internet Message Access
Protocol or IMAP.

4. Simple Mail Transfer Protocol (SMTP)

Now that your emails are on your device, you need a way to send emails. The
Simple Mail Transfer Protocol, or SMTP, is used. It allows email clients to submit
emails for sending via an SMTP server. You can also use it to receive emails from
an email client, but IMAP is more commonly used.

5. Post Office Protocol (POP)

The Post Office Protocol (POP) is an older protocol used to download emails to an
email client. The main difference in using POP instead of IMAP is that POP will
delete the emails on the server once they have been downloaded to your local
device. Although it is no longer commonly used in email clients, developers often
use it to implement email automation as it is a more straightforward protocol than
IMAP.

6. File Transfer Protocol (FTP)

When running your websites and web applications on the Internet, you'll need a
way to transfer the files from your local computer to the server they'll run on. The
standard protocol used for this is the File Transfer Protocol or FTP. FTP allows you
to list, send, receive and delete files on a server. Your server must run an FTP
Server and you will need an FTP Client on your local machine. You'll learn more
about these in a later course.

7. Secure Shell Protocol (SSH)

When you start working with servers, you'll also need a way to log in and interact
with the computer remotely. The most common method of doing this is using the
Secure Shell Protocol, commonly referred to as SSH. Using an SSH client allows
you to connect to an SSH server running on a server to perform commands on the
remote computer.
All data sent over SSH is encrypted. This means that third parties cannot
understand the data transmitted. Only the sending and receiving computers can
understand the data.

8. SSH File Transfer Protocol (SFTP)

The data is transmitted insecurely when using the File Transfer Protocol. This
means that third parties may understand the data that you are sending. This is not
right if you transmit company files such as software and databases.
 To solve this, the SSH File Transfer Protocol, alternatively called the Secure File
Transfer Protocol, can be used to transfer files over the SSH protocol. This ensures
that the data is transmitted securely. Most FTP clients also support the SFTP
protocol.

Websites, Web pages and web applications

A typical web page is one single page that consists of HTML, CSS, and JavaScript.
It displays images, text, videos, and other content in the web browser. If a web
page is one single page then a website is a collection of web pages that link
together under one domain name.

When you visit your favorite encyclopedia website and the homepage has a lot of
links to different articles, clicking on one of those links brings you to an article on a
new web page, and that article links to more articles, and other web pages. Well,
since all of these web pages exist under the same domain name, they are a
website. The technical term for a link you click on is a hyperlink. This is because
they link to hypertext content. Remember that HTML is Hypertext Markup
Language.

However, links themselves, don't have to link to the same website. They can also
link to other websites. For example when you go to your favorite search engine
and search for a phrase, the search results are a list of links to other websites.

The terms website and web application are often used interchangeably. The key
difference between a website, and web application is the level of interactivity, and
dynamic content. The easy way to remember this is that a website is more
informative and a web application is more interactive.

Developer Tools

As a developer, if your front end isn't working as expected, you can also open the
hood to check what's going wrong. In fact, it's not just your own code that you can
investigate. How about viewing other people's code. Most web browsers come
equipped with a set of developer tools that allow developers to inspect their
HTML, CSS and Javascript code. Also, to trace http request to the web server,
investigate performance issues and review web page security.

Let's find out more by exploring the homepage of the Little Lemon Cafe. To begin,
I've just opened the Little Lemon Cafes web page on my chrome browser. On the
homepage, I can view their menu. But I want to explore the HTML structure of this
menu. To do that, I need to open the developer tools. To open the developer tools
in chrome, press the F12 key on your keyboard for PC or command option J on
Mac. Alternatively, you can right click on the web page and select inspect.

There are various tabs on the top row of developer tools that provide different
functionality.
 The console tab- This tab outputs, javascript logs and errors from your web
application.
 The sources tab - shows all content resolved for the current page. It includes
HTML, CSS, Javascript, images and videos.
 The network tab- you can inspect the timeline and details of http requests
and responses for the web page.
 The performance tab- shows what the web browser is doing over time. It is
useful if your web application is running slow because you can pinpoint the
functions that are taking the most time.
 The memory tab- displays the parts of your code that are consuming the most
resources.
 The elements tab- You can use this tab to inspect the documents, HTML
elements and their properties. For example, when I hover over an element in
the elements tab, it highlights that element in the browser pane.

On the right side of the panel, there are tabs for inspecting the details of the
elements further. This panel shows us what CSS is applied to an element and the
result of the element displayed in the browser. If you double click the HTML, you
can edit it in the web browser. This doesn't change the content on the web server.
It only updates it for me while the web pages open. If I open the web page again,
it will reset. The Web browser developer tools are a valuable part of your
development toolkit to help you investigate and diagnose problems and you now
know how to access and make use of them.

Frameworks and Libraries

It's important for you to know that to speed up development, developers use
already developed frameworks and libraries in their application development.
These might be open source, meaning that the source code is freely-available for
anyone to modify and build from. There are thousands of open source libraries
and frameworks available or there might be proprietary, ones that are licensed or
developed internally.

Many developers use the terms framework and library interchangeably, so what's
the difference between them? Libraries are reusable pieces of code that can be
used by your application. They are purpose-built to provide a specific functionality.
To give a more technical example, you're building a small e-commerce website.
When a user wants to register they need to provide their email address. Email
addresses while easy to read can be complicated to validate. In fact email
addresses are defined across several technical specifications.

That's a lot of reading just to validate an email. Even if you do read through all the
specification, there's no point in spending hours or even days implementing their
standards because you have access to so many readily-available libraries to
validate email addresses. It is for specific functionality like validating an email
address that libraries are useful. A developers simply uses the library to access
the functionality they require, as a result they can have more time to continue
focusing on the development of their application.

Frameworks on the other hand provide a structure for developers to build with.
Consider this in the context of a carpenter analogy. As a carpenter you create a lot
of different chairs, therefore there would be a blueprint for each chair to speed up
building them. You can decide the type of wood to use, but the dimensions and
style of the chair are always the same. Frameworks act as a structure where the
developer provides their own code that the framework interacts with. For
example, there are many frameworks for developing web applications.

These frameworks handle functionality that is common to all web applications

such as receiving HTTP requests and sending HTTP responses. The developer then
adds their own code that implements the functionality of the web application. For
instance with the e-commerce website example, a framework would handle
receiving HTTP requests. The developer would implement code that processes the
request and returns a response from which the framework would send a response
over HTTP.

Now let's compare how the frameworks relate to libraries. Most frameworks use
many libraries. The libraries that the framework uses can be used for your
application. If you wish, your application can also use other libraries. You also
need to consider when to use a framework and when to use a library. Frameworks
are considered opinionated and libraries are considered unopinionated. This is
defined as the degree of freedom available to the developer to choose how to
code a feature. The opinionatedness will vary between frameworks, but by
definition they will always be more opinionated than a library.

The benefit of this is that they can replace libraries as needed. For example when
new technologies become available frameworks to find the libraries flow and
control of an application, whereas with the libraries those are left to the
developer to decide. As with everything there are advantages and disadvantages
to both.

Frameworks are a great way to reduce development time and to enforce a

structure on how code is written. They have many best practices already in place
and contain most of what is needed to develop an application, however,
sometimes you may find that the way you need to code something doesn't fit into
the structure of the framework. Other times you may find that some of the
libraries the framework uses may conflict with a library that you are required to
use and cause compatibility issues.

If an application is built without a framework, the developer will need to decide

on the set of libraries they wish to use to achieve the functionality they must
deliver. They will also need to take care that the selected libraries can work
together. The upside to this is that they can replace libraries as needed. For
example, if a new better library is released, the developer can replace the usage of
the old library. This is much easier than replacing a framework. Frameworks and
libraries give you the opportunity to reuse existing web app functions. This can
result in faster development, fewer errors, and more time for you to spend on the
essential features of your application. Instead of reinventing the wheel, you can
use frameworks and libraries that are designed specifically to help your web app
development processes.

APIs

Every day you access information on your phone, like reading the news,
purchasing goods and services or communicating with friends over social media.
But how is all this information transferred behind the scenes? Your favorite
websites and apps probably use API's and as a web developer, you'll discover that
API's are developer friendly, easily accessible and a very valuable and useful
development tool. A PI is the acronym for application programming interface.

An API is a set of functions and procedures for creating applications that access
the features or data of an operating system, application or other service. If this
still sounds a bit vague, just remember that the term API, is intentionally open too
many applications and use cases. As a web developer, a lot of the day to day job
involves working with API's. Some common API's that web developers work with
include Browser API, REST API and Sensor-Based API.

In Software development, API's are often the bridge between different

components or systems. This earns them names like gateway or middleware. The
term is used widely to represent many different tools and systems. Let's consider
some examples of different API use cases. One common type of API, is Browser or
Web APIs, which are built into the browser itself. They extend the functionality of
the browser by adding new services and are designed to simplify complex
functions and provide easy syntax for building advanced features.

A good example, is the DOM API. The DOM API turns the html document into a
tree of nodes that are represented as JavaScript objects. Another example, is the
geolocation API that returns coordinates of where the browser is located. There
are also other API's available for fetching data known as Fetch API, drawing
graphics or Canvas API, keeping history or history API. And client side storage also
known as Web Storage API.

Another critical type of API for web development is the RESTful or REST API. This
kind of API provides data for popular web and mobile apps. These are also called
web servers. Let's explore REST in a bit more detail. REST or representational
state transfer, is a set of principles that help build highly efficient API's. One of the
main responsibilities of these kinds of API's is sending and receiving data to and
from a centralized database. We can query our own REST API or third party ones.

One last type of API, that you might encounter as a web developer is a Sensor-
Based API. This is what the internet of things also known as IOT is based on. These
are actual physical senses that are interconnected with each other. The sensors
can communicate through API and track and respond to physical data. Some
examples are Philips hue, smart lights and node bots. That's a lot of API to think
about.

Fortunately, for web developers the most common data API is a RESTtful API
which as you've learned is a web server that provides responses to requests.
These API web servers are designed to provide the data backbone for a web client
like a web page or mobile app. This means that these API's must be able to
accomplish things like getting data or GET, creating data also referred to as POST,
updating data or PUT and deleting data or DELETE.

API issues, REST principles and good design practices to create discoverable
interfaces. This helps us get the exact response expected. But exactly how do they
work? Here's a closer description of their activity. These API's use endpoints to
specify how different resources can be accessed. The endpoint is built into the
URL when accessing the API. Once the endpoint is hit, the API performs whatever
service side processing is needed to build the response. Two common forms of
response are, full web pages and data form based on JavaScript called JSON. You
will frequently work with many different types of API's. You will often use API's to
extend the abilities of systems or to act as a bridge between different components.

IDEs

Think of a group of construction workers, every worker has a toolbox that helps
them get their job done. As a developer, you'll also use many tools. One of the
main tools in your toolbox is the integrated development environment or IDE.

An integrated development environment or IDE is software for building

applications. An IDE is just like a text editor except instead of writing documents
you're writing code. There are many IDEs available, some are specific to one
programming language while others support many languages in one IDE.

IDE common features:

 Syntax highlighting- To improve readability for developers, IEDs have syntax

highlighting. What this means, is that special keywords of the programming
language are highlighted in different colors so that the developer can quickly
differentiate these keywords from other texts. For example, if you're writing
JavaScript code without syntax highlighting, it could be harder to identify
keywords from other texts. With syntax highlighting, that gets much easier
because the JavaScript keywords and variables are colored differently.

 Error highlighting- Just like checking spelling in a text document, IDEs can
highlight mistakes you make in your programming code. For example, if I
delete the equal symbol where it's needed, my IDE will highlight the error.
 Autocomplete- When you're typing a message on your phone, it suggests
words as you type. An IDE's autocomplete is a similar feature. Since
programming languages have special keywords, IDEs can offer suggestions to
autocomplete words as you start typing them.

 IntelliSense- They can make IEDs very smart and even able to understand your
code. They can detect variables and functions and offer them as suggestions
during autocomplete. For example, if I have a JavaScript function named
myFunction defined at the top of the JavaScript file, then as soon as I start
typing the letter m my IDE suggest this function as an autocompletion.

 Refactoring- Since IEDs understand your code, they can help you if you need
to change it. To demonstrate how refactoring works, let's continue with the
myFunction function that I defined a moment ago. In the code, the function is
then called multiple times. It can also be called in the code of other files too.
But what if you need to rename this function? You would need to rename it in
every file that uses the function ensuring that you update those files to use
the new name. This process is known as refactoring, changing the structure of
the code without changing the functionality. Doing this manually is very time
consuming and prone to error. If you mistyped the new function name in one
place, the application will break. Since the IDE understand your code, it can
assist with refactoring and automatically update the function name across all
files. That saves a lot of time. You just right click on the function and select
rename symbol. Then change it from myFunction to ourFunction. The IED
then updates all references of that function name.

 IDEs come with a lot of other features to help investigate bugs and
collaborate with other developers. Many even allow you to extend their
functionality using plugins and extensions, but that's beyond the scope of this
lesson. ​