Week 1

A front end developer is someone that works on all parts of a website or web app that users
will interact with.This can be anything from the style colors, buttons, menus or user
interactions as they click swipe and interact with the site.The skills of a front end developer
can vary, but they will always focus on three leading technologies. Html, CSS and Javascript.
For example, suppose you are a front end developer assigned the task of adding a newsletter,
sign up option to the home page of a website.
In this case you would use html to build the display elements such as the input area for the
user to type their email address and then the button to click to send it. You can then use CSS
to position, color and style these elements on the page.
And finally, you can use javascript to process the activity when the user clicks the button.
The most critical skill is usually javascript. It is the powerhouse of front end technology.
This is mainly because of its versatility and the fact that it is paired with powerful libraries
and frameworks such as react by meta.
These can be used to build rich user interface driven enterprise websites and web apps that
are fast, secure and highly scalable.

A back end developer works on the parts of a website or web app that the end users don't see.
These activities occur behind the scenes, particularly on the web server in the database or in
constructing the architecture.
Back end developers are responsible for creating and maintaining functionality when users
request information or when the website needs to communicate to another part of the web
architecture.
For processing for example, performing an account, log in or completing an online purchase
using a credit card.
A back end developer will facilitate the interaction of the website and the content stored in
database.
As a result, back end development requires different languages, skills and tools. While these
can vary, they generally consist of knowledge relating to back end programming language,
database management systems, API's and web servers.

A full stack developer is someone equally comfortable working with front end and
back end technologies.
For example they have relevant expertise in the planning architecture,
design, development, deployment and maintenance of the website or web.

1
 Internet
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.
That data travel through large undersea cables connecting the world's networks.
These cables can transfer huge volumes of data per second.

Web Server
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.
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.
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.
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 .
Web servers are also designed to respond to thousands of requests from clients per second.

2
 Website and Webpage

A web page is a document that displays images, texts, videos and other content in the web
browser,and a website is a collection of webpages that link together.
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.
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(<video>). 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.
The last technology is JavaScript, which is a programming language built into the browser.
JavaScript provides web developers with tools for interactivity, data processing, control and
action. It has the ability to manipulate the content that you see on the screen as
you interact with it.
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.

3
 Web Browser
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.
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,

4
 Web Host
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.

These can include shared hosting, virtual private hosting, dedicated hosting, and Cloud
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.
-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.
-The next option up is to use 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.
The last type of web hosting is something you may have heard of. Cloud hosting and the
Cloud has grown in popularity over the last decade.With Cloud hosting, your 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, it allows websites and web applications to scale their costs as
popularity grows.

Extra:
What is a Web Server? (NGINX) https://www.nginx.com/resources/glossary/web-server/

What is a Web Browser? (Mozilla) https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/

Who invented the Internet? And why? (Kurzgesagt) https://youtu.be/21eFwbb48sE

What is Cloud Computing? (Amazon) https://youtu.be/mxT233EdY5c

Browser Engines (Wikipedia) https://en.wikipedia.org/wiki/Browser_engine

5
 Internet Protocols
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.
IP addresses are and explore how computers send data across the internet. 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.
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. 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.
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.

6
 HTTP
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.
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 .com, / images, /
image . jpg.
There are multiple versions of the HTTP protocol. 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.
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,
and 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.

7
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
it. This 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.

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.

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.

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

8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/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"]
}

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:

9
1XX Informational

Status Code Reason Phrase Description

100 Continue The server received the request headers and should continue to send the request body.
101 Switching Protocols The client has requested the server to switch protocols and the server has agreed to do so.

2XX Successful

Status Code Reason Phrase Description

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

3XX Redirection

Status Code Reason Phrase Description

301 Moved Permanently This request and all future requests should be sent to the returned location.
302 Found This request should be sent to the returned location.

4XX Client Error

Status Code Reason Phrase Description

400 Bad Request The server cannot process the request due to a client error, e.g., invalid request or transmitted data is too large.

401 Unauthorized The client making the request is unauthorized and should authenticate.
The request was valid but the server is refusing to process it. This is usually returned due to the client having
403 Forbidden 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.

405 Method Not Allowed The web server does not support the HTTP method used.

5XX Server Error

Status Code Reason Phrase Description

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

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:

10
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.

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

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

11
 Other Internet Protocols
Hypertext Transfer Protocols (HTTP) are used on top of Transmission Control Protocol
(TCP) to transfer webpages and other content from websites. This reading explores other
protocols commonly used on the Internet.

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.

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.

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.

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.

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.

12
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.

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.

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.

Developer tools
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.
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.
In this video, I'll give you a high level explanation of some of the most used tools.
1st, let's open 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.
With 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.
Finally, let's check the most used tab the elements tab. You can use this tab to inspect the documents,
HTML elements and their properties.

13
 Wepages,Website and Webapps
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.
The technical term for a link, you click on 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.
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.
You know that web pages at a particular domain make up a website, and that the key
difference between websites, and web applications is the level of interactivity, and dynamic
content.

Frameworks and Libraries

As such 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.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

14
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

APIs
API 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. 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. 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.

15
This kind of API provides data for popular web and mobile apps. These are also called web
servers.
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.
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.
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.
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.

16
 HTML
<!DOCTYPE html>
<head>
<body>
<h1>
<p>
<a href=””> ------ </a>
<img src=”name.jpeg” width=”x” height=”x” alt=”description”>
<table>
<tr> (row)
<th> (header)
<td> (element of row>)
</table>
<form>
<form action=”x” method=”POST”>
<label> FOR=”username”>USERNAME</label><br>(Per ta bere me te kuptueshem form,
“shkrim siper box”
<input type=”text” name=”username”/> (inputs - not closing tags)
<label for=”password”>PASSWORD</label><br>
<input type=”password” />
<input type=”submit” />

<input type=”checkbox” name=”dog” value=”DOG” />(zgjedh disa)

Or
<input type=”radio”……../> (zgjedh vetem 1)
<label for=”dog”> I own a dog </label><br>

Input types: number, email, file

Multiline
Select

17
 Libraries
By now, you know you write code in your application and that this code
interacts with APIs provided by libraries and frameworks. Since you'll be
deploying your application to a web server in the end, you must include these
libraries and frameworks with it.
That is why the libraries and frameworks are often referred to as
dependencies. Your application depends on them. On the front end, you do this
by referencing the JavaScript or CSS files in your HTML file. One popular
library you can use to develop user interfaces is the Bootstrap library.
Bootstrap also provides a JavaScript library that enables enhanced
functionality, such as drop-downs and tooltips.
For example, what happens if your dependency also depends on other libraries
and frameworks? This is known as a dependency tree. A project could have
hundreds of dependencies and its tree, it will take a very long time to
download, setup, and configure all of them. How do you make sure you're
using the same versions the rest of your team is using?
This is where package managers come in. A package manager is a tool
that automatically downloads and installs dependencies. We also refer to
dependencies as packages. A package manager also provides the capability to
publish your own packages.
For each dependency, you can specify a version of that dependency and the
package manager
will download it for you. If there is a dependency tree, the package manager
takes care of that for you. It will automatically download all of the dependency
tree so that you can use APIs without dependency issues. The most common
package manager for front end development is the Node Package Manager .
Now that all your dependencies are downloaded, you need to include them in
your HTML file.
This is where you will use a bundling tool. The purpose of a bundler is
to automatically combine them into a single file. If you're bundle is significantly
large, many bundles can split your dependencies into multiple bundles. There
are many bundle is available.

18
 Responsive Design
Responsive design means that a web page can automatically stretch or shrink depending on the screen is
displayed on.
Phone, tablet and computer screens including the one you're probably using now and made up of thousands
of tiny lights called pixels. The resolution of your screen refers to the number of pixels it contains
most often expressed as the number of horizontal pixels multiplied by the number of vertical pixels. For
example, a common computer screen resolution is 1920 pixels in width 1080 pixels in height.
Thanks to responsive design websites can be correctly displayed on any of your devices.
However, today we have many different screens with different resolutions, which is why responsive design
is so important. And it is complicated by new high resolution screens like the one found on your mobile
phone. These screens group multiple physical pixels into one logical pixel to display smoother images and
text. These are often used in your favorite smartphones to give more high definition visuals like making
text images and rounded edges appear smoother and making the individual pixels less visible. Given all the
possibilities and complicating factors,
it would be challenging to develop websites that appear correctly on all kinds of devices if it wasn't for
responsive design.
Responsive design is a set of three practices that allows a website to automatically change its visuals. In
other words, to respond based on the device it is displayed on. It is the combination of three techniques,
flexible grids, fluid images and media queries.
Firstly, flexible grids are made up of columns, gutters and margins. The space between the columns is
called the gutter and the spaces between the content and the left and right edges of the screen are called
margins. Instead of defining website Element sizes based on pixels, flexible grids are defined in percentage
values, allowing them to adjust depending on screen size.
Next you have fluid images by setting the CSS max width property of images to 100%. The images will
scale down smaller if they're containing column becomes narrower than the images size but never grow
larger. This enables an image to scale down to fit in a flexibly sized column rather than overflow it but not
grow larger and become pixelated if the column becomes wider than the image.
Finally, there are media queries that are part of CSS. They allow developers to query the display size,
orientation and aspect ratio to conditionally apply CSS rules. For example, if you wanted your website
background to appear blue on a screen size less than or equal to 700 pixels.
Like on a mobile phone, you could use a media rule to set the background depending on the size of the
screen. Remember that I said responsive design is the combination of flexible grids,
fluid images and media queries. When these elements are used together, you build a website that will
automatically adjust its layout based on the device, thus delivering a responsive grid.
In responsive design, the pixel value specified is often referred to as the breakpoint. A breakpoint is the
point at which a website's content and layout will adapt to provide the best possible user experience.
A Breakpoint can function in different ways across three different grids a fixed grid fluid or fluid grids and
lastly, hybrid grids.
Let's explore each of these now, firstly, a fixed grid has fixed columns and flexible margins.
The fixed grid has a fixed content with that doesn't change in a specific breakpoint range while the flexible
margins occupy the remaining space on
screen.
Then we have fluid or full width grids with fluid columns and fixed gutters and side margins.
The fluid grid has a flexible content with that goes edge to edge as per the screen size.
In a fluid grid, columns either grow or shrink to adapt to the available space.
And finally there are hybrid grids that have both fluid width and fixed with components.
Many responsive design frameworks provide multiple CSS rules based on different device sizes to provide
the best visual experience.

19
 Bootstrap styles
Bootstrap has quite a large CSS library built by Bootstraps developers using thousands of use cases. How
it achieves this is through CSS classes and their variations through in fixes and modifiers.
It is important that you as a developer, understand in fixes and modifiers and you will explore each of
these terms.
You will use class infixes for responsive breakpoints in the Bootstrap grid system.
You already know that breakpoints are the triggers in bootstrap for how your layout changes across device
or viewpoint sizes.
Here are the responsive breakpoints available in bootstrap and how we use them.
Know that each has a specific name.
Extra small is for screens less than 576 pixels wide.
Small is for screens greater than or equal to 576 pixels wide. In bootstrap CSS rules, this is abbreviated as
SM.
Medium is for screens greater than or equal to 768 pixels wide. In Bootstrap CSS rules, this is abbreviated
as MD.
Large is for screens greater than or equal to 992 pixels wide. In Bootstrap CSS rules, this is abbreviated as
LG.
Extra large is for screens greater than or equal to 1200 pixels wide. In bootstrap CSS rules this is
abbreviated as XL.
Extra extra large is the screen is greater than or equal to 1400 pixels wide. In bootstrap CSS rules, this is
abbreviated as XXL.
We use the abbreviations for these breakpoints as in fixes in the CSS rules for the grid system.
This basically means you have to insert the abbreviation into the CSS class name.
Bootstrap components provide a pre built set of reusable UI styles and elements for your web applications.
Let's now learn how to use modifiers through an example that uses an alert element.
I can have an html file where I set an alert primary CSS class that is applied to the element.
Alert primary displays the alert using Bootstraps primary color which is blue.
The dash primary part of the class is the modifier. If you want to change this to red for example, for an
error message you will use the danger modifier.
Here is a list of modifiers available in Bootstrap.
Primary, secondary, success, info, warning, danger, light, dark.
Alerts are often used to show information that needs immediate attention from users
such as warnings, errors or confirmation messages.
Bootstrap provides an easy way to create predefined alert messages and it also has different

20