Web Development Basics

MODULE 1: HOW DOES A COMPUTER WORK?

Input

Inputs are information received by a computer. A computer cannot perform a function

until it receives input. Web developers build interfaces for users to provide input through
keyboards, computer mouses, or even touchscreens and microphones. Computers can
also receive input automatically through devices like sensors.

The computer must translate the data it receives from the input devices into binary code
for the computer to either store or process.

Binary code, also known as machine code, is a system that represents all data as
either 0’s or 1’s (or false/true or off/on). It is the only language that a computer can
understand.

Input – a place where, or a device though which, energy or information enters a

system.

Processing

The transformation
When a computer receives data, in the form of 0’s and 1’s, it must transform that data.
The computer transforms the data into anything from numbers, to letters, to simple
commands. Processing is the series of actions that a computer takes when it receives
data. The programs that web developers write will tell the computer what to do with the
data that it receives. The computer mainly performs logical operations because the data
is converted into 0’s and 1’s.

Output

The reveal
Output is the result of the computer transforming input data, through processing, into
usable information. A computer’s output might be letters, numbers, photos, videos, or
audio. Users can receive this output in different ways including via device screens,
speakers, and even external devices such as printers. Similarly to input devices, output
devices must do some translation. They decode machine code from the computer into a
format that users can understand.

Output – A place where power or information leaves a system.

Storage

Hold that thought

Storage refers to how a device retains information. Web developers need to be aware
of, and need to know how to use, short-term storage and long-term storage.
 Short-term storage, also called volatile memory, stores data while the device is
running. Websites store data that web pages will use while the user is interacting
with it. The data is stored in short-term memory, called random access memory
(RAM). For example, suppose you’re developing a site that handles inventory for
a shipping firm. When a customer enters an order, the web page will hold the
data in short-term memory until the customer clicks or taps a button to submit the
order. In many cases, the web browser will handle storing data in short-term
memory.
 Long-term storage will retain information even after the device is powered down.
Devices like solid-state drives (SDD) or hard disk drives (HDD) are used for
long-term storage. Websites create small files that store information
called cookies. A cookie stores user-specific data such as the last time that the
user visited the site, how long before they need to log in again, and other data.
The device’s long term storage stores cookies, which persist between
site sessions. A session is the time a user is on a website in one continuous
block of time.

Four simple functions, many complex tasks

It might be hard to believe that the computers that put humans on the moon had only
these same four functions, but it’s true. From early computers to the cell phone, all
computers perform those same, basic four functions. They take in information, in the
form of 0’s and 1’s, transform that information, store information for a period, then send
that information back out to you, the user.

The layers of computer architecture

When you hear the word computer, you might think only of the physical devices that you
have used, such as your laptop, desktop, or cell phone. But, for your computer to
complete the four functions, it needs hardware (the physical components)
and software (the instructions). Let’s explore the layers that make up computer
architecture.

HARDWARE
Hardware is the physical components your computer needs to operate. Examples of
hardware include the RAM and central processing unit (CPU), which handles
processing.
Some hardware also functions as input/output (I/O) devices. I/O devices are the
physical components your computer needs to gather inputs and share outputs. The
keyboard, microphone, and mouse are examples of I/O devices.
SOFTWARE

The primary software that your computer needs is an operating system (OS). The
operating system is like a manager. It enables you to communicate with the computer
without knowing machine code. It also manages all software and hardware, and acts as
a coordinator between the hardware and all systems that are running. Some examples
of operating systems are Linux, Windows, Android, Apple macOS, and Apple iOS.

Other software applications, also called programs, are sets of instructions that the
computer uses to perform tasks that are beyond the main functions of the operating
system. Examples of software applications include web browsers, word processors, and
image editors.

Examples of Hardware and Software

Hardware examples include:

- CPU
- Mouse
- Computer Monitor
Software examples include:
- Word Processor
- Operating System
- Image Editor

Connecting computers and web development

Computers existed many years before the invention of the internet. But, as the internet
started to grow, how users accessed programs began to change. The development
of web browsers, like Google Chrome, Mozilla Firefox, and Microsoft Internet Explorer,
was a critical piece of this evolution. But, web browsers are limited without programs
written by web developers.

Web programs and web browsers

An automobile is a complex piece of machinery. It has a lot of electronics, an engine
that is very powerful, and complicated mechanisms that make it all run. Without a driver,
however, it won’t do anything (at least not yet). The driver is what directs the automobile
and makes all that power come to life.

The web browser is like the automobile. It has a lot of power and uses complex
software to make the web useful. However, without websites, it really can’t do much.
The web sites and web applications that developers write are like the driver—they tell
the browser what to do to make it useful.
Web applications are a hybrid between a software program and a web page. Web
applications can run in a browser, but many software developers use a wrapper for web
apps. A wrapper is software into which a developer can add the code they developed for
a website. You might have downloaded an app onto your phone that looks and behaves
just like the application's website, such as a to-do list app. The phone app has
essentially the same code as the website, but it is delivered and operates on your
phone through a wrapper.
The following image illustrates the difference between a web app and a web page.
While both apps and pages send data to and receive data from the internet, web apps
have more access to system resources like storage, the file system, and the graphics
processor. This helps them behave more like traditional applications.

MODULE 2: Speaking code

An introduction to abstraction

Modern personal computers can perform millions of operations per second. For much
larger computing projects, the world’s fastest supercomputer can perform one exaflop,
or 1.1 quintillion operations per second! The computer’s ability to perform this many
operations in such a short period of time enables us to solve complex problems with
relative ease.

 Even though computers perform so many operations per second, humans must
code those operations. Developers must manage all the details for each of the
millions of operations.

Do you need to be a mechanic to drive a car? The concept of abstraction makes it

possible to give a computer instruction without understanding the sheer complexity of
the machine. Take for example, a car. You can drive a car even if you know very little
about the mechanics of the car. You simply get in the car, turn the key or press a button,
put the car into gear, and drive.

To drive the car, you don’t need to understand how the engine uses burning gas to
convert heat into the force that propels your car forward. You also don’t need to know
how the hydraulic system works with your brakes that enable you to stop. The details of
how these things work is not essential. You know that to move a car forward, you need
to step on the gas pedal, and to stop the car, you need to step on the brake.

Abstraction in computer programming

Similar to the car driving example, abstraction hides the complexity of the computer
machine and enables programmers to focus on what is most relevant using
programming languages. Computers require binary, or machine code, to generate
output. But you’re not expected to code a website in a series of 0’s and 1’s.

Developers wrote the first computer programs in machine code and assembly
languages, also known as low-level programming languages. But over the years, more
details of a computer’s system have been hidden so that you can write code using more
natural language elements. These new languages are easy to write, and developers
can comprehend them quickly.

Additional notes:

An example of abstraction is taking photos on a digital camera or smartphone. Think

about devices or machines where you, as a user, can use the device or focus on its
main function without needing to understand all the details.

Money is also an abstraction. You do not need to know about currencies, economics, or
even the banking system to use physical or digital money to buy goods and services.

Types of programming languages

Machine languages
First, the only language a computer understands is made up of binary numbers (0’s and
1’s) called bits. These bits can only represent two possible states, such as on and off,
or yes and no. While these two states on their own cannot represent much, when you
combine many bits together in different patterns, you can represent quite a lot of
information. The central processing unit (CPU) of the computer interprets machine
code directly.

Currently, machine language is rarely, if ever, used to write programs.

Compiled languages

These languages are used to develop systems programs, such as operating systems or
hardware drivers. They are also used for managing parts of the computer system such
as memory and data transfer. Compiled languages are also called low-level
programs because they are very close to the actual hardware of a machine.

For a computer to use a compiled language, the code a software developer writes must
be put through a compiler. A compiler is a mid-20th century invention by Grace
Hopper(opens in a new tab) which translates human readable code into machine code.
If you were to look at code after it is compiled, it would appear as a lot of random
characters. Compilation usually is a one-way process. After a developer compiles code,
they can’t modify it. They must go back to the source code to make changes and
compile it again. Source code is the version of the program software developers can
read and edit.

When a compiled program is read by a computer, the entire program is loaded into the
computer’s memory. As a person interacts with the program, the computer can perform
functions from the computer’s code that is available in its memory.
For example, the most common compiled language is C. C continues to be a popular
language because of its high-level readability and low-level functional
capabilities. Java and C# (pronounced “C-sharp”) are other popular examples of
compiled languages.

Interpreted languages

Interpreted languages are the most abstracted from machine language. Similar to
compiled languages, they are designed to be self-describing. Self-describing code is
both easily readable by humans, but also the syntax of the code tells the developer
what the code does.

Interpreted languages need an interpreter. An interpreter is a piece of software that

reads each line of code independently and executes them at runtime. Runtime is the
code of a program that is active in the computer’s memory at a given time. As you
learned with compiled code, all the code of a compiled program is available at runtime.
Interpreted code is executed line-by-line. What parts of the program stays in memory is
dependent on how the developer writes the interpreted program.

Python and JavaScript are both examples of interpreted languages.

Examples of Compiled and Interpreted

Compiled:
- Java
- C
- C#
Interpreted:
- JavaScript
- Python

How does a computer read code?

Computer programs comprise binary combinations of 0’s and 1’s. You can think of
binary like a light switch:
 When the switch is off, the binary digit is in the 0 state.
 When the switch is on, the binary digit is in the 1 state.
When you only have one switch, your light bulb can only be in one state at any given
time, on or off. As you add more switches you exponentially add more possible states.
Now suppose you have two switches that can function as a dimmer for the bulb. With
two switches, your bulb can be in four different states.
In the morning when you’re just waking up, you turn the bulb on using state 4. In the
middle of the day, you might use state 3 because the sun provides some light. In the
evening, you use state 1 and when you go to bed you use state 2.
Example of the light bulb power limit:

When both switches are on the light bulb is on full power.

When both switches are off, the bulb is off.
When switch 1 is on and switch 2 is off, the bulb is on at 33% power.
When switch 1 is off and switch 2 is on, the bulb is on at 66% power.

Machine code operates on this basic model, but modern computers can process
millions of switches in very short periods of time. This simple model enabled early
programmers to develop punch cards to provide the computer with instructions. Punch
cards consisted of columns and rows that contained numbers. Early programmers
would write out a program by hand, then use a tool to punch holes in each column.
 Each punched-out hole represents a yes state.
 Each number that is unpunched represents a no state.
 Each line of code required one punch card.
Early programmers would insert each card into a punch card reader, often stacks at a
time. As the punch card reader read the cards, the computer memory stored the
information. The computer was instructed to execute the code after all the cards were
inserted.

A novel idea

“It’s much easier for most people to write an English statement than it is to use symbols.
So, I decided data processors ought to be able to write their programs in English, and
the computers would translate them into machine code.

- Grace Hopper, an female American pioneer in computer programming

Today’s computers do not receive their instructions using punch cards. Now, you can
write programs using any number of human-readable languages, such as HTML or CSS
and this is possible using a compiler. While interpreted code doesn’t need to be
compiled, the interpreter still needs to translate the human-readable code to machine
language. Ultimately, all code that developers write gets translated to the machine
language the computer understands, either by a compiler or an interpreter.

Here is an example of a simple Python program to add two numbers. Take a moment to
review.

if __name__ == "__main__" :
num1 = 15
num2 = 12

sum_twoNum = lambda num1, num2 : num1 + num2

print("Sum of {0} and {1} is {2};" .format(num1, num2, sum_twoNum(num1, num2)))

When you first look at this code, you might see some terms that you understand. The
code also might not seem very readable to you. But when you know the terms the
language uses—the syntax—the code becomes much easier to read. The
code’s syntax defines the structure of the programming language and functions like
grammar does in natural languages like Greek or Hebrew.

Syntax is the structure of the programming language and describes the terms and
relationships programmers can use within the language.

Language translation

Human-readable language gets translated into a language the computer can

understand through a compilation process.

First, the translator (a compiler or interpreter) checks the code to ensure the syntax is
correct. It also confirms that the code follows the rules of the language. If it finds an
error, the translator stops and provides information to you about what the error is and
where it occurred.

Next, the translator converts the code into machine language. The computer’s brain, the
CPU, can’t use the code until it’s in a language it can understand, which is machine
language.

Finally, your computer’s operating system opens the translated code, reads the
program’s instructions, and executes those instructions.

Module 3: What is web development?

Overview of web development and web design

Web development includes all the work that goes into building and maintaining web
pages and websites. Web development includes writing code to lay out a web page,
add fonts and colors, and making the website interactive. Web developers also work on
databases, servers and network configuration, application programming interfaces
(APIs), and other server-side software that ensures a website performs correctly.
Web design is also an important part of web development. It focuses on how the
elements of a web page or website are presented to the user. Information should be
easy to find, colors should be pleasant, and there should be enough, but not too much,
negative space. Websites and pages should also support great experiences for users
with accessibility needs. Web designers do all this and more!

Web developers

What do they do?

- Write front-end and/or back-end to make the website work.

Who do they work with?

- Work with the web designer, architect, product manager, and others to build a
site based on design and functionality needs.

What expertise do they need?

- Need to be an expert on front-end and/or back-end coding languages,

frameworks, and libraries.

Web designers

What do they do?

- Create wireframes and prototypes based on user requirements to test design

ideas.

Who do they work with?

- Work with clients or users to translate vision into viable designs, and use these
designs to create a site.

What expertise do they need?

- Need familiarity with some front-end coding languages.

Why is web development important?

Web development made this growth possible. Without web developers, users would not
have informational websites, social media sites, or online stores that are also called e-
commerce. Much like humans use computer software to do specific tasks, the internet
is also used to get things done, even if that task is watching funny videos. Without
websites, and many of them, humans would not have a reason to visit the internet. Web
developers are necessary for building and maintaining the websites and web
applications that people use every day.

What is a website?

A web page displays information on the internet in the form of text (copy), images,
videos, and other elements. Web developers create web pages. They use specific
coding languages to program a set of files. These files describe various components of
a web page:
 The layout
 The content that should display on the page and the media types to use, such as
audio, video, images, and more
 The style of the fonts, colors, and media on the page
 The numerous ways that a user might interact with the web page, such as links
and buttons, and advanced methods of interaction, including login and password
authentication

In addition to web pages, a website also needs a domain name to locate it, a browser to
view it, and a server to host it.

Take a look at the essential components that are required for a website.

The domain name and URL

If someone told you they live in Tokyo, you could infer the country they live in from the
city name. The same goes for how we communicate web addresses. When entering a
web address, you typically only put the domain name. Most web browsers can infer the
entire uniform resource locator (URL), including the www and [Link] A domain
name is simply the name of your website, and the URL is the complete web address of
your website. For example, if you type “IBM” into an address bar, most web browsers
will infer [Link] in a new tab) and direct you to the IBM website.

A website can be one page or thousands of pages. Each web page has a separate URL
containing the same domain name as the other pages of the same site. If you know the
full URL for each page of the site, you can simply enter those URLs to get to a specific
page. Because this is cumbersome, most websites have a navigation structure which
describes how the different pages of the website link together. Usually, the user sees
the navigation structure in the form of a navigation menu. The navigation menu is a set
of links with unique URLs presented in a user-friendly manner.
The browser

The browser is software that provides a way for a user to experience and interact with
a website. When you are interested in visiting a website, you open a browser, type in a
domain name or URL, and within a short amount of time that website appears. When
you request a website, the browser first makes a request to the web host for the website
files. A web host, or a hosting provider, supplies the servers where the files exist as
well as all the services needed to return the website to the browser. When a server
returns website files, the browser interprets the files and displays this information as
the user interface (UI) of that website.

The server

Imagine that you are an artist, and you have some pieces of art that you want to sell.
You would like to sell your art in a gallery, but you don’t own a gallery. You could create
a small gallery at your house, but it would not function as well as a large gallery. So, you
find a public gallery that, for a small fee, will display your work and deliver it when
someone purchases it.

When you create a website, it is like the piece of art and a server is like a gallery. You
need to upload a website to a server for it to be viewable on the internet. A web server
is a special computer, or network of computers, designed to host and deliver web
pages. Like the public gallery, servers have the infrastructure to deliver your website to
many visitors in a timely fashion.

How is a website developed

You would not start building a house without a set of blueprints or without hiring an
electrician. You’d want to inspect and test that everything is functional in the house
before moving in. In the same way, web developers don’t begin developing a website by
writing a bunch of lines of code. They also don’t publish their website for the world to
see without first testing it.

During development, web designers and web developers work together. While the work
that both roles perform isn’t always linear, in general the designers and developers
produce the following deliverables. Take a moment to review this diagram so you're
familiar with the typical deliverables that align with web design and web development to
develop a new website.

Planning and design

During planning and design, the web developer works with a web designer and other
stakeholders to create requirements. These describe what functions the website needs
to perform, and how it should look. Designers might create wireframes to assist with
the coding process. Wireframes are diagrams that show where elements should be on a
page. They include detailed information like the size of elements, how far apart
elements should be from one another, and how the design should look on various
screen sizes.

Coding

This is where the web developer shines! During this step, they program the website and
create code files. Web developers take the wireframes and the requirements and write
the code the website needs to function. Web developers work to meet the requirements
and reflect the design in software. When developers can’t translate the design or a
specific requirement into software code, developers might need to go back to the
designer and project manager to update the design or requirements documentation.
This is called an iterative process because the design and development phases
undergo continual change and improvement.
They might also be setting up the environment where the website will live. Web
developers need to purchase and register a domain name. They also need to set up
web hosting, either through a web hosting provider, or through servers at their company.
At the end of this phase, web developers provide working web pages that are ready for
testing.

Testing and Publishing

When the website programming is complete, it is ready for testing and publishing. Web
developers or others on the team are responsible for testing the code. The purpose of
testing the website is to make sure that it is functional. This means that all links,
buttons, and interactions work as expected. Web developers also test that the website
meets the requirements defined during the planning phase.
They also need to test that the site is accessible. Accessibility ensures that as many
people as possible can use a website. This includes users with disabilities, such as a
vision or hearing impairment.
After the team has tested the site, it is ready for publishing. Development teams
typically develop and test code on a version of the website that users can’t access. This
version is called the staging site. The staging site is identical to the live website in
every way except it’s accessible only by the development team. When the updated
code, images, and other website assets are ready, a publishing team will publish
or push the new files to the live site for users to experience.
When updating a website or adding new features, publishers have to make sure that the
live website doesn’t break. A break can occur when something that works in the original
website stops working or is accidentally missing in the updated website. This is why
testing and a staging site both are important. By using a staging site and testing all the
new code on it, development teams can avoid surprises when publishers push updates
to the live site.

Planning and design – Understanding the functions that website needs to perform
Coding – Setting up web hosting
Testing and publishing – Checking the site is accessible

Maintenance

After the site is built and published, web developers also need to maintain it. This might
be implementing simple content changes and updates to images, but there can also be
major updates to the functionality of the website. Some web developers focus primarily
on maintenance of existing websites.

Client-side and server-side processing

When you are out at a restaurant for dinner, you decide what to eat, tell your server, and
then, after a period, your server brings the dish that you ordered out to your table. You
interact with the server, but rarely interact with the kitchen staff.
In the same way, when users interact with a website they might give the website some
instructions, say by filling out a form. But after they submit the form, the user is unable
to see what happens to the information until it is processed and returned to the user’s
device.
In web development, these two processing functions are client-side and server-side.
These terms refer to which computer performs tasks.
 Front-end developers write the code that renders a website and also enables a
user to interact with a website. Some of those interactions trigger a process that
directly communicates and interacts with servers and the processes that run on
them. For example, when you do something as simple as clicking the play button
 on a video, that begins a request to pull the data that makes up the video you
want to play from the server. The server then sends that data to your (the client’s)
device to render it (a client-side process).
 Back-end developers write the code that processes data and performs tasks that
send information to and receives information from the browser. For example, a
user might use natural language to search for all restaurants in a given area.
They type, “show me all the Greek restaurants in my home city” into a form. This
query along with some location data is sent to the server, which uses artificial
intelligence and natural language processing technology to produce a result (a
server-side process). The result then is sent back to the client-side to display to
the user.
Client-side code works with server-side code. For example, if a website is designed
to display banking data, server-side developers will write software that listens for data
requests from the client. Client-side developers will write the code that requests the data
or they'll use software that a server-side developer has written to retrieve that data.

CLIENT-SIDE PROCESSES
 Run on the user’s device
 Render web page layouts and make requests from the server
 Manipulate visual design elements, such as brand colors and typography
 Respond to user interactions, such as buttons and form validation
 Interact with server-side processes to send and receive data and process
information

SERVER-SIDE PROCESSES
 Deliver dynamic content to websites based on user action, or data from a
database
 Store, manage, and deliver data to client
 Authenticate user login information
 Send data to and get data from client-side processes
 Run complex processes that require a lot of power

Additional notes:

Client-Side Processes
 Display alternate brand logo on mobile device versus a laptop
 Display a success message after a user submits a form
 Restructure a page when a user resizes the browser
Server-Side Processes
 Verify username and password
 Stores sales data for an e-commerce site
 Deliver personalized content based on a user’s activity on a site
MODULE 4: FRONT-END DEVELOPMENT

Overview of front-end development

Front-end development focuses on developing only the parts of a website that users
can see and interact with. A front-end developer creates everything you see on a web
page, such as text, and buttons. Every interaction that a user has with the website is
programmed by a front-end developer. As a web developer, it might sound exciting to
build something that anyone on the internet can see and interact with. Digging a little
deeper, you can explore more of what front-end development means for web
developers.

Where is the code run?

- The code runs on the user’s device
What is the primary focus?
- The focus on the website layouts and visual design elements.
How does front-end development relate to data?
- It creates interactions so that users can input data.
What are the programming priorities?
 User experience and accessibility
 Ability to use websites on multiple devices
 Media renders properly

As computers have become powerful, the role of the front-end developer has expanded.

The first websites were informational, and their development was complex. Initially,
front-end development was primarily focused on simple page layout and styling.

Style – A collection of formatting rules that define how to display diverse types of
elements on a web page.

Front-end developers can now develop websites with increasingly sophisticated

interactions, such as animations and 3D renderings. As technology has advanced, front-
end developers have also had to consider other areas that they would not have
considered in the past.

Check out areas that front-end developers should focus on when creating great web
experiences for everyone.

Mobile ready

Increasingly, users are accessing the internet from various devices, including
smartphones and tablets. Many of these devices are physically different from desktop or
laptop computers. They also have unique features, such as screen orientation APIs that
determine how a user is holding their device. The ability to program a website to work
on both larger screens, as well as mobile devices, has led to the development
of responsive web design. This is a set of techniques that enables websites to
respond based on the size of the screen that is being used and how it is being held.
A design is responsive when it can accommodate not only variable screen sizes and
screen orientations (horizontal and vertical), but also various input types. Mobile devices
such as smartphones and tablets support touchscreens and a mobile-ready, responsive
design should avoid inputs that require a physical keyboard or touchpad (or mouse) to
navigate. Many modern frameworks support responsive design. A framework is a
software package with built-in user interface and data tools that developers can use to
build websites. React, [Link] and Bootstrap are examples of frameworks.

Search engine optimization (SEO)

Before the internet, if you needed a specific service, you could search for a number in a
phone book. Phone books provided an index of sorts, with addresses and phone
numbers of businesses.
In a comparable way, modern search engines are where users go to find specific
information. Search engines automatically access websites and gather information
about them to create an index of all websites. This is known as crawling the web. They
then use complex algorithms to sort that information and rank it. There are many factors
that contribute to a website’s rank, including speed, mobile friendliness, and
accessibility.
Web developers increasingly need to understand how to optimize their websites for
search engines so that they appear higher in the rankings and internet users find their
sites. Developers add metadata to the top of their web pages or websites that
describes the content within them. Search engine optimization (SEO) is the process
of ensuring that the metadata included in the header of a page or site matches the
content in the body, adding appropriate information so search engines can properly
crawl the site.

Accessibility

Making websites easy to use for as many people as possible should be a primary goal
for web developers. Websites can reach a wider audience by being accessible.
Focusing on accessibility is critical to ensuring websites are usable for everyone.

A website is accessible when it:

 Provides information for screen readers, such as description text for images
 Can accommodate those with physical impairments, such as supporting high-
contrast or dark modes
 Is responsive, such accommodating touch navigation

The World Wide Web Consortium (W3C)(opens in a new tab) develops international
standards for the web. The W3C Web Accessibility Initiative (WAI) develops standards
and guidelines to help you understand and implement accessibility. All web developers
should check out and follow the W3C Accessibility Standards(opens in a new tab).

Challenges front-end developers face

Developing the user-facing aspects of a website can be a rewarding experience. But

front-end development does have the following challenges.

 Meeting technical demands. It’s a challenge to meet the technical demands of

designs that also meet the needs of users. Developers must take decisions
within the constrains presented by technologies, design styles, programming
languages, and budgets.
 Supporting compatibility. It’s a challenge to develop a website that works
consistently across different browsers. There are many popular browsers, and
these even have various versions for different platforms and devices. Front-end
developers must develop website for many different browsers, which all have
different standards. Some browsers do not support certain styles and features,
and so the website should have fallbacks and degrade gracefully.
 Accommodating graceful degradation. A website should function in a limited
way on older versions of browsers. Front-end developer need to keep browsers
and what functions they support in mind when they are developing their site.

Common languages for front-end development

Front-end web developers use programming languages to code user-facing

experiences for the web. Explore these common programming languages that front-end
developers use.

Hypertext Markup Language (HTML)

When building a house, one of the most important initial steps is framing. Framing
provides the shape of the house, as well as the structural support for all other elements
of the house onto which it will be built.

Similarly, web developers use HTML to build out the structure of a web page. Web
developers use HTML to tell a browser how to display web page elements such as
paragraphs, links, and media files.

Cascading style sheets (CSS)

Before a house is completed, builders and interior designers focus on finishing the
interior design. They may paint or wallpaper the walls, add decorative flooring, and
install a backsplash in the kitchen.
In the same way, web developers use CSS to add styling to a web page. CSS is
responsible for the colors, backgrounds, animations, and other decorative elements on
a page.

JavaScript

A home would not be complete if you could not turn on the lights or use the sink.
Electrical and plumbing are critical steps in the house building process, as they allow
the house owner to interact with the house.

Web developers use JavaScript to add interactive elements to a website. JavaScript

allows web developers to extend the functionality of a webpage beyond the basic HTML
and CSS. With JavaScript you can add pop-ups, dynamic image galleries, and
personalized content.

Additional notes:

HTML
 Instruct browsers how to display paragraphs and media files
 Structure web page elements
CSS
 Add design elements
 Set a background color
JAVASCRIPT
 Add personalized content
 Create interactions

MODULE 5: BACK-END DEVELOPMENT

What is back-end development? Back-end development is what goes on behind the

scenes in the websites and applications that we use every day.

For example, when you go shopping at a store, you normally enter the front of the store,
where you browse for products, talk to the clerk, and purchase your items. However,
what you don't see is the back of the store, where the products are received, items are
sorted, and daily operations are tracked.

The back end of applications and websites is similar. While the front end is what users
normally see, the back end ensures that everything is working as it should.

Back-end developers focus mainly on servers, applications, and

databases. Servers are the computers that send and receive data, applications process
requests and responses from the front end, and databases store and organize all that
data. Basically, back-end developers make sure that servers, applications, and
databases communicate with each other and operate smoothly and quickly.

Back-end development might not seem as captivating as front-end development, but the
back end is consistently working in the background to power a user’s front-end
experience. Think about this course you are taking. The text, media, and interactions all
“live” in a server. When the server receives a request, it returns the files. Then, the
browser interprets them with strict guidance from the front-end code and displays the
information. This is the back end at work!

The back end also focuses on the data management and security of the website.
Back-end developers write all the code to make this possible.

Where is the code run?

 The code runs on the website’s server.
What is the primary focus?
 The focus is on logic, integration, and data management.
How does front-end development relate to data?
 It processes and stores data received from users.
What are the programming priorities?
 Security
 Data integrity
 Server responsiveness

Websites have become powerful tools for individuals and businesses. Originally,
websites were purely informational, and users had little interaction with them. Now,
websites have seemingly endless uses. Users can make purchases and payments,
check their banking information, fill out their medical history before an appointment, and
more.
As the use of websites has become more complex, the role of back-end developers has
expanded. In addition to ensuring servers, applications, and databases are operating as
they should, back-end developers also write server-side scripts for dynamic content,
develop APIs to move data around, and ensure websites and systems are secure and
meet security standards.
Check out the server-side work back-end developers do.

Dynamic web pages

Initially, web pages were static, indicating that a developer had to go into the code each
time an update to the content or media is required. Now, web pages can display
different content based on several different factors. The content displayed on the screen
may change based on location, time of day, or even what the user has previously
interacted with. Back-end developers write server-side scripts to tell the server what
rules to follow when delivering dynamic content.
Application programming interface (API)
Have you ever logged into a website that let you use your credentials from another site,
like your social media or email, to log in? If so, you have experienced an API in action.
APIs enable front-end developers to interact with data and services from the server.
They also enable two distinct applications to interact with one another and share data.
This ensures that when data that is passed from between the front-end and back-end or
between applications, it can be done securely and predictably. APIs do this by
specifying what type of request the client can make, and what data the client can expect
in return using a secure transmission.

Imagine you call your favorite movie theater to see what ticket prices are. You hear a
voice response system that gives you three options. You can press 1 for movie times, 2
for ticket prices, or 3 for upcoming movie release dates. When you press 2, the voice
response system tells you the prices of tickets for matinees, children’s tickets, adult
tickets, and senior tickets. The voice response system specifies what type of request
you can make (you can press 1, 2, or 3), and tells you what information you should
expect back in return. Just like an API, the voice response system sends information to
and receives information from the user, and also defines the type of information that can
be sent. Back-end developers create or implement APIs to help move data between the
user and the data or services on the server.

Payments and personally identifiable information (PII)

It is simple to make payments on a website or fill out a medical history form before an
appointment, but many people are still cautious about submitting their credit card
numbers and personally identifiable information to a website. Back-end developers are
responsible for database security and server-side encryption to ensure that their
websites are compliant with PII and payment card industry (PCI) security standards.

Common languages for back-end development

Back-end web developers use various programming languages to write code for the
applications that run on servers and code running queries against databases. They
might choose a programming language based on what applications or services they’re
working with. Or they might choose one because it’s the one they already know! The
programming language they use depends on what’s most appropriate for the project
and for them.

Explore these common languages that back-end developers use.

JavaScript
JavaScript is a popular back-end programming language that enables developers to
write server-side scripts. They can create dynamic web pages and web applications,
collect data from forms, and perform database operations.

Python

Python is a highly versatile programming language that is often used in back-end

development. Back-end developers use Python to build interactive websites. They use it
to communicate with databases and process data, and to send data to and from
servers.

When you log in to a social media site or your bank, you are generally asked to enter
your username or email and password. Developers can use Python to build the
functionality that enables a website to check if the username and password you provide
are correct.
Java is widely used for developing web applications and web servers. Web developers
can use Java to build web applications that are data intensive and require strong
security. They can also use it to create applications that stream media and to build
recommendation engines like Netflix or Spotify. Java also enables developers to build
applications that use artificial intelligence (AI).

MODULE 6: NETWORK OF NETWORKS

The internet versus the World Wide Web

Think about the city that you live in. The city is full of homes, government buildings,
businesses, parks, libraries, and other recreational areas for people to meet and
socialize. Connecting each of these places are streets, highways, and trails. You might
use a mode of transportation like a car, bus, train, or bicycle to get from one place to
another.

You can think about the World Wide Web as the places in your city, and the internet as
the streets that get you from place to place.

 The World Wide Web is comprised of all the websites that you use to conduct
business, socialize, and find information.
 The internet is a network of computers and servers that provide the
infrastructure for you to access the web.

A brief history of the Internet

The 1960s
 Computer scientists imagined the concept of packet switching. Packet switching
is a method of separating data and sending it over a network. This concept forms
the backbone of the internet and is relevant today.
  The Advanced Research Projects Agency (ARPA) developed a plan to create a
communication network that could connect computers to share information and
research. They called this network ARPANET.
The 1970s
 Robert Kahn and Vinton Cerf developed standards for how to transmit data
between networks. They called these standards the Transmission Control
Protocol and the Internet Protocol (also known as TCP/IP).
 Distributed computer networks were developed across government agencies
and academic institutions, such as NASA and the US Department of Energy.
The 1980s
 ARPANET began using TCP/IP as the standard for data transmission. This made
a way for computer scientists to begin creating a network of networks.
 Tim Berners-Lee proposed the creation of the World Wide Web in a document
where he defined web, hypertext document, and browsers.
The 1990s
 Tim Berners-Lee launched the first web browser, server, and website –
[Link].
 The World Wide Web was released and the first web server was posted online.
 CERN makes the World Wide Web source code freely available. Only 1% of
internet traffic is on the WWW, all other traffic is on the private networks.
 The World Wide Web increases in popularity and has 10 million users, almost
twice the entire population of modern-day Costa Rica and New Zealand and
10,000 servers.

Present day

The World Wide Web and the internet are still growing and evolving. Smart devices, the
Internet of Things (IoT), and the robotics all us the internet and are pushing computer
scientists to find even more ways that the internet can enhance lives.

As you can see, the foundational work done to create the internet paved the way for the
World Wide Web to exist! While you might think of the World Wide Web as the internet,
in fact it is just one small piece of how the internet works.

How’s does the internet work?

Enter the Station

To access a website, your computer is connected to the internet using

a modem and/or router. Much like a train station connects you to other cities, this
connection enables you to communicate with other networks around the world.
 A modem connects you to the internet. It is a piece of hardware that receives
signals from your internet service provider (ISP) and translates these signals into
a form that your computer understands.
 A router manages the information sent over the internet. It ensures the delivery
of the right information to the intended device. A router takes the internet
 connection from your modem and breaks it up to provide access to the different
devices connected to the network.

Get a ticket

If you are at the ticket counter of a train station, you can request and purchase a ticket
to your destination from the ticketing agent. The ticketing agent would look up a
timetable to issue you a ticket for your destination.
When you type a URL in your browser, you are requesting information from another
specific destination. Your computer will push your request to your internet service
provider (ISP), who will use a domain name server (DNS) to translate the URL into a
numerical internet protocol (IP) address. The DNS service enables users to use
friendly names in the web address of the websites they’re trying to reach. Without DNS,
instead of using a web address like [Link] in a new tab), users
would have to remember and type in an IP address like, [Link] DNS
translates the user-friendly web address to the IP address so users don’t have to worry
about the IP address.
 A browser is the interface you use to request information, like the ticket counter.
 An ISP provides access to the internet connecting you with many other networks,
using many servers to transfer your data. Like how a postal service sorts mail
addressed to various locations and then delivers your mail to your address, an
ISP uses your IP address to deliver the right data to your router. Your ISP uses
standard internet protocols to manage your personal connection and ensure that
data reaches the proper location.
 DNS manages the mapping of text URLs and numerical IP addresses, like how a
timetable maps the times and destinations of individual trains and train stations.
 An IP address is the unique address for a specific location on the web. IP
addresses are formatted [Link], where each set of nnn is a number
between 1 and 255-256, per 8-bit field, totaling 32 bits. IP addresses are like your
train ticket that identify the destination of your trip.

Load your bags and settle in

After you receive your ticket, you would load your bags on the train, board, and settle in
for the journey. In a comparable way, your browser will break your request into smaller
manageable pieces using the transmission control protocol (TCP). TCP is an internet
standard that defines how computers should break up data and send messages to one
another. TCP and IP are the two basic standards that define the internet.

Enjoy the Journey

Once your message is in the correct format and knows where it is going, it takes the
quickest route through the network of networks to reach its destination.

Web development and cloud computing

In the early days of the internet, individual, high-powered computers did all the work
needed to support web pages and store files. These computers were the first web
servers. An individual server might have a few websites running on it. The disk drive on
that computer stored all the files needed for that site. In the early days, it was common
for small businesses to have their company’s websites running on a server under
someone’s desk. Imagine how fragile that was!

What is the cloud?

As internet technology evolved, hundreds and then thousands of servers networked

together to share the tasks, or workloads, involved in delivering hundreds of websites
and services. These became known as server farms. Further evolution enabled the
separation of the actual hardware functions.

How does the cloud help web developers?

Many websites are hosted in the cloud and use cloud services.
Explore ways web developers can use the cloud to build scalable, robust websites.

Host websites

Web developers can use the major cloud providers like IBM, Amazon, and Google to
host websites. By hosting a site in the cloud, web developers can take advantage of a
worldwide network of computers that can make their sites fast and available to people
around the world.

Many cloud providers also offer services such as security certificates, database storage,
domain name hosting, and artificial intelligence services that web developers can use
on their own sites.

Distribute workloads

Imagine you’re on your favorite banking website. You want to add another account from
a different provider so you can keep track of your spending in one place. As you add the
account, the website fetches account data from another provider, such as your credit
card company, and the data appears in your banking application. The service that
fetches the data might not be on the app installed on your phone. Instead, the website
calls out to software on the cloud which has “the conversation” with the credit card
company and returns the data securely to your phone.

By distributing software workloads in this way, web developers can keep websites
smaller, reducing download and load times. It also enables developers to more easily
update key functionality. If the software that retrieves data is on servers in the cloud,
developers can update that software and the apps on users’ phones can use it
immediately—even if the application that uses it wasn’t updated. Web developers refer
to a website calling software in the cloud as making an API call.

Store and distribute data

Most websites use data and web developers need databases to scale to meet website
needs. There are many database solutions on the market, both open source and
proprietary. Cloud providers offer a wide range of options to meet the needs of websites
that range from small hobbyist sites to the largest enterprise sites.

Cloud providers also support binary large object (blob) storage. A blob is a large file
storing binary data, such as an image, video, or any file that contains more than plain
text. Cloud providers offer optimized solutions to store and move blobs between servers
and users. Web developers use blob storage to host catalog images, videos,
documents, and application files that they deliver from their websites.

Scale based on need

In the days before the cloud, if you needed more power on your computer, you either
had to upgrade, buy another computer, or borrow one. This was really inconvenient if
you only temporarily needed the extra power. And many people overbought—spending
a lot of extra money on power they never used or needed.

The cloud has helped address this scale problem. Many services are available in the
cloud now, where businesses and individuals can pay for only the capacity and power
they use. If a web developer needs more storage, they pay for it when they need it and
can scale back when they no longer need it.

If a media company is having a big event—like a major sporting competition—and

expects streaming demand to be high on a given day, they can use cloud services that
automatically scale up when demand is high and scale down when it gets back to
normal. This makes for a better user experience because the company doesn’t
experience broadcast outages and the streaming capacity automatically adjusts to
demand without the company having to manage it.

Because of scaling, as demand grows, the performance and availability of the site and
the services the site provides remain consistent.