Web developers test the user experience as well as the code they write.

Web developers spend time trying to find software-related flaws, such

as bugs. Bugs are flaws in code that can cause crashes or make a site or
its features work in a way that isn’t intended. They require workarounds
or code changes. An important part of the web developer’s role is to find
bugs in their code and eliminate them. And testing helps them do this.

Not all flaws are code-related bugs. Some flaws result from the website's design,
and others have to do with the user experience. Web developers examine all areas
of a website experience to ensure that the site is operating as they designed it to
operate.
Types of website testing
Acceptance tests
These tests check whether the whole website, client and server, works as
intended. Individual website users or teams of users typically perform this type
of test at the end of a project just before the launch.
Integration tests
These tests ensure that the website’s components and functions work together
as they’re supposed to. For example, a developer might run a series of tests to
ensure that the client can make application programming interface (API) calls to
the server and that the server sends the proper response back.
Unit tests
These tests validate that a specific feature or behavior of the website performs
as expected. A unit is the smallest testable part of a website. For example,
developers might run tests on a drop-down menu on their web form to make
sure it opens and closes properly and contains the right data.
Functional tests
These tests check the behavior of the website by simulating real-world
scenarios based on the initial requirements for the site. Closed-box testing is a
common way to verify behaviors. The idea behind these tests is to see how the
website behaves as if real users were using the site in actual business and
personal scenarios.
Performance tests
These tests show how the website performs under different levels of stress.
Load testing, for example, evaluates performance under real-life load
conditions. An example of a load condition is the number of requests a website
can fulfill at a given time. The more requests the site is given, the higher the
load.
Regression tests
These are tests that check whether new features break or degrade functionality.
Regression testing is important when developers modify, change, or add
 features. When a new or updated feature breaks the website, it is referred to as
a regression bug.
Stress tests
These tests are similar to performance tests, except they use extreme load
conditions to see how much a website is able to handle before it fails.
Usability tests
These tests verify how easily a user can complete a task using the tested
website. Usability tests will typically have a number of tasks that the testers will
seek to complete. Testers will evaluate how well the site enables the testers to
complete the tasks.
There are areas web developers must consider when they’re testing a website. The types of
tests you just learned about apply to each of the areas that a developer needs to test. They
include:

● User interface (UI)

● Responsive design
● Code
● Application programming interface (API)
● Databases

User interface
Web developers need to ensure that the user interface (UI) they’re
developing behaves according to the site’s design and requirements.
Web developers make sure that a site has an overall design, including:
​ #
​ Where elements appear on a page
​ #
​ How elements interact with each another
​ #
​ The colors and fonts on the site
​ #
​ How colors and fonts change when users interact with elements
Web developers refer to requirements that describe how the site should function.
Responsive design
Responsive design relates to UI but addresses a particular and
important aspect of the user experience.
​ #
 ​ A design is responsive if the user experience adapts to different
screen sizes with no loss in usability.
​ #
​ A site is usable if every user on every device can access and
interact with the content.
Responsive design is the standard for modern
websites.
web developers test how the UI responds in various orientations: a
device’s alpha, beta, and gamma rotation angles.
​ #
​ The alpha angle is the rotation of the device from top to bottom
around the Z axis. For example, if you flip your mobile device
upside down so the camera lens is at the bottom and the speakers
are at the top with the screen facing you, you’re moving your
phone along the alpha angle.
​ #
​ The beta angle is the rotation of the device top to bottom along
the X axis. For example, if you flip your mobile device so the
camera lens is at the bottom and the speakers are at the top and
by turning the device, the screen is facing away from you, you’re
turning your device along the beta angle.
​ #
​ The gamma angle is movement of the device from front to back,
along the Y axis. For example, if your mobile device is on a table
with the screen facing you and you flip it over so, the screen is
facing down, you’re moving your device along the gamma angle.
 This diagram shows
you these rotation angles. If you move a tablet to an alpha angle, then the device is upside
down, but the screen is not. If you move a tablet to a beta angle, the screen faces away
from you. If you move a tablet to the gamma angle, the screen is facing down.
Code
Web developers should test all the code they are using on their website.
Web developers write a lot of their own code, and they also integrate
open source code. Open source code might have bugs as well. A
thorough and methodical testing strategy can find issues and bugs. It’s
important to thoroughly test all website code to ensure that it is free of
bugs, secure, and performs well.
API
When the client-side code of a website calls an application
programming interface (API) on the server side, many technical pieces
have to work together to make the interaction successful. Web
developers test this interaction between the client and the server. When
using an API, the client sends data to the server. The server then does
the work and sends data back to the client. Web developers test to
ensure that the data transfer happens securely and accurately.
In addition, many APIs have an interface available on the internet, which only
authorized clients can access. Web developers ensure that their APIs are secure
and that people can’t break the security measures with bad intentions. This is
especially true if the API provides access to sensitive information.
Database
Many websites rely heavily on data, so the design and performance of
the underlying database are important for a good user experience. While
 web developers might not design, build, and structure the database (a
database administrator usually undertakes these tasks), it is the web
developer’s responsibility to ensure that the database works well with
the website.
If a website is hosted on the cloud, the location of a database can impact how
quickly data is sent to and received from the website. For example, many cloud
computing providers have regions where servers are located. Regions are physical
locations for servers and can be hundreds of miles apart. Deploying a web server to
one region and deploying the database to another region can greatly impact the
website’s overall performance because the web server communicates with the
database to service user requests. If the web server and database are far apart, this
communication will be slower. Testing the performance of a database can help
isolate problems like this.

Early website testing uncovers problems before a website is published.

The sooner that a web development team finds problems, the sooner
they can address common issues such as:
​ #
​ Flaws with the site design
​ #
​ Flaws in the website architecture
​ #
​ Broken or error-prone functionality
​ #
​ Security vulnerabilities
​ #
​ Scalability issues
Making testing a priority improves the reliability of a website and can positively
impact a user’s experience.
STEPS FOR TESTING:

1.Define the test environment

● A website testing environment is a separate version of a website for testing
purposes.
● It is typically a replica of the live website, but it’s only accessible to a limited
number of people, such as the website developers and quality assurance
(QA) testers.
● This environment allows the website to be tested and debugged without
affecting the live website or its users.
● A website testing environment is an important tool for ensuring that a
website functions properly before it is made available to users.
● 2Develop test cases
● A test case is a series of steps that web developers follow to verify that a
website is functioning correctly.
● The goal of a website test case is to identify any issues or bugs with a
specific area or function of the website.
● This typically involves checking the various features and the functions of
the website to ensure they’re working as intended and making sure the user
experience is positive.
● A test case could include the following and much more.
○ Checking the website’s layout and design
○ Verifying that all links on the site are working
○ Testing the website’s search feature
○ 3.Write and run scripts
● An automation script is software code that a software tool runs.
● A script consists of a series of instructions to automate the testing of a
website.
● These can include tasks such as:
○ Checking the functionality of the application
○ Verifying that it is working correctly
○ Identifying any errors or bugs
● Web developers typically write automation scripts in a programming
language and then run them using a specialized testing tool like IBM’s
UrbanCode or an open source tool like Jenkins.
○ 4..Analyze test results
● After web developers run automation scripts and conduct manual testing,
they analyze the results of those tests.
● The analysis could involve:
○ Reviewing the test cases and the expected outcomes
○ Comparing these to the actual results that the web developers and
tools found
○ Identifying any discrepancies
● Developers might also use specialized tools and software to help them
analyze the test results and highlight any areas of the website that require
further attention. For example, scripts might produce data that developers
can open in a spreadsheet. The spreadsheet can show them problem areas
that will help them better understand what they need to address.
● 5.Submit bug reports
● When web developers discover a bug or issue while testing a website, they
will typically create a bug report to document the problem and provide
details about how it can be reproduced.
● A bug report often includes information such as:
○ The steps that developers took to reproduce the issue
○ The expected behavior of the website
○ The actual behavior that the test discovered
● It might also include details such as screen captures or videos to help
illustrate the problem.
● After testing, the web developer submits the bug report to an appropriate
team or individual, such as a project manager or a senior developer, who
will review the report and determine the best course of action to address the
issue.

How can automation help?

While web developers can manually test small sites, they use tools to
automate the testing process for larger systems. Teams use automation
to perform repetitive or time-consuming testing tasks that would be
difficult or impossible for a human tester to do manually. This can help
to save time and improve the accuracy and reliability of the testing
process.

Automated testing helps development teams:

​ #
​ Save time by allowing the developer to automate repetitive or
time-consuming testing tasks, such as checking the functionality
of the website or verifying that all buttons on the site work
properly.
​ #
​ Improve the accuracy and reliability of the testing process by
removing the potential for human error.
​ #
​ Identify problems or issues with the website that might not be
immediately obvious to a human tester. For example, an
automated tool might be able to uncover performance issues or
security vulnerabilities that a human tester might miss.
 ​ #
​ Implement different scenarios, such as testing a website on
various screen sizes. A responsive website should adapt to
different screen sizes. Automation can implement test cases that
test the website on every screen size and isolate issues that might
arise on certain screens.
​ #
​ Test different ideas, such as the impact of moving website
components into a cloud environment. For example, a website
development team might want to move its login processing to the
cloud to make it faster and globally available. They can write test
cases to test the impact of this change without the development
team having to move the code to the cloud.

MODULE2:

Web developers also use version control to track and manage changes to
software code. One of the first version control systems that developers
created was the Source Code Control System (SCCS). Its key features
include:
​ #
​ Storing all versions of the code together in a single file.
​ #
​ Stamping the entire content with essential information,
including version number, date, and author.
​ #
​ Using a delta (or change) log to create a record of the details for
each modification.
Web developers use a version control system because they need to track and
manage changes to code to document who made the change as well as what,
where, when, and why a developer made the change.
version control systems have become more sophisticated. Today, common version
control systems include features that help developers manage files, track changes
to work, collaborate with their colleagues, and even deploy their code.
FEATURES OF VERSION CONTROL SYSTEMS:

1.CODE REPOSITORY:Modern version control software systems include code

repositories like these fictional bookshelves. A code repository is a software
technology companies use to store the versions of their code files. Developers
typically use a code repository in addition to storing a website’s code on a web
server.

2.Collaboration tools

Development teams work on various projects, and they need to collaborate and
communicate with one another while writing code. Version control systems foster
collaboration by making it easier for team members to work on the same files
simultaneously. Modern version control systems have additional built-in
collaboration tools.
Version control systems allow developers to comment on their work and upload
additional documentation, such as readme files, to the repository. A readme file is
a text file that describes the code. It might also contain additional information,
such as installation instructions and help documentation.

Some version control systems also offer project management tools to help teams
collaborate. And some version control systems even have chat or group discussion
features that developers can use to discuss new projects, challenges, or ideas.

3.Code deployment
Development teams deploy code when they publish it to the live environment.
Users interact with a website in a live environment.

But before deployment, web development teams prepare by first publishing their
website and all its code to a staging environment. As you can see in the following
image, a staging environment replicates or mirrors all the features of the live
website. But it is only accessible to the web development team. A staging
environment helps prepare a site by helping web developers discover any final
issues that they didn’t catch in testing. If the website works as expected in the
staging environment, web developers will deploy the website to the live
environment.

Most modern version control systems include continuous deployment tools.

Continuous deployment enables web developers to automate some of the tests
they need to perform on their websites. Once those tests are passed, the tools
automatically publish the site for users to experience. Continuous deployment
reduces the time and effort required to get new features to users.

Version control systems allow people on teams to work individually and

collaboratively on document additions and changes, and then once changes are
complete, the team creates one main document.

Version control systems enable developers to create a main file of source code and
then collaborate by working on individual additions and changes to that code base
over time. They store the main file and all subsequent versions in the
organization’s code repository, often known as a remote repository. It’s called
this because it is not stored on their local computers but rather on their
organization’s servers or in the cloud.

STEP1:

The first step in the version control process is that each developer clones the
organization’s repository onto their own computer. Cloning a repository is the
process of putting a copy of an entire repository on your local machine so you can
work locally with the files in the repository. Developers clone a repository so that
they can add, delete, or modify code without changing the original main files.

STEP2:After each developer clones the repository onto their local machine, they
can perform a fetch from the organization’s repository. A fetch brings any new
changes from the main files into the files on the developer’s computer.
STEP3:When they have the latest file, they can begin their work. When one
developer completes an isolated section of code changes, they will run a commit
command. A commit records all the changes that a developer has made since they
started working or made the last commit.

A commit is like saving a document you are working on so that you can go back
later to see what you changed and undo any changes that might have issues.
Commits enable you to keep records of what you changed and when. They typically
contain a commit message that is a brief description of what the developer
changed.
STEP4:After a commit, the developers can merge their changes by issuing a pull
request. A pull request is a way for the developers to propose changes to a file or
set of files in a repository and get feedback on the proposed changes from their
team. The code repository informs other team members of the pull request. They
can review the proposed changes and then accept, reject, or request further
updates to the changes. If the team accepts the changes, the system will merge the
changes into the main file or files in the repository.

STEP5:Finally, the developers will push their file back to the organization’s code
repository. A push is a command that uploads the copy of the code file that is on a
local machine to the remote code repository.

MODULE3:

To publish a website, web developers need a similar list of things. They need:

● Content and elements the site requires, such as text, images, videos, or
games
● Users who will visit the site
● Technology to deliver and host the website, such as a web server
Today, some corporations still host their websites on their own servers, but many
use a cloud provider to host their website in the cloud. This is the location or
hosting provider for the website.

The process to publish a website

Before a developer can publish their website, they must gather all their
content together, ready in one location for users to access it on the site.
STEP1:Prepare

Prepare is the first phase of publishing a website. Web developers need to find a
location to host their site, either on their own company’s servers or on a cloud
provider’s servers.

If the website is going to use a domain name, such as ibm.com, then the web
developers need to reserve the domain name and configure it on their servers or
hosting provider.

Some websites also need to have very specific security measures in place, like a
site certificate to enable e-commerce. E-commerce is the activity of buying and
selling on a website. Implementing these security measures is also part of the
prepare phase.
STEP2:Set up

Next, web developers gather all the files required for the website before hosting
them at the destination. Many developers use a staging environment to test their
website to make sure it’s ready for users. Because a staging environment is exactly
like the actual location for the public website, developers can use it to identify any
last-minute issues.
STEP3:Deliver

After all the preparation and setup, developers are ready to deliver their website to
their users! This involves copying their files and some configuration settings from
the staging environment to the final location. Many developers use tools to help
make sure this goes smoothly.

If a web development team is delivering their website for the first time, they might
need to enable features like their new domain name or some e-commerce
features. Developers enable features by making them available for use by the
website’s users, for example, enabling the domain name to point to the new site.
not all publishing processes are the same. Many web development
teams plan for deployments on specific days and publish their site in its
entirety on that specific day. In this approach, users don’t see the
website until the web developers have completed all the work to build it.
When it’s built, developers deliver the whole website to users.
In recent years, website engineers have improved on this approach to publish
websites to users more regularly and more quickly. This is called deployment,
and it has some distinct differences, improvements, and challenges over
publishing a completed website.
Companies need methods and tools to deploy website changes to users more
frequently, even if the updates are not big.

Improving like this over time is called iterative improvement. The approach
attempts to find and address problems on each subsequent build. The early days of
software development took the same approach.

Now that the internet provides connected systems and tools, web developers can
release updates to websites more frequently. Web developers use continuous
deployment for today’s websites. A collection of changes to a website that are
ready for the user is called a build. In a continuous deployment environment, new
builds are sent to users frequently, sometimes within days or even hours rather
than months. For website testing, a similar concept applies. Development teams
will continually deliver updates to the testing environment so they can be
automatically tested. This approach is called continuous delivery.

Continuous delivery:
 ● Website code is developed so that it can be released to the live website at any
given time.
● When specific features are ready, web developers deliver the new and
updated code to testers rather than when all features are complete.
● Web developers create new builds in a continuous delivery environment that
are automatically deployed into a quality assurance (QA) testing
environment. The automated tests check for errors and bugs.
● After the code passes all tests, continuous delivery requires that people
approve the build and send it into the production environment. For
websites, a production environment is the live website that users can
interact with.

Conclusion: This approach speeds up development because some code is being

tested at the same time as other code is being written.
CONTINUOUS DEPLOYMENT:

● This is a method for updating websites in which code changes to a website

are released automatically into the production environment.
● It is an automated system with a series of predefined tests. When new
updates pass those tests, the automated system pushes the updates directly
to the live website.
● This approach takes automation a step further and removes the need for
manual intervention.

Conclusion: This approach to updating a website speeds up the time users can
benefit from the changes. It eliminates the lag of time between when code changes
happen and when users experience the changes.
The name for web developers that manage the publishing process is development
operations (DevOps).
Historically, development and operations, and even testing, have been siloed. A
work function is siloed when it operates in relative isolation to other functions. F
DevOps is an approach to deployment that promotes closer collaboration between
the business that uses the website, website development, and information
technology (IT) operations.
 DevOps brings functions together to improve and reduce the time
needed to address user feedback. With continuous delivery, continuous
deployment, and continuous monitoring of applications, teams can:
​ #
​ Respond to users faster and build engaging user experiences
​ #
​ Continuously deploy websites into development, test, and
production environments
​ #
​ Scale DevOps successfully without disrupting the business
​ #
​ Ensure consistency from testing to production
​ #
​ Facilitate improved website quality and stability by releasing
website features more frequently
​ #
​ Help reduce costs through improved efficiency and reduced
outages
The DevOps lifecycle
The DevOps lifecycle consists of a series of iterative, automated
development processes, or workflows, within a larger, automated
development process.

​ Planning (or ideation)

In this workflow, teams plan what new features and functions a website
should have for its next release. They develop these features and functions
based on user feedback and by studying how users interact with previous
 releases of the website. The goal in the planning stage is to figure out how to
prioritize which features should go in new versions of the website by
creating a backlog. A backlog is a list of features and functions the web
development team needs to build.
​ Development
This is the programming step, where developers test, code, and build new
and enhanced features based on items in the backlog. Web developers often
use their individual computers to write and test the website code before
sending it to the continuous delivery system.
​ Integration
In this workflow, new code is integrated into the existing code and tested
before it’s deployed to the live website. The most common automation
activities include merging code changes into a primary code file, checking
out the code from a source code repository, testing it, and making it ready
for use.
​ Deployment
This workflow involves pushing the new or updated code to a staging
environment for testing. DevOps engineers will test for quality and legal
compliance. If they find errors or defects, developers have a chance to fix
any problems before users see them. Sometimes DevOps engineers deploy
an updated website first to a small group of users and then gradually to all
users when the engineers are confident it has no major problems.
​ Operations
In this workflow, DevOps engineers monitor the updated website for
performance and behavior to ensure that all the target users can access it.
This is called availability. Operations ensure that features are running
smoothly and that users experience no interruptions. They make sure the
network, storage, web server, and security features are all healthy. If
something goes wrong, operations identify the problems and notify the
appropriate people to fix them.
​ Learning (or continuous feedback)
This workflow is when members of the team get feedback from end users
and customers on how the website is functioning. They take the feedback
back to the website development team for enhancements and features they
should consider adding to the next release. This workflow takes the team
back to the planning workflow, where they “continuously improve”!
​ Testing, Security, and Compliance
Throughout every phase of the lifecycle, team members should be
continually testing their changes. They also should be adhering to security
 guidelines and requirements, and ensure their code meets the compliance
requirements of their organization.
he web development team can monitor website performance and behavior during
the operations workflow. They make sure the website is available to all target
users and that users experience no interruptions.
DevOps engineers are taking a shift-left approach to testing and other critical
operations. The term “shift-left” comes from the idea that certain workflows in
the DevOps lifecycle should be done earlier in the workflow (to the left in a
workflow diagram that moves from left to right) and more often. Shifting these
items left ensures that the important work is considered first, and testing is done
more often rather than leaving them towards the end after all the development
work is complete.
Here are some areas that DevOps have chosen to shift-left or move testing further
up in the workflow, so critical operations can get more attention.
Module4:
the process to deliver web content through a website.
​ Stage 1
Web servers deliver the web content of a website to the browser via the
internet. Web browsers communicate with servers using the Hypertext
Transfer Protocol (HTTP). HTTP facilitates requests between the browser
and the server to load web pages using hypertext links. Every time a user
accesses a web page or performs some action on a web page, the browser
submits a request to the server. Because all the code to make the website run
resides on the server, the server processes the request and then delivers a
response to the browser.

A browser’s request might include:

● The URL identifying the correct server and resource. A resource can
be the web content, specific data in a database, or a back-end tool to
run.
 ● The method that defines what action the server should take. The
actions can include getting a file or adding or deleting some data.
​ Stage 2
When the browser sends an HTTP request, the browser and server start a
session. A session is a set of user interactions on a website in each period of
time. A web browser interacts with a web server during a session to send and
receive data about user interactions. To track a user’s activities, the server
creates a web session id and sends it with the HTTP response. For every
subsequent request, the browser includes the session id with the request.
During the session, information that the browser sends to the server is
saved server-side for easy recall later in the session.
​ Stage 3
Web servers wait for the browser to make the request, process the request
when it arrives, and then reply to the browser with an HTTP response.
● If the response contains an HTML page, the browser renders the page
to the user.
● If the page includes CSS or JavaScript files, or even image files, the
browser repeats the process and sends a request to the server to
download those files.Website sessions are time-based in this same
way. Session timeframes are set by web developers and are used to
create continuity between the server and the client.

Classifying interactions as sessions is necessary because HTTP

requests are stateless, meaning that each request that the browser
sends to the server is independent of any other. The server does not
keep a record of previous interactions with a specific browser, and
each time the browser makes a request, the server can only handle the
request based on the information the browser includes. When a server
creates a session id, it’s like the order number in the pizza example.
The session id enables the browser and the server to remember who
the user is, what actions they have already taken, and what data the
browser and server have sent and received during a specific session.
●

● Building a responsive website doesn’t change how the site is

delivered. But it does change how the site is developed.
● Responsive design changed the layout of your web page according to
the device you are accessing it from.
● Content considerations
● In a responsive design, some content that works on a laptop might
not work well on a mobile phone. For example, if a part of the site
uses a diagram with details that are easy to see on a laptop, users
might find it difficult to see the details on a mobile device. The web
developer can either change the image for the mobile experience or
choose to replace the image with just a description of the diagram.
Responsive design technology enables developers to make this
choice.

Experience considerations
When delivering the same content to devices with different screen sizes
and functions, web developers think about how users will experience the
site. The web developer can use the following questions to create tests
that will help them better understand how responsive the site is.
​ Does the site work well if the user needs to scroll vertically rather
than viewing the content horizontally?
​ Does any part of the site require a keyboard and mouse rather
than being able to be experienced all through touch?
​ Do images and videos adapt to different screen sizes, or do they
get cut off on a smaller screen or are harder to view on a larger
screen?
​ Do fonts look good on all screen sizes?
​ Do menus respond to various screen sizes?
● Testing considerations
● When developing responsive websites, it’s important for developers
to continually test their site for responsiveness. This cannot be left
until the end of the development process because responsive design
must be built in from the beginning.
● Web browsers have built-in developer tools that enable a developer to
view their site in various screen sizes by using emulation. Emulation
enables a developer working on a laptop or desktop to use tools that
mimic how the website looks and behaves on a tablet or mobile
phone. Web developers use these emulation tools to view and test that
websites work well on all devices
● Using frameworks for responsive design
● In order to deliver a website that is ready for all users on any device,
web developers can use a framework that provides them with tools to
make developing a responsive site easier. Frameworks are software
packages that include code that integrates into a website. The code
can then be used anywhere on the site. It’s like installing wifi in a
home. Once it’s installed, any device in the home can access and use
the wifi network from anywhere in the house.
● One popular framework for developing responsive websites is
Bootstrap. Originally designed and maintained by Twitter, Bootstrap
is a free and open source framework to build responsive websites
using CSS and JavaScript. Web developers get a rich set of tools that
they can use to ensure their website works well on a variety of screen
sizes.
● This style enables the div element to automatically adjust its size
based on the screen size on which the user is experiencing the site.
The web developer doesn’t have to write the code to enable that
behavior, the framework takes care of it for them.
● <div class="container-fluid">
● ...
● </div>
Because frameworks like Bootstrap integrate with a website, when
the site is deployed, all the files necessary to make the website
responsive are delivered to the web server. A framework not only
makes it easier for developers to build responsive sites, but they also
simplify the deployment.
Responsive sites work well in most modern browsers. But responsive design also
enables developers to deliver web content in another technology called web
applications. Web applications are websites that behave like an application and are
as robust and feature-rich as desktop applications.

n the past, in order to do work that took a lot of graphic or CPU power, users had to
download applications that were compiled and run on a device.

Browsers can do amazing things now that previously were only possible from a
powerful, installed program. Even very graphic-intensive games are possible in
web applications. A web application is different than the other program types
you’ve explored because they’re delivered entirely online and run in the browser.

Many popular apps are available only as web applications. Web applications have
another important feature. Many of them can be installed on a device like a
compiled application. These types of web applications are a hybrid between a
program that you install on your device through an application store and a web
page.
Developers first developed original mobile applications called native apps. App
engineers build native apps using programming languages that interact directly
with a device’s operating system.
Web applications function similarly to native apps, but because the web
content in a web application is wrapped in a container, it can run on a
device and users can access some of the web content even if they’re not
connected to the internet.

Web application wrappers have interfaces for interacting with the

device’s operating system. This enables web applications to interact
with the device’s file system. For example, a photo editing web
application that saves photos to your device’s photo storage.
Web application wrappers enable users to change system settings on
their device, such as turning on and off location services and sending
notifications to the device.

Because web applications are delivered as downloadable applications,

they have a broader range of abilities than a standard website. Web
developers have special considerations when delivering their sites in
this way.
Data considerations
Users can open web applications that they access through an app store or
download from a website when they aren’t connected to the internet. Because of
this, developers might need to include data with the application that would be
available on a website. For example, developers should package the text and
images that make up the user interface with the app so the user will have a good
experience even when working offline.

Web developers also need to consider what the app can do if any data is not
available. For example, suppose a web developer is making a web application
that displays financial data. The developer might decide to store the data the
user last viewed and display that data if the user is not connected. When the
user reconnects their device to the internet, the app updates the data to the
current values.
Platform considerations
While platforms like Android (Google), iOS, and iPadOS (Apple) support web
applications, the wrappers for these disparate platforms might differ. One
platform might support the ability to save files to and read files from the device,
while another platform might limit this ability.
Developers consider the features of web applications for various platforms and
plan their web application features and testing approach accordingly. While a
responsive website can be built for all devices, packaging that site into a
downloadable web application requires some additional work.
Support and maintenance considerations
One design goal for developing responsive websites is to create a single site that
anyone on any device can use. This not only provides a consistent experience
for users but also can reduce the amount of maintenance and support the web
development team needs to provide. It’s usually simpler to manage one website
and its associated code than it is to manage multiple websites.

When developing features for web applications that are delivered through app
wrappers, web developers should consider keeping customizations to a
 minimum. If a developer adds a feature to one platform that isn’t supported on
other platforms, they diverge from the “single site” model. And if they do this
multiple times across different platforms, they increase the number of sites that
they must support and maintain.
A web application delivers web content in an app wrapper that packages the
user interface images and text.

MODULE5:
Containers and virtual machines (VMs) are two technologies that web
developers use to create runtime environments. When testing a website, these
tools can function like a bowl for the egg: when something breaks, they prevent
the result from making a mess.
Containers :
A container is a small bundle of software that includes only the parts of an operating system
needed to run specific code.

To use a container, web developers don’t require a full version of an operating system. They
just use what’s essential to the application they want to run. For example, a web server that
doesn’t have a graphical interface might use the file system of an operating system but not
the graphics engine. Similarly, a gaming application might depend heavily on the graphical
and file system components of the operating system, but not use the encryption
components.
A developer can run a small software application that repeatedly performs one job using a
container that includes only the operating system software needed to run that application.
This makes the container much smaller than a complete operating system. It also uses less
memory, less disk space, and less power.

virtual machines (VMs):

A virtual machine (VM) is software that mimics an entire computer, both hardware and
software. A typical virtual machine also includes an operating system like Linux or Windows.
A VM can run inside the operating system of a particular desktop, laptop, or server. Multiple
VMs can even run on a single hardware device.

Web developers create a VM using a virtual machine software package. Then, they install a
full version of the operating system they require and use the VM as they would use any
other device.
VMs tend to use a lot of resources and computing power. For tasks such
as running a single function for a service, a container might be a more
efficient option.
Developers can also sandbox their applications. Sandboxing isolates a website
but runs it in a way that mimics a real-world environment. For example, a
developer can sandbox a website and then expose it to a virus and see if the
 security measures they’ve developed work to protect the website against the
virus. By sandboxing, the developer can isolate the virus, so it doesn’t infect
other computers on the network. Containers and VMs help create these
real-world environments.
Using virtual machines and containers can help web developers test their
websites in a variety of user environments without purchasing hardware to run
those environments. For example, a web developer might run multiple virtual
machines, each running with a browser from a different manufacturer. Then they
might create another virtual machine running all those browsers alongside each
other. Each of these setups will help them test different aspects of their website.

Web developers often need to perform tests that have as few variables as possible. Testing
their websites on a computer or mobile device that doesn’t have other software installed can
help with this. A computer that only has the operating system and no other software
installed is called a clean machine. It’s difficult to create clean machines on physical
hardware because it involves erasing the storage media and installing the operating system
from scratch.

It’s much easier to make clean machine environments by using VMs. Some virtual machine
software enables developers to create a base drive and a differencing drive. They install
the operating system on the base drive and then create a differencing drive for any further
changes, such as installing a particular browser. To go back to a clean machine, the
developer simply deletes the differencing drive and creates a new one from the original
base drive. This enables them to test their website on different browsers without having to
install the base operating system each time.

three types of popular tools that web developers use to test and debug their sites:

​ 1
​ 1.Browser developer tools2
​ 2API testing tools3
​ 3Performance testing tools
​
Browser developer tools
Most modern browsers include an invaluable and entirely free toolset
that anyone can use!
​ #
 ​ In browsers based off of the Chromium open source project, such
as Google Chrome and Microsoft Edge, the tools are called
Developer Tools.
​ #
​ In Apple’s Safari, web developers can turn on the Develop menu to
see a variety of website development tools provided by Safari.
​ #
​ In Firefox, the tools are available from the Web Developer Tools
menu item.
Each tool provides a way to view the source code of a website, debug problems,
and change the HTML of the site while it’s running so developers can try
different things to see what works and what doesn’t. These tools are very
powerful and indispensable to web developers when developing and testing
websites.
API testing tools
You’ve learned that testing the data transfer and security of API calls is
an essential task when building websites. An API for a website exposes
ways that web developers can use to retrieve data.
In the same way, web APIs provide methods that work like the locations at a
beverage shop. Some methods enable developers to submit data to web servers and
databases through the API.
​ #
​ The most common method for submitting data is called the post
method.
​ #
​ The most common method for retrieving data is the get method.
A popular tool that developers use to test API calls is Postman. has a free
to use option to get started and offers a variety of features for developers
to test and troubleshoot their websites. Developers can create requests
that use the post and get methods to see how an API responds when they
attempt to send or retrieve data from an API.
Performance testing tools
How quickly and efficiently a website can deliver content to users
directly impacts user’s experience on the site. Web developers gain
insights into the performance of their website by using a variety of tools
that provide indicators on key metrics. A metric is a unit of
measurement on a particular aspect of a website’s performance. For
example, the delay between when a user requests a web page for the first
 time and when the website delivers the initial data from the site is an
example of a metric. This metric is called time to first byte.

Most performance testing tools report on similar types of metrics. For

example, the metrics that the Google Lighthouse tool for Chrome
collects and displays include:
​ #
​ First Contentful Paint (FCP): This measures how long it takes the
browser to render the first piece of content after a user navigates
to a page.
​ #
​ Speed Index: This measures how quickly content is visually
displayed during the loading of a page.
​ #
​ Time to Interactive (TTI): This measures how long it takes a page
to become fully interactive.
​ #
​ Total Blocking Time: This metric provides insight into the total
amount of time that a page is blocked from responding to user
input, like mouse clicks, screen taps, or pressing a key on a
keyboard.
Lighthouse is integrated into the Google Chrome browser, but other tools like GTmetrix
(opens in a new tab)
aren’t browser specific. In these tools, a developer enters a web address, and
the tool produces an extensive report on how their website is performs. Some
tools also provide recommendations on how developers can improve the
performance of their website.
Runtime tools like these are invaluable to developers for providing information
about how they can improve their code or site architecture to make the site more
responsive. And the metrics these tools provide can help developers discover
bugs they might otherwise miss.

Deployment tools and services

After web developers fully test their websites, they need to deploy the websites
so users can access them. Developers typically deploy their websites in one of
the following three ways:
 #
An on-premises deployment, where they deploy the website to web servers
that a particular company manages.

#
A cloud deployment, where they deploy the website to a cloud server provider
such as IBM Cloud or Amazon Web Services (AWS).

#
A hybrid cloud deployment, where they deploy some website services to
on-premises servers and other services to the cloud. For example, a company
might store and deliver their website data on their own servers but serve their
website content from the cloud.

Many tools can support all three types of deployment, but cloud deployment is
fast becoming the standard deployment method for companies and individuals.
common web deployment tools

1.Command-line interface (CLI)

Developers can access the features of many deployment tools from the
command-line interface (CLI). The command line is a tool included with many
desktop and server operating systems. The interface of the tool only supports
text input and output. As the name suggests, developers use the command line
to type in commands and do work or retrieve information. A key feature of a
command line is the ability to run a text file containing a set of commands
automatically. Developers can even create this type of text file directly in the CLI.
In most server operating systems, these files are called batch files.

Developers can use the command line to send commands to and get information
from deployment tools. Using a batch file and the CLI, developers can automate
various steps of their deployment.

Code integration

When working on a team, many web developers will work on different parts of a
website. Before deployment and after full testing, the code from these developers
needs to be brought together or integrated so all the code works together. Because
developers are continually changing code, deployment tools use a feature called
continuous integration which regularly brings code together for testing and
deployment purposes.

Popular code repository GitHub(opens in a new tab) has a range of deployment

tools and code integration is a central feature of the site. The IBM
UrbanCode(opens in a new tab) deployment system also includes continual
integration and also supports automating other tools that handle code integration
such as the open source automation tool Jenkins(opens in a new tab).

Scheduling toolsWeb deployments involve continuous integration, continuous

delivery, and continuous deployment. Without the ability to schedule when things
happen, these ways of developing, integrating, and delivering website code can
become complex and unmanageable. Many deployment tools enable developers to
set specific times for specific events to occur.

Blueprinting
In code deployment, blueprinting is the ability to create and view each step in a
deployment process. A graphical blueprint shows what events happen at each
stage of the deployment and enables deployment engineers to change the settings
for a given stage. Web developers use blueprints to better understand what
deployment steps will happen and in what order they will occur.
For example, IBM UrbanCode has a graphical blueprint feature. It can model the
resources a deployment will need, which software to deploy on those resources,
and the automated processes to run. Developers then just need to ensure that the
resources are available, and the website will be automatically deployed. GitHub,
similarly, provides the Workflow Visualizer which offers similar features.

Cloud-based tools
When developers choose to host their websites with a cloud provider, they can, in
most cases, access all the tools they need to deploy their websites to the cloud.
Cloud providers also support integrations with other tools to make it easier to use
open source tools with their services. For example, GitHub and Jenkins work with
all the major cloud providers, making it easier for web developers to deploy their
sites to these services. You’ll learn more about deploying to the cloud in the next
module.
MODULE 6:
Regardless of the origins, the term cloud generally refers to the internet.

The cloud, particularly in technical environments, is the set of services and

storage that companies and users have come to depend on.

The cloud is an evolution of these server farms. Early internet servers were
designed to deliver websites with all the services a website needed, like storage,
networking, and security, all on one server. Cloud computing improved on that
model by separating the features of one server into distinct functions on specially
designed and dedicated servers. This makes it easier for web developers to use
only the resources they need when they need them.

The cloud is an evolution of these server farms. Early internet servers were
designed to deliver websites with all the services a website needed, like storage,
networking, and security, all on one server. Cloud computing improved on that
model by separating the features of one server into distinct functions on specially
designed and dedicated servers. This makes it easier for web developers to use
only the resources they need when they need them.

Cloud providers work in a similar way, providing all the resources that web
developers need in one place. For example, providing development tools,
deployment and testing tools, monitoring tools, and the ability to scale to regions
throughout the world.

Hosting
Cloud services offer many options for hosting websites. Some offer templates for popular
content management systems like WordPress and Drupal. Content management systems
are software packages that include everything needed to deliver content to users. Cloud
providers also host and manage domain names.
Replication
Latency is the delay between when an electronic signal is transmitted and when it is
received. The further apart the source and the target are, the greater the latency.
Modern cloud services have servers all over the world. They offer replication to
automatically copy the entire code base for a website to servers in various parts of the
world. Replication helps reduce latency by putting the website code closer to the users.
Scalability
In the days before the cloud, if you needed more power on the computer you had, you
either had to upgrade your hardware, buy another computer, or borrow one. This was
inconvenient if you only needed the extra power temporarily.
The cloud helped address this scale problem. Many of the web services available in the
cloud enable web development teams to pay for only the capacity and power they use. If a
website needs more storage, the web development team pays for it when they need it and
can scale back, or pay less, when they no longer need it.
Security
When you want to protect your personal computer, you might install a virus scanner or a
firewall. Websites need protection, too. People with malicious intent might try to steal data
or cause a website to fail. Cloud services include tools that can keep websites safe.
For example, cloud services can help prevent denial of service (DoS) attacks. A DoS
attack attempts to overload a website by sending enormous amounts of fake requests to its
server so that the website can’t respond to real requests. Cloud services can monitor for
these types of attacks and either prevent the requests from reaching the website or alert the
website owner of the attack.
Monitoring
Most cloud services include tools for examining the status of the web services that the web
developer is using. For example, a web developer might need to understand how much
computer power their site is using so they scale it up if there’s not enough power or scale it
down if they’re using too much.
Monitoring tools help developers to see every aspect of their site, from network traffic to the
requests the website is receiving. Many cloud services provide a customizable dashboard
so developers can quickly see the information on many items essential to their website.
Development tools
Most cloud providers include tools that web developers can use to create websites. Some
offer tools for creating back-end solutions, such as IBM Vapor, and others provide code
editors for front-end and back-end development, like Microsoft Visual Studio Code. Most
cloud providers also include a command line interface for troubleshooting, deploying, and
testing web services.
Cloud services save development time by including a lot of the tools, such as page
authoring and plugin support, that many content authors need. Cloud services make it
straightforward to deploy and manage these templates. Cloudservices also provide all the
infrastructure for web developers to build their own sites from scratch. They enable web
developers to create web servers, build virtual machines and containers, and write
functions. Functions in this sense are software that handles very specific jobs for their
website.
Cloud computing also provides services that enable web development teams to use fewer
resources while building more efficient services that scale. This is good for the environment
as well as the end user.
Like a shipping container, a software container is a standardized package. Everything
needed to run the program is inside a single container including the code, runtime
environment, system tools and libraries, and settings.
Beyond operating systems

Before containers, developers would need to install an entire operating system like Linux or
Windows on a physical computer to run any software that they needed to deliver web
pages. They would install their software, such as a web server, and then deliver their
website to users.

To simplify this process, engineers developed virtual machines (VMs). VMs were like
physical machines, but they used software to emulate the physical hardware. An emulator
copies all the features of the physical computer in a software application. Developers might
then install an operating system on a virtual machine.
The challenge with both approaches is that they require the web developer to install and run
an entire operating system, even if they only need to use a small part of the operating
system for a specific job. Operating systems take up a lot of storage and memory. Storage
and memory require disk space and electricity. What if a developer is able to take out only
the parts of the operating system they need for their job and use their software with just
those parts? And what if they are able to take those parts and run them in a virtual
machine? This is what a container does!
Containers provide two key benefits to web developers.

1Within a container, code is no longer dependent on the hardware to run. By putting all the
necessary parts of the software in a container, developers create stand-alone and portable
environments. They can then deploy containers on several different systems.

2Developers can use a single container to run anything from a static website, a software
process, or a large application. Organizations can even break down larger websites and
applications into microservices that they package in containers and deployon the cloud. A
microservice is a stand-alone portion of a website or application that delivers a single
capability such as user authentication, recommendations, menus, or search.
Developers can use container technology for nearly every type of internet hosting, from web
hosting to database hosting, and even audio and video hosting. Developers use containers
to provide data to the front end.
Shipping containers revolutionized trade. Similarly, containerization and
microservices have revolutionized how organizations deploy and run programs, from
websites to web applications

● Web developers test websites for user experience and software-related

flaws.
● 2There are many different types of web tests with specific objectives and
strategies, including acceptance, integration, performance, and usability.
● Web developers should consider the user interface, responsive design, code,
APIs, and databases when testing a website.
● 4Web developers use version control to track and manage changes to
software code.
● 5A version control system can include features such as a code repository,
collaboration tools, and code deployment.
● 6Web developers use the continuous delivery approach to deliver updates to
websites so that they can be automatically tested. They use a continuous
deployment approach to deliver new builds to users on a regular basis.
● 7DevOps is an approach to deployment that promotes closer collaboration
between the business that uses the website, website development, and IT
operations.
● 8The DevOps lifecycle consists of six general workflows that enable web
developers to release high-quality websites faster.
● 9Web browsers communicate with servers using the Hypertext Transfer
Protocol (HTTP), which facilitates requests to load web pages using
hypertext links.
● 10A website design is responsive when it adapts its looks to the form factor
on which it displays.
● 11Frameworks are software packages that include code that integrates into
a website and assists web developers in developing a responsive site.
Frameworks also provide code libraries that can handle data management,
control the user interface, and handle common tasks like creating and
delivering forms.
● 12Web developers use an app wrapper to deliver websites as downloadable
apps through an app store or from a website.
● 1Web developers can use command-line interfaces, code integration,
scheduling tools, blueprinting, and cloud-based tools to automate the
deployment process.
● 1The cloud has revolutionized web development by providing services, such
as hosting, replication, scalability, security, monitoring, and development
tools.
● 1A software container is a standardized package of software that contains
everything that is needed to run a program.