Unit 1 Tutorials: Introduction to Web

Development
INSIDE UNIT 1

Components of Web Development

Web Development
Program Languages and Computers

Web Engineering Disciplines and Methodologies

Web Applications vs. Traditional Applications

Modern Web Application Architecture

Tools of the Trade

Programming for the Web

Writing and Running Code

Web Development
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore the basic building blocks of web development by discussing:
1. GOOGLE AND THE HISTORY OF WEB DEVELOPMENT
2. SOFTWARE ENGINEERING
3. WEB DEVELOPMENT
4. HOW THE WEB WORKS

1. GOOGLE AND THE HISTORY OF WEB

DEVELOPMENT

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 1
 Image of a graph of the links between four Wikipedia articles: "Inception", "The Matrix", "Blade Runner", and
"Reality"

In 1996, Stanford University PhD students, Larry Page and Sergey Brin, started working on a research project
nicknamed “BackRub”. Their original motivation for the project was to explore a relatively new technology —
hyperlinks. They wanted to visualize links between different websites on the Internet as a huge,
interconnected graph.

 DID YOU KNOW

Hyperlinks (or simply, links) are those pieces of text on a website that connect you from one page to
another. Traditionally, links are displayed in blue, underlined text to help differentiate them from regular
text.
Soon, Page and Brin realized that their humble research project could be something more. In fact, they
realized that the programs they’d developed for research purposes could become an entirely new product —
a search engine for the Internet. They called it Google Search.

In the late 1990s, the Internet was so small that Page and Brin were able to operate Google off a single
computer housed in a container they built out of Legos.

Computer Housed in Legos

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 2
 A screenshot of what www.google.com looked like in 2000

Google’s homepage had similarly humble beginnings. This is what google.com looked like in 2000:

A screenshot of Google's search results page from 2000

Compare early Google to modern Google! A single computer is no longer sufficient for processing the amount
of data that Google handles on a daily basis. Nowadays, Google needs entire data centers filled with
computers to keep their website running.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 3
 Google Data Center

 DID YOU KNOW

Buildings that are dedicated to housing computers are called data centers.
Google’s homepage is more complex now, too. For example, Google is able to suggest search terms as you
type — a feature that wasn’t even possible in the 2000s. Search results aren’t just text; they now include
images, videos, and more.

Google Homepage 2020

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 4
 Google search results including pictures 2020

Creating and running a website is no longer a task for just two friends, a computer, and some Legos bricks. As
the Internet matured, so did its users and, as a result, companies that operate on the Internet grew as well.
Although tech is more accessible now than ever before, in many ways, the industry itself has become less
accessible. There are more rules, more best practices to be aware of, and a longer history of insider
knowledge that can make industry seem impenetrable.

Our motivation for writing this course is to break down those barriers by introducing you to the world of web
development and web engineering. By the end of this course, we hope that you’ll be able to picture yourself
in the tech industry and even consider it a viable career path.

This first unit will introduce you to the prerequisite knowledge you’ll need to enjoy the rest of this course. First,
we’ll talk about software development in general before going into topics exclusive to web development.

 TERM TO KNOW

Hyperlink
Those pieces of text on a website that connect you from one page to another.

2. SOFTWARE ENGINEERING
Web development is a subset of software development— the work involved in creating programs that
computers can execute. These programs can be as simple as the code used to drive a stopwatch and as
complex as the applications on your computer. The types of tasks performed in software development are
vast and encompasses contributions from diverse areas, one of which is software engineering.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 5
 Software engineers write code

Software engineering is a unique discipline that combines features typically exclusive to mathematic,
scientific, and creative fields. Like mathematicians, they use specialized languages to denote ideas. Like
scientists, they must understand the rules that govern how code runs on computers. Like designers and
engineers, they create solutions by assembling individual components into systems and evaluate tradeoffs
among alternatives.

The most important skill for a software engineer is problem solving — the ability to formulate problems, devise
creative solutions for them, and communicate those solutions effectively.

The types of problems that software engineers encounter can vary, but the way they approach building
solutions to those problems is similar:

Develop a general solution

Communicate the solution to a computer, in a way that the computer understands
Use the computer to automate the execution of that solution

Don’t worry if the steps above seem abstract right now. It’s more important to keep these ideas in the back of
your mind as you progress through the course. Although this course focuses on web development and
engineering, all software engineers exercise the same skills and solve the same types of problems.
 TERM TO KNOW

Software Development
The work involved in creating programs that computers can execute. The tasks involved can include
graphic design, copyediting, and software engineering.

Software Engineering
Software engineering is a discipline that combines features from mathematic, scientific, and creative
fields. The work that software engineers do isn’t just writing code. They also use specialized
languages (code) to denote ideas like mathematicians, understand the rules of the system they’re
working with like scientists, and create solutions and evaluate tradeoffs like designers.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 6
3. WEB DEVELOPMENT
Web development is a type of software development; it’s the work involved in creating websites. The tasks
involved in creating a website can cover many disciplines like graphic design, copyediting, and web
engineering. Web engineers are responsible for writing code and programming websites, but, colloquially,
many use the term web engineer and web developer interchangeably.

Like software engineers, web engineers write code to solve problems. However, there are certain qualities
and requirements of web engineering that make it distinct from traditional software engineering. This is due to
the rapidly evolving nature of the World Wide Web (or the web) and the unique constraints it imposes on
websites.

The World Wide Web (WWW), or the web, is an information system where websites and other resources are
identified by Uniform Resource Locators (URLs, like https://google.com) and are accessible over the Internet.
Early websites were simple, consisting of static, or unchanging, web pages. Modern websites are far more
complex. Instead of static pages, they have dynamic web pages that can change and react to user input.
Many of them — Facebook, Twitter, and Amazon, to name a few — are as complex and fully-featured as
desktop or mobile applications. The complex behavior of these websites places unique demands on their
usability, performance, security, and ability to grow and evolve.

The qualities and requirements that make web engineering distinct from software engineering are all related
to the web. It would be hard to ask someone to become interested in web engineering and appreciate its
complexities without explaining how the web works first.

 TERM TO KNOW

Web Development
Web development is software development on the web. In other words, it’s the work involved in
creating websites.

Web Engineers
Web engineers are software engineers that are specifically responsible for writing code and
programming websites.

World Wide Web (WWW)

An information system where websites and other resources are identified by URLs. Colloquially, the
World Wide Web is known as, simply, the “web”.

Uniform Resource Locator (URL)

Websites on the Internet are identified by their URL. They’re unique addresses that you can use to
access a website. For example, by typing https://google.com into your browser, you’re able to go to
Google’s homepage.

4. HOW THE WEB WORKS

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 7
 A diagram of a computer network

The Internet is the technological infrastructure that makes it possible for users to access information on the
web. If the web is like snail mail — a system where we send documents and packages to each other’s mailing
addresses or P.O. boxes — the Internet is analogous to mail carriers like the United States Postal Service. In
other words, it is the backbone of the web. At its simplest, the Internet is a very large computer network — a
group of interconnected computers that can communicate all together.

All computers on the Internet use a particular style of communication calledHyperText Transfer Protocol
(HTTP). HTTP defines a set of standards and best practices that specifies the communication protocols that
computers on the Internet should adhere to.

Communication protocols are lists of instructions and rules that define how information ought to be
transferred from one place to another. Communication protocols aren’t exclusive to the tech industry. If you’ve
ever sent a letter through the mail, you probably followed a set of rules dictated by your government’s postal
system. For instance, you had to put your letter in an envelope and write the recipient’s address in the center
of the envelope. In the context of the Internet, HTTP specifies how data should be transported from one
computer to another. This is how different computers, created by different manufacturers and running
different operating systems, are able to understand one another on the Internet. HTTP is like a common
language — as long as everyone follows the HTTP standards, they’ll all be able to talk to one another.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 8
 Diagram of how clients and servers talk to each other.

The protocol specified by HTTP is pretty simple. With HTTP, computers can either send requests or reply with
responses. Computers that send requests are called clients and the ones that respond are called servers. To
reword these statements in more technical terms, clients send HTTP requests to servers. Servers can listen to
requests and send HTTP responses back to their clients. Clients make requests for information (“Show me the
webpage at sophia.org”) or for the server to perform an action (“Please enroll me in this course”). Servers
typically respond with the information that the client requested (“Here’s the code for the webpage at
sophia.org”) or a status message (“You’ve been successfully enrolled in this course”) or both.

The term “server” might remind you of dining at a restaurant. When you go out and eat at a sit-down
restaurant, you’re usually given a menu. Then, a waiter will come to your table and ask for your order. They
pass your order along to the kitchen and when your food is ready, they serve it to you at your table. In this
analogy, you are the client and the waiter is the server. When you order food from the waiter, you’re making a
request. The waiter accepts your request and, sometime later, responds with your food.

The scenario above is not a perfect analogy though. At restaurants, the client is (usually) always right. Most
restaurants want to provide good customer service to their clients by making sure their needs are met and
they have a positive experience. As a result, waiters rarely decline to serve a customer. This is not how clients
and servers work. On the Internet, the client is at the whim of the server. In other words, clients can’t tell the
server what to do; they can only ask. Clients can request data from servers all they want but servers can
always reject them. After all, it’s “HTTP requests”, not “HTTP demands”.

This is how things like user authentication work. Let’s say you want to login to your email account to check
your messages. You enter your username and password into a form and click “Sign In”. When you do that,
your web browser will send a request to your email server and ask, “Please authenticate this user. Their
username is XXXXX and their password is XXXXX”. The server will check the username and password to
make sure they’re correct. If the given password doesn’t match the one on file, the server will reject the
request and, as a result, your login attempt will fail.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 9
 ⭐ BIG IDEA

Clients send HTTP requests to servers. Servers can listen for HTTP requests and issue HTTP responses.
A basic “conversation” between a client and server might look like this:
Client: I would like to view the resource at Sophia.org

Server: Ok, let me see if that resource exists… I found it! Here is the resource at Sophia.org; it’s a
webpage, by the way.

(Client receives the webpage and displays it to the user)

Now you know how the web works. The web works because it’s powered by the Internet, a technology that
can connect many computers in a large network. Computers are able to talk to one another because they all
adhere to standard communication protocols. The most widely used communication protocol on the Internet
is HTTP. The nature of the Internet and HTTP are the technologies that make web engineering unique
compared to other forms of software engineering. Web engineers get to tackle the unique challenge of
orchestrating the transport of data securely and precisely using a system that, at the most basic level, is pretty
simple. The Internet we’re using today is, by and large, the same Internet we were using 20 years ago! Yet,
we’ve made a huge amount of technological progress on the Internet since then, thanks to web engineers
who were able to build complex software on top of a simple system.

 TERM TO KNOW

Internet
The technological backbone of the World Wide Web.

Computer Network
A group of interconnected computers that can communicate with one another.

HyperText Transfer Protocol (HTTP)

The name of a communication protocol that’s often used to communicate with computers on the web.

Communication protocol
A set of instructions and rules that define how information ought to be transferred from one place to
another.

Clients and HTTP requests

Clients can send HTTP requests to servers. Servers don’t always respond to every request, though.
Servers are able to reject requests as well.

Servers and HTTP responses

Servers can take HTTP requests clients and reply by sending HTTP responses back to their clients.

 TERMS TO KNOW

Clients and HTTP requests

Clients can send HTTP requests to servers. Servers don’t always respond to every request, though.
Servers are able to reject requests as well.

Communication protocol
A set of instructions and rules that define how information ought to be transferred from one place to
another.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 10
 Computer network
A group of interconnected computers that can communicate with one another.

HyperText Transfer Protocol (HTTP)

The name of a communication protocol that’s often used to communicate with computers on the web.

Hyperlink
Those pieces of text on a website that connect you from one page to another.

Internet
The technological backbone of the World Wide Web.

Servers and HTTP responses

Servers can take HTTP requests clients and reply by sending HTTP responses back to their clients.

Software Development
The work involved in creating programs that computers can execute. The tasks involved can include
graphic design, copyediting, and software engineering.

Software Engineering
Software engineering is a discipline that combines features from mathematic, scientific, and creative
fields. The work that software engineers do isn’t just writing code. They also use specialized languages
(code) to denote ideas like mathematicians, understand the rules of the system they’re working with like
scientists, and create solutions and evaluate tradeoffs like designers.

Uniform Resource Locator (URL)

Websites on the Internet are identified by their URL. They’re unique addresses that you can use to
access a website. For example, by typing https://google.com into your browser, you’re able to go to
Google’s homepage.

Web Development
Web development is software development on the web. In other words, it’s the work involved in creating
websites.

Web Engineers
Web engineers are software engineers that are specifically responsible for writing code and
programming websites.

World Wide Web (WWW)

An information system where websites and other resources are identified by URLs. Colloquially, the
World Wide Web is known as, simply, the “web”.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 11
Program Languages and Computers
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore the basic concepts of programming languages and computers by discussing:
1. COMPUTERS
2. PROGRAMMING LANGUAGES
3. ALGORITHMS AND AUTOMATION
4. DAY IN THE LIFE OF A DEVELOPER

1. COMPUTERS

A graphical representation of the simplest computer. It consists of a long piece of paper tape with a 1-by-1 grid
printed on it. Each cell stores the number 1 or 0. The computer is also able to keep track of its current location within
the grid.

A computer doesn’t need to have a wide screen or keyboard or even a latest processor to be considered a
computer. In fact, most primitive machine that can still be considered a computer doesn't even need
electricity! You can build one right now — all you need is a pencil and a long roll of paper tape with a grid
printed on it.

In software engineering, a computer is anything that can do different things based on changing conditions (“if
the sky is gray, grab an umbrella before you go outside”) and the ability to store data (“Ada’s phone number is
555-1235”).

⭐ BIG IDEA

The idea that a machine must possess these qualities to be considered a computer is known as Turing
completeness.
For example, Conway’s Game of Life, a cellular automaton, is a computer.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 12
 A screenshot of Conway's Game of Life

Thankfully the computers that software engineers work with are slightly more complex. Still, eventhose
computers aren’t very smart. If you went to the grocery store with a friend and told them to “grab a box of
pasta," they’d likely understand exactly what you want them to do. Computers don’t understand English (at
least, not the way humans are able to understand English) so if you gave the same command to a computer, it
won’t have any idea what you’re talking about. That’s why programming languages were invented.
Developers use these languages to express their ideas in a format that computers can understand and
execute.

 TERM TO KNOW

Computer
A computer is anything that can perform different functions based on changing conditions and has the
ability to store data.

Programming Language
A formal language designed to tell computers what to do.

2. PROGRAMMING LANGUAGES
Programming languages are formal languages — languages designed by people for specific, often technical,
applications. For example, mathematicians use infix notation to express mathematical equations (like 2 + 2).
Although there are other ways to notate math equations, infix notation is popular because it helps us visualize
the relationship between numbers (2) and operators (+). In contrast, natural languages, like English, are
languages that weren’t designed by people. Instead, they evolved naturally over time.

Both types of languages have rules about valid syntax. These rules define legaltokens and dictate how those
tokens should be arranged. Tokens are the basic building blocks of a language. The tokens of the English
language are words like red, are, and roses. The tokens used in math equations are numbers (2), symbols (+),
and sometimes letters (n).

Tokens are meaningless until they’re arranged in a meaningful way. For example, red are roses is a
nonsensical phrase and 2 2+=4 is not a valid equation. Although both phrases are made of valid tokens, the
tokens aren’t arranged in a structure that makes sense. Once we rearrange the tokens roses are red and
2+2=4, you’re finally able to figure out the structure of each phrase.

Although natural languages and formal languages are both used to express ideas, there are differences

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 13
between the two that often make it hard for natural language speakers to adjust to formal languages.

The rules of natural languages are relatively loose compared to formal languages. Humans are able to handle
ambiguous messages using contextual clues, body language, and other information. If someone writes the
message, “I’ll see you at jome” we have no problem assuming that the message is supposed to read, “I’ll see
you at home." We even communicate with words that aren’t to be taken literally whenever we use sarcasm,
irony, idioms, and metaphors.

Formal languages like programming languages are extremely strict. Unlike humans, computers can’t handle
ambiguity and only understand literal definitions. As a result, you can’t go shopping with a computer and tell it
to “grab a box of pasta." Instead, you’d have to give it very specific instructions that would look something like
this:

Go to aisle #3.
Go to the shelf where they keep boxes of spaghetti.
Take the first box in row 2.
Bring the box to me.

The fact that a computer needs such explicit, unambiguous commands to execute a comparatively simple task
might make you wonder why we rely on computers to do anything at all!
 TERM TO KNOW

Formal Language
A language designed by people for specific, often technical, applications.

Natural Language
A language that evolved naturally over time.

Token
The basic building block of a language.

3. ALGORITHMS AND AUTOMATION

Computers can’t make intelligent decisions like humans do but they can perform thousands of calculations in
the blink of an eye. Also, computers don’t need food or sleep so as long as there’s electricity, they can
continue chugging along almost indefinitely. That’s why we use computers to automate laborious operations
that would be exhausting (and boring) for a human to complete.

The solutions that engineers come up with are referred to asalgorithms. An algorithm is a set of step-by-step
instructions that describe how to arrive at the solution. Engineers must turn algorithms into programs by
translating their algorithm into code using a programming language. The programs are given to computers,
who execute them exactly as they’re written.

Later in the course, we’ll talk about algorithms in more detail and explain how some famous algorithms work.
For now, it’s more important to remember that, although computers are capable of doing very complex tasks,
they’re actually simple machines. Without engineers to tell them what to do and how to do it, computers
would be completely useless.

 TERM TO KNOW

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 14
 Algorithm
A set of step-by-step instructions that describe how to solve a problem.

Program
Programs are algorithms that computers understand. Engineers write programs using programming
languages.

4. DAY IN THE LIFE OF A DEVELOPER

In theory, all the interesting things that web engineers do sounds great! But how does this look in practice?
What does a web engineer’s average day in the workplace look like?

Imagine you are a web engineer at a large company in Silicon Valley. You’re a member of the team that works
on one of the company’s many products — a mobile application that’s a personal finance tool. Your
teammates are project managers, graphic designers, user experience researchers, and a handful of additional
engineers like you.

You start your day by attending a stand-up meeting or scrum meeting — a daily meeting with your teammates.
During this meeting, you listen as each member of the team talks about what they accomplished the day
before and what they’re planning on doing today. Your team also uses this meeting to collaborate with one
another, coordinate task assignments, and update estimations on when a task should be completed. When
one of your teammates describes getting stuck on a problem you’re familiar with, you let her know that you’ve
encountered a similar problem. She schedules a meeting with you to do this later in the day.

After the stand-up meeting, you check your calendar. The next thing you have to do is get on a video
conference call with a customer to watch them use the new feature you’ve been working on and get
feedback. The customer is mostly happy with how the feature works, but it doesn’t work quite right with her
overall workflow. You agree — her feedback makes sense. You tell the customer to stay tuned for updates
and sign off. Now, the only thing bothering you is how you can pivot based on her feedback without starting
over from scratch.

Luckily, you’re a web engineer so you’re used to having requirements that can change at the last minute. As
such, you designed your code to be modular and flexible. All you need to do to improve your feature is move
a couple modules around! You spend some time making your code presentable and readable before
publishing it online for a code review from your team.

While you’re waiting for other engineers to review your code, you head over to the meeting you had arranged
with your coworker during the stand-up meeting. Both of you decide to tackle this problem by pair
programming. It is a collaborative technique in software engineering when two engineers program on one
computer. One person types while the other person describes what the code should be doing at a high level.
Then, they switch roles. The pair programming session was fruitful and you solved a major problem together.

Meanwhile, your fellow engineers have reviewed your code and some of them have posted feedback. Some
of these comments are clarification questions. Other comments point out areas where you can make
improvements to your code. You answer the clarification questions and agree to make the improvements.

There are only a couple hours left before the end of the workday. This is the time you’ve set aside as
whitespace time. Your company requires that engineers allocate 20% of their time to whitespace time — time
that can be spent learning a new technology or working on a personal projects. You use that time to volunteer
and mentor a woman who attends a software engineering bootcamp.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 15
At the end of the day, you head home to get some rest before doing it all again the next day.

 TERM TO KNOW

Stand-up Meeting or Scrum Meeting

A daily meeting where colleagues update their teammates on the status of their tasks and coordinate
the rest of the day.

Pair Programming
A collaborative technique where two engineers write code on one computer. Usually, one engineer
types while the other engineer describes what the code should be doing at a high level.

Whitespace Time
Whitespace time is a common benefit that tech companies will provide their employees. It’s the name
for an amount of time that an engineer should devote to personal projects or volunteer work.

 TERMS TO KNOW

Algorithm
A set of step-by-step instructions that describe how to solve a problem.

Computer
A computer is anything that can perform different functions based on changing conditions and has the
ability to store data

Formal Language
A language designed by people for specific, often technical, applications.

Natural Language
A language that evolved naturally over time.

Pair Programming
A collaborative technique where two engineers write code on one computer. Usually, one engineer
types while the other engineer describes what the code should be doing at a high level.

Program
Programs are algorithms that computers understand. Engineers write programs using programming
languages.

Programming Language
A formal language designed to tell computers what to do.

Stand-up Meeting or Scrum Meeting

A daily meeting where colleagues update their teammates on the status of their tasks and coordinate
the rest of the day.

Token
The basic building block of a language.

Whitespace Time
Whitespace time is a common benefit that tech companies will provide their employees. It’s the name
for an amount of time that an engineer should devote to personal projects or volunteer work.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 16
© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 17
Web Applications vs. Traditional Applications
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore the history of web technologies and the current design of web applications
by discussing:
1. HISTORY OF WEB TECHNOLOGIES
2. CLOSING THE GAP BETWEEN TRADITIONAL APPLICATIONS AND WEB APPLICATIONS
3. ENGINEERING THE MODERN WEB

1. HISTORY OF WEB TECHNOLOGIES

Remember the comparison between Google’s homepage in 2000 and their modern homepage from the
beginning of Unit 1? The evolution of Google’s homepage exemplifies how drastically the technological
landscape of the web has changed in the past couple decades. The history of web technologies — from the
rapid growth of the Internet to the technological advancements that followed — has shaped the way websites
evolved from simple, early web pages to complex, modern web applications.

As websites grew more complex, new methodologies and best practices emerged to help engineers handle
that complexity. So, in order to understand web engineering today, we need to start at its humble beginnings.

Information on this topic is sparse and contradictory so there may be a few, minor inaccuracies here and there.
It is interesting to note how the documented history of the web, being so full of inaccuracies and
anachronisms, mirrors the way the web and the technologies that came out of it grew themselves. A you
continue reading, you’ll learn how the web — which started as a surprisingly primitive technology — quickly
grew into the complex amalgamation of technologies that make up the web we know (and likely take for
granted) today.

Sir Tim Berners-Lee invented the World Wide Web in 1989 while he was a researcher at the European
Organization for Nuclear Research, better known as CERN. There, he published the first website — a humble
collection of information on the World Wide Web project itself.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 18
 A screenshot of the first website.A screenshot of the first website by Sir Tim Berners-Lee.

 DID YOU KNOW

Unfortunately, the original 1990 website wasn’t preserved but you can still visit the 1992 copy of the
website at its original URL: http://info.cern.ch/hypertext/WWW/TheProject.html.
In the early 1990s, the Internet made it easier for researchers and academics to share documents, data, and
software across research institutions and university campuses. For example, from a computer at Cambridge
University, a user could view and download files stored in a computer at Stanford University. Due to this initial
use-case (and thanks to low bandwidth and slow connection speeds) the most websites looked a lot like the
world’s first website — they were plain and boring, consisting only of text and hyperlinks. Users accessed
websites using a handful of web browsers that were so primitive, they weren’t even capable of displaying text
and images on the same screen. That is, until Marc Andreessen, a college student working part-time at the
National Center for Supercomputing Applications (NCSA) at University of Illinois at Urbana-Champaign got
bored. In late 1992, Andreessen started working on Mosaic, a web browser that would trigger an Internet
revolution and change the world forever.

Mosaic 1.0 running on a Mac OS 7 computer.

When Mosaic was published in September 1993, it made the web more accessible to non-technical users than
ever before. Before Mosaic, if researchers wanted to distribute a paper with an image like a diagram via the

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 19
Internet, they couldn’t embed the diagram alongside the document’s text. The only thing they could do was
add a link to the diagram. Then, if readers wanted to view the diagram, they’d have to click on the link,
download the image, and figure out how to open it. This might not sound so bad, but computers weren’t
nearly as user-friendly back then as they are now. Mosaic’s had the ability to display images alongside text, so
users didn’t have to go through the song and dance of downloading images and opening them by hand. This
also gave web designers more freedom to customize the look and feel of their websites.

A screenshot of Yahoo.com from 1994. Notice the images (the yellow symbols in the navigation buttons at the top
and the yellow graphics with the word “NEW” in them) and how they appear alongside text.

Just over a year after leading the Mosaic development team at NCSA, Marc Andreessen left, taking some of
his NCSA colleagues with him, to create a startup named Netscape Communications Corporation (originally,
Mosaic Communications Corporation). Andreessen and his colleagues brought their initial motivation for
creating Mosaic — to make the web more appealing for non-technical people — over to Netscape. In 1994,
Netscape officially released Netscape Navigator. It became the most popular web browser of the 1990s.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 20
 A screenshot of Mosaic Netscape 0.9 on Windows XP

At this point in web history, websites were closer to books than computer applications. The only difference
between books and the first websites was that, on a website you could navigate from one page to the next by
clicking a hyperlink instead of turning a physical page. Otherwise, web pages were static; once a page was
finished loading, that page would never change. In contrast, computer applications were dynamic and
interactive. For example, imagine any computer application that allows you to write and edit text. All text
editors allow users to add text by typing on their keyboards. As they type, letters appear on the screen,
changing the contents of the screen. It would be impossible to recreate this behavior using early web
technologies because web pages couldn’t change. If engineers wanted to close the gap between static web
pages and traditional computer applications, they’d need a language that would allow them to manipulate the
contents of a page and program dynamic behavior and the engineers at Netscape would be the ones to
create it.

2. CLOSING THE GAP BETWEEN TRADITIONAL

APPLICATIONS AND WEB APPLICATIONS
In 1995, Netscape set their sights on adding such a programming language to Navigator. Software engineer
Brendan Eich, while working for Netscape, created JavaScript in May. He’d famously draft a complete
prototype of the language in 10 days. Later that year, Netscape included JavaScript with the newest version of
Navigator. In 1996, Microsoft released their own version of JavaScript with the latest version of their browser,
Internet Explorer. However, JavaScript would not gain widespread usage and become an integral part of the

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 21
web engineering toolkit until 2000.

 DID YOU KNOW

JavaScript is often confused with Java, a programming language by Sun Microsystems (now Oracle). They
are completely different languages. Netscape chose to name their new programming language
“JavaScript” for marketing purposes — they thought if their language sounded like it was associated with
Java, it would become more popular.
By the mid-1990s, the web was no longer a niche technology for academics and tech-savvy early-adopters.
People began to see it not just as a source of entertainment but also as a new, lucrative space for commerce.
With more and more websites popping up online, web developers wanted to create web pages that looked
unique to make their websites visually distinct from others.

Visually distinctive web pages came at a cost, though. As web pages grew in complexity, the time it took for a
page to load its contents increased, and websites became more difficult to navigate. Earlier, we mentioned
that before the advent of JavaScript, web pages were static — once the browser finishes loading a static web
page, it never changed. When you navigate from one static web page to another, your browser will treat each
page as if it’s unrelated to the one before it, even if both pages are from the same website. This would happen
even if the web pages shared common visual elements like navigation menus or sidebars.

Even though JavaScript had been incorporated with the latest versions of major web browsers by 1996, it was
still a new technology, so developers were only beginning to understand how to improve user experience
through JavaScript. The problem was that every time users navigated to another web page, their browsers
would have to retrieve the entire contents of that new page in full. This would happen even if the web pages
shared common visual elements like navigations menus or sidebars. For example, the figure below is a side-
by-side comparison between two different pages on an archived version of www.aol.com from 1996. Notice
that the title and content of each page is different but the red sidebars are exactly the same.

Side-by-side comparison of two AOL webpages

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 22
Even though the sidebars are exactly alike, web browsers would still load each page as if it were completely
new. Every time browsers pulled in “new” pages of content, all existing content disappeared, and users would
have to wait for the next page’s content to finish loading. This would happen for every single user action,
even if that action changed only a small part of the page. Even worse, internet speeds were painfully slow
which compounded the negative impact of this inefficient process on user experience.

Navigating from "What's New" to "Only on AOL"

A more efficient loading strategy was needed — if engineers could designate when and how often parts of a
page should load, they’d be able to program the browser to load common elements like navigation menus
once. That way, the browser would only have to retrieve and reload the content that had changed between
one page and the next. Today, this technique is known as AJAX, which stands for Asynchronous JavaScript
and XML. On paper, AJAX seems like an obvious solution. In fact, JavaScript already supported the ability to
program loading different parts of a web page at different times by as early as the late 1990s.

Unfortunately, these technologies were fairly obscure and would remain underutilized until the early 2000s.
That’s when large companies like Microsoft and Google used AJAX to build some of the first large scale web
applications. In 2000, Microsoft published Outlook Web Access which allowed users to read and write emails
right from within their web browser. In 2004, Google followed suit with a web-based email application of their
own, Gmail. In 2005, web interface developer Jesse James Garrett published a blog post titled Ajax: A New
Approach to Web Applications. Garrett’s article was the first time the acronym “AJAX” appeared publicly. In it,
he described how the content loading and manipulation technique worked, listing websites using AJAX that
were popular at the time, and outlined how AJAX might be used in the future. His article spread awareness of
AJAX across the wider web engineering community. It was no longer a technique exclusive to engineers at
well-funded tech companies. Finally, professional and amateur web engineers alike had the tools and
knowledge to create websites that didn’t just resemble traditional computer applications but could even
replace them.

The spirit of rapid innovation and experimentation on the web didn’t stop with the development of AJAX; it
continues today. It’s hard to believe that the web started as a small collection of websites owned by research
institutions and the Internet was simply used to exchange documents from one research institution to another.
It might be even harder to believe that, in general, the World Wide Web runs on the same technology today as
it did in 1989. Today, the Internet is still just a computer network used to transfer data from one place to the
next. Its applications are far more diverse though. The web isn’t just a platform for academics and their
research papers any more — it’s now used for social networking, shopping, video gaming, streaming movies,

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 23
and so much more. It’s amazing that a platform is able to support such a huge variety of users and activities.

This is the last section on the history of the web; after this paragraph, we’ll depart the past and talk about the
present state of web engineering and development. Before you go, we’d like to leave you with one last
observation — that the web was never designed to stream movies, support social networking, or become a
place for ecommerce. Tim Berners-Lee’s motivation for inventing the World Wide Web wasn’t to create an all-
in-one platform generic and powerful enough to become the birthplace of completely new industries. He was
just frustrated with the difficult task of finding information stored on different computers and wanted to invent
a system that would make it easier to locate certain resources. The web, as we know it, only exists thanks to a
series of coincidences: Marc Andreessen created Mosaic, the mother of all web browsers, as a lark because
he was bored at work; Netscape invented JavaScript just to compete with Microsoft’s Internet Explorer;
Brendan Eich accidentally made JavaScript flexible enough to withstand and support years’ worth of language
updates and revisions. It’s amazing, and probably a little amusing, that the web even works at all.

 TERM TO KNOW

Traditional applications and Web applications

Here, we use the term traditional application to refer to desktop applications — which run on
operating systems like Windows or MacOS — and mobile applications — which run on Android and
iOS. In contrast, web applications run in web browsers.

JavaScript
The first programming language of the web. Web developers use JavaScript to program dynamic
behavior on a website, which made it possible for developers to create web applications.

Static Web Page

Web pages that loaded and never changed.

Asynchronous JavaScript and XML (AJAX)

AJAX is not a specific technology. Rather, it’s a technique that developers use to decrease loading
times and improve user experience. It is difficult to pinpoint the origin of the term but it was first
publicly used by Jesse James Garrett in his article, Ajax: A New Approach to Web Applications.

3. ENGINEERING THE MODERN WEB

Web engineering has become less distinct from other forms of software engineering over time. Humans aren’t
the only ones going online; it seems like everything is connected to the Internet nowadays. Think of any type
of product — cars, TVs, doorbells, clothing, even light bulbs — and you’ll find a version of that product that’s
capable of using an Internet connection. It’s not difficult to imagine a future where every object we interact
with is networked somehow.

That’s all to say how difficult it can be to pick apart web engineering practices that are exclusive to web
engineers. Due to technology’s increasing reliance on the Internet, the methods and best practices that were
initially exclusive to web engineers can be found in many genres of software engineering and vice versa.
However, there is one technology at the center of the web ecosystem that’s exclusive to web engineering —
the web browser. Even though there are many different web browsers, they’re all expected to comply with the
standards and specifications of the web. The advantage of web applications over traditional applications is
that the relatively uniform behavior of web browsers makes it easy to create cross-platform applications, or
applications that will work on different systems.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 24
For example, let’s say you want to create a cross-platform mobile application — an application that will work
on Android phones and iOS phones. To develop an Android application, you’d have to use language
compatible with Android devices like Kotlin. iOS isn’t compatible with Kotlin though; instead, most iOS apps
are written using Swift. Besides having to translate from one language to another, there are enough
differences between both systems that you’d essentially have to create two mobile applications — one for
Android and another for iOS. It’s much easier to write a cross-platform web application because they’re
designed to run within web browsers. Although there are different types of web browsers, they all have the
same core features and understand the same coding languages. The advantage of web applications is that, in
general, developers only have to build one application instead of building multiple applications to account for
different platforms.

Unfortunately, web browsers aren’t completely uniform. According to Mozilla Developer Network’s 2019
Developer Needs Assessment, the most frustrating part of web development is having to support different
browsers, avoiding or removing a feature that doesn’t work across all browsers, and encountering situations
where the look and feel of a website isn’t consistent across different browsers. A couple paragraphs ago, we
mentioned that all web browsers understand the same programming languages. However, since web
browsers are developed and maintained by different companies, each company is responsible for maintaining
and updating their own browser. As a result, each browser has its own set of quirks and bugs that developers
need to take into account in order to write code that is compatible with and consistent across all browsers.
Luckily, there are many tools that will automate the process of making code compatible with different
browsers. For example, some of these tools allow developers to take advantage of new language features,
even when they’re so new that browsers haven’t implemented them yet, by transforming written code into
code that most browsers will be able to run. Still, these tools aren’t fail-proof 100% of the time; at the end of
the day, web browsers are the products of third-parties. Unless companies like Apple, Microsoft, and Google
agree to implement the same updates and features at the same time, browser compatibility issues will likely
continue to be the bugbear of all web developers.

There are many wildly successful applications on the web now, so it seems that dealing with browser
compatibility issues is a small price to pay for cross-platform capabilities. Several prominent web applications
you might recognize are Google Maps, Gmail, Google Drive, Facebook, Spotify, Slack, Discord, and YouTube.
The next section will take a deeper dive into how applications like the ones we just mentioned are
architected. This will give you an idea of how the once-humble website can become an advanced application
by leveraging the Internet, web browsers, and other technologies.

 TERM TO KNOW

Cross-platform applications
Applications that are compatible with different systems.

 TERMS TO KNOW

Asynchronous JavaScript and XML (AJAX)

AJAX is not a specific technology. Rather, it’s a technique that developers use to decrease loading times
and improve user experience. It is difficult to pinpoint the origin of the term but it was first publicly used
by Jesse James Garrett in his article, Ajax: A New Approach to Web Applications.

Cross-platform applications
Applications that are compatible with different systems.

JavaScript

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 25
 The first programming language of the web. Web developers use JavaScript to program dynamic
behavior on a website, which made it possible for developers to create web applications.

Static Web Page

Web pages that loaded and never changed.

Traditional applications and Web applications

Here, we use the term traditional application to refer to desktop applications — which run on operating
systems like Windows or MacOS — and mobile applications — which run on Android and iOS. In
contrast, web applications run in web browsers.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 26
Modern Web Application Architecture
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore the structure of web applications by discussing:

1. THREE-TIER ARCHITECTURE
2. FRONT END AND BACK END

1. THREE-TIER ARCHITECTURE
In software development, the term architecture is used as a metaphor that’s analogous to the architecture of a
building. If architecture is the process and product of planning, designing, and constructing buildings, software
architecture is the process and product of planning, designing, and constructing a software system. In
architecture, there are structures that are so commonly used that they’re given names like domes, columns,
and arches. There are common patterns and structures in software architecture too; most web applications
are structured based on the three-tier architecture.

The three-tier architecture is a multi-tier architecture or multi-layered architecture. You’ll commonly find these
patterns in computer systems that involve clients and servers like the Internet. In multitiered systems, code is
strategically partitioned into separate tiers so that, whenever developers need to modify an application, they’ll
only have to work with one tier at a time instead of tearing apart and reworking the entire application. The
three tiers of three-tier architecture are:

Presentation tier

The part of the application that is the user interface. It translates user input into computational tasks and
computer-generated results into something visual that users can understand. It’s the most visible part of
an application, and it’s the tier you’re looking at right now while you’re reading this sentence.

Logic tier
Like an orchestra conductor, this layer coordinates the application, performs calculations, makes logical
decisions and evaluations, and moves data between the presentation tier and the data tier.

Data tier
This is where information is stored in something like a database or file system.

The descriptions above are all pretty abstract so don’t worry if you’re not completely sure how they work
together yet. It’s probably more helpful to talk about the specifics of how this architecture is used for web
applications.
 TERM TO KNOW

Software architecture

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 27
 The process and product of planning, designing, and constructing a software system.

Three-tiered architecture (also called Multi-tier and Multi-layer)

In multitiered systems, code is strategically partitioned into separate tiers so that, whenever
developers need to modify an application, they’ll only have to work with one tier at a time instead of
tearing apart and reworking the entire application.

2. FRONT END AND BACK END

In web development, front end refers to the highest tier — the presentation tier — and back end refers to the
lowest tier — the data tier.

For web applications, the front end is the content rendered by the browser. It’s the content that users can see
and interact with. In other words, it’s the web page itself. Colloquially, back end is used to refer to everything
else that’s not the front end — that is, the logic tier and data tier. Technically, the back end specifically refers
to the data tier which is comprised of the database or file system where data is stored and the software that
manages and provides access to the data. In web applications, the logic tier is made up of software that can
process user input from the front end, retrieve data from the back end, and process that data so it can be
displayed by the front end. For the rest of this course, we’ll use the colloquial definition of back end, the one
that encapsulates both the logic and data tier.

Another way to differentiate the two is by the languages used in each end. When working in the front end,
web developers are restricted to using coding languages that web browsers can understand. In most cases,
these languages are HTML, CSS, and JavaScript. In the back end, there no restrictions on programming
languages, since back end software runs on computer hardware instead of running through a web browser.

 TERM TO KNOW

Front End
The highest tier, the presentation tier, in a web application.

Back End
The lowest tier, the data tier, in a web application.

 TERMS TO KNOW

Back End
The lowest tier, the data tier, in a web application.

Front End
The highest tier, the presentation tier, in a web application.

Software architecture
The process and product of planning, designing, and constructing a software system.

Three-tiered architecture (also called Multi-tier and Multi-layer)

In multitiered systems, code is strategically partitioned into separate tiers so that, whenever developers
need to modify an application, they’ll only have to work with one tier at a time instead of tearing apart
and reworking the entire application.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 28
Programming for the Web
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore how to use programming languages to create a web page by discussing:
1. WHAT'S IN A WEB PAGE?
2. HTML
3. CSS
4. JAVASCRIPT

1. WHAT'S IN A WEB PAGE?

At the beginning of this unit, you learned that a web page is a collection of information that you can access
from a web browser. Every web page has a distinct URL. You’ve probably entered a web page’s URL into your
browser whenever you wanted to view the contents of that particular page. For example, https://sophia.org/
takes us to a web page that looks like this:

A screenshot of https://sophia.org/ , as it appeared via Google Chrome in August 2020.

All web pages like the one above are made up of three different languages — HTML, CSS, and JavaScript.
Each language is responsible for a different aspect of a page; HTML defines the structure of a page’s content,
CSS provides rules for a page’s look and feel, and JavaScript is used to program things like animations and
interactivity. Let’s talk about each language in more detail.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 29
2. HTML
HTML stands for HyperText Markup Language. As you might have gathered from its name, HTML is a markup
language. Like programming languages, markup languages are a type of code. Unlike programming
languages, markup languages aren’t used to write algorithms. Instead, they’re used to group, annotate, and
categorize content to describe the content’s semantics in a way that computers will understand.

 DID YOU KNOW

Other markup languages include reStructuredText, Markdown, and AsciiDoc.

For example, here’s that screenshot of the Sophia home page again:

A screenshot of https://sophia.org/ , as it appeared via Google Chrome in August 2020.

As humans, it’s easy for us to understand the structure of this page. We have the benefit of being able to use
contextual clues and our past experiences of navigating similar web pages to analyze the page and make
sense of it. For instance, we can tell that the black bar at the top is used for navigation because it’s a design
pattern employed in many other web pages. We can also assume that the color-shifting box below the
navigation bar is a special announcement because its bold background makes it distinct from the rest of the
page.

Computers, on the other hand, can’t determine any of those things without our help. This is what the Sophia
home page might look like to a computer if HTML didn’t exist:

Even humans will have trouble making sense of the content above! It’s much harder to tell where the

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 30
navigation bar starts and ends. Also, it’s nearly impossible to distinguish between the content that’s part of the
special announcement and the content that’s outside of it.

Now, compare the text above to the text below. It contains the exact same content but, this time, we’ve added
some HTML:

Even without a complete understanding of HTML, it’s a lot easier to tell that certain parts of the page are
associated with one another. HTML allows developers to tell the computer that, for example, all the content
between <nav></nav> represent the section of the page whose purpose is to provide navigation links
between different web pages and that Menu and Search aren’t just random words, they’re buttons.

Graphical user interface, text.

HTML isn’t the only language at work though. Without CSS and JavaScript, Sophia’s homepage would look

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 31
something like this:

An example of what HTML looks like without CSS

Notice how, in the screenshot above, we can see all the content ofhttps://sophia.org/ but it doesn’t look right.
The fonts are wrong, the navigation menu doesn’t have a black background, and the buttons look boring!
HTML is just one of the components that make up a webpage and it’s only responsible for determining the
contents of a page. To make those contents look stylish and visually appealing, you’ll need a language that’ll
specify how documents are presented. That’s where CSS comes in.

 TERM TO KNOW

HyperText Markup Language (HTML)

A markup language that is a type of code used to group, annotate, and categorize content in a way
that computers understand.

3. CSS
CSS (Cascading Style Sheets) is used to specify how a document should be presented to users. Here,
presenting a document to a user means converting it in a way that’s usable by your audience. When a web
browser presents a document to a user, it converts HTML source code into a visual format that can be
displayed on a computer screen.

CSS has many capabilities. It can be used for basic text styling like changing the font, color, size, and weight
of headings, paragraphs, and links.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 32
It’s also used to create the layout of a page so that content is displayed across two columns instead of just
one.

CSS can do complex things too like drawing shapes, adding animations, adding effects when users click on a
certain element, and more. CSS has so many features that web developers are even able to make complex
illustrations using CSS and a bit of HTML.

CSS is good for making visual changes to a page and some dynamic behavior, but if you want more control
over the contents of a page so that you can dynamically update content, respond to user input like button
clicks, and nearly everything else you’d want to do on a website, you’ll want to use JavaScript.

 TERM TO KNOW

CSS (Cascading Style Sheets)

Specifies how a document should be presented to users.

Presenting
Converting a document in a way that is usable by your audience. When a web browser presents a
document to a user, it converts HTML source code into a visual format that can be displayed on a
computer screen.

4. JAVASCRIPT
You’re already familiar with JavaScript’s history, how monumental it was for accelerating the growth of the
web, and that it’s a programming language. Now you’ll see how it builds on top of HTML and CSS. Let’s start
small with some HTML:

It’s a bit bland though, so let’s spice it up with CSS:

Let’s make this more interactive by adding JavaScript so that users can get a customized greeting when they
click on Hello, friend!:

By the way, the example above is interactive. Try clicking on Hello, friend!and see what happens.

The example above illustrates how JavaScript is generally used on the web. It can store data (like when we
asked for a name and stored it in a variable called name), it can perform operations on numbers and text, and
it can execute code in response to user interaction.

What’s even better is how you can use JavaScript to take advantage of Application Programming Interfaces
(APIs), ready-to-use sets of code building blocks that you can repurpose in your own project. Think of them
like furniture kits that come with panels of wood already cut and sanded, and all you have to do is put the
pieces together. It’s much easier to do that than to build a chair, completely from scratch. APIs used on the
web (APIs exist in all types of software engineering) are typically browser APIs or third-party APIs.

Browser APIs come built into your web browser. You can use them to hook into your computer’s environment
or do all sorts of complex things. For example, in the examples above, we used a browser API to manipulate
HTML. There’s an API that you can use for geolocation and geographical information and there are APIs for
creating 2D and 3D graphics.

Third-party APIs don’t come with your browser so you have to acquire or install their code separately. Many
companies publish APIs that allow developers to access their data. For example, Google has an API that
© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 33
allows you to use Google Maps’ location data and traffic information. Spotify has an API you can use to look
up musicians, albums, and songs. There are a lot of cool APIs available to use for free, thanks to the fact that
software engineers have established a culture of freely sharing knowledge and code with each other.

We hope you’re excited about the endless possibilities of programming on the web. You now have all the
pieces needed to understand the roles that HTML, CSS, and JavaScript play in creating a website. These three
languages are arguably a web developer’s most powerful tools, but there are peripheral tools besides just
coding languages that developers use on a daily basis. Some might even argue that they’re more important
than HTML, CSS, and JavaScript! In the next section, we’ll talk about those peripheral tools — ones that web
developers use to write and run code.

 TERM TO KNOW

Application Programming Interfaces (APIs)

Ready-to-use sets of code building blocks that you can repurpose in your own project.

 TERMS TO KNOW

Application Programming Interfaces (APIs)

Ready-to-use sets of code building blocks that you can repurpose in your own project.

CSS (Cascading Style Sheets)

Specifies how a document should be presented to users.

HyperText Markup Language (HTML)

A markup language that is a type of code used to group, annotate, and categorize content in a way that
computers understand.

Presenting
Converting a document in a way that is usable by your audience. When a web browser presents a
document to a user, it converts HTML source code into a visual format that can be displayed on a
computer screen.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 34
Writing and Running Code
by Devmountain Tutorials

 WHAT'S COVERED

This section will explore how to understand code in examples by discussing:

1. WRITING CODE WITH TEXT EDITORS
2. HOW HTML, CSS, AND JAVASCRIPT RUN IN THE BROWSER
3. JAVASCRIPT IN THE BROWSER
4. HOW TO GET STARTED WITH JAVASCRIPT, HTML, AND CSS

1. WRITING CODE WITH TEXT EDITORS

To create a website with HTML, CSS, and JavaScript, you’ll need a text editor. These are different from word
processors like Microsoft Word or Google Documents which allow you to add formatting to your text, like
changing fonts or making certain words bold and underlined. Text editors are used to write unformatted text
files.

All operating systems come with a basic text editor — Windows comes with Notepad and MacOS comes with
TextEdit. These editors will work just fine, but most web developers use third-party editors with specialized
tools and features for writing code. Some of the most popular text editors include Visual Studio Code,
Brackets, and Sublime Text.

There are also web application-based text editors that allow you to write code directly from within your
browser. They’re becoming popular for enabling developers to edit code on any device and for automatically
saving code to the cloud. These text editors are also great for novice developers since they don’t require any
setup besides registering for a user account. Popular online text editors include repl.it and jsfiddle.net.

There can be many subtle differences between different text editors so we recommend putting some thought
into deciding which to use. Most editors, including the ones we mentioned, will include features that are
essential for writing code like syntax highlighting and code completion.

Syntax highlighting is a feature that displays source code in different colors and fonts that correspond with a
coding language’s grammar. It helps make code easier to read and write because there’s a visual distinction
between different parts of the code.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 35
 HTML without syntax highlighting

HTML with syntax highlighting

Code completion helps reduce the number of keystrokes used to write code. It’s similar to how auto-
complete or predictive text might help you compose text messages on a mobile device.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 36
 HTML editor with code completion

You may have also seen the term, IDE, or Integrated Development Environment. These are programs that
combine several different tools into a single application. Most IDEs consist of a text editor, tools for building
executables, and a debugger. They’re often created specifically for writing code in a particular language. For
example, Eclipse IDE is primarily used to write Java and PyCharm is used to write Python.

In general, web developers don’t need an IDE to help them run or debug code because most of the code
they write will run in a web browser.

 TERM TO KNOW

Syntax highlighting
A feature that displays source code in different colors and fonts that correspond with a coding
language’s grammar.

Code completion
Similar to how auto-complete or predictive text might help you compose text messages on a mobile
device, but this helps to reduce the number of keystrokes used to write code.

Integrated Development Environment (IDE)

Programs that combine several different tools into a single application.

2. HOW HTML, CSS, AND JAVASCRIPT RUN IN

THE BROWSER
Whenever you load up a new web page in a browser, it needs to run the code that makes up the web page
(the HTML, CSS, and JavaScript) in order to make the contents of the page appear on the screen. You can

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 37
think of it like a factory that takes in raw materials — the code — and outputs a product — the web page.

In general, code is loaded and executed in the order it appears on a page, from top to bottom. Every time you
navigate to a new page, the process will start over again. The browser will wipe away any code related to the
previous page and load in code for the new page. Then, it will run the code and make the contents of the new
page appear on the screen. Also, each browser tab has its own “world” and runs code separately from other
tabs. This ensures that code in one tab won’t conflict with code in another tab. It’s also a good security
measure, because it prevents potentially sensitive information from one tab from leaking to another tab.

3. JAVASCRIPT IN THE BROWSER

JavaScript is a lot more complex than HTML and CSS, so it warrants an explanation that’s a bit more detailed.

One way to run JavaScript in the browser is by embedding it into your HTML. Then, whenever the browser
encounters a block of JavaScript code, it will execute that code as JavaScript (instead of HTML) in the order
that each line of code appears.

Note that you don’t have to compile or transform the code into a different form so that the browser can run it.
Instead, JavaScript is interpreted — the code you see is processed and executed directly by the browser. To
be more accurate, modern browsers mostly use a strategy called just-in-time compiling to improve
performance. Browsers will compile JavaScript source code into a format that can run faster. However, you
never have to worry about compiling JavaScript yourself, so it’s still considered an interpreted language and
not a compiled one.

Another way to put JavaScript into a web page is by importing it from an external file like so:

When the browser sees this, it will load and execute the contents of the file at that URL.

⭐ BIG IDEA

By the way, the URL inside the quotation marks in the script tag above is a valid URL. You can view the
contents of the document at that URL by entering it into your browser like any other URL. The code inside
isn’t very readable. Still, you might find it interesting!
 TERM TO KNOW

Compile
Transform the code into a different form so that the browser can run it.

Interpret
The code you see is processed and executed directly by the browser.

Just-in-time compiling
Modern browsers will compile JavaScript source code into a format that can run faster and improve
performance.

4. HOW TO GET STARTED WITH JAVASCRIPT,

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 38
HTML, AND CSS
The best way to experiment with JavaScript is through your browser’s JavaScript console. Most browsers
come with a powerful suite of web developer tools (there are many articles online that will walk you through
how to do this, like this one), so there’s a lot less setup involved and zero additional software to install. The
JavaScript console allows you to execute lines of JavaScript and view their output, interactively, so it’s a great
way to learn.

It also makes a nice calculator.

Another way to practice writing HTML, CSS, and JavaScript is through platforms likecodepen.io. Codepen is
nice because it’s geared specifically for front end web developers. In that sense, it’s more of a code
playground rather than a text editor because you can only use it for HTML, CSS, and JavaScript so it can be
slightly more beginner-friendly than online code editors like repl.it. The trending page on Codepen is a great
look at the cool experiments and projects web developers have created with just HTML, CSS, and JavaScript.

If you like data science and data visualizations, you might be interested inalpha.iodide.io or
observablehq.com. They’re not as beginner-friendly as Codepen since their focus is on creating data
visualizations with JavaScript, but it’s interesting to see JavaScript being used for something besides creating
software!

 TERMS TO KNOW

Code completion
Similar to how auto-complete or predictive text might help you compose text messages on a mobile
device, but this helps to reduce the number of keystrokes used to write code.

Compile
Transform the code into a different form so that the browser can run it.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 39
 Integrated Development Environment (IDE)
Programs that combine several different tools into a single application.

Interpret
The code you see is processed and executed directly by the browser.

Just-in-time compiling
Modern browsers will compile JavaScript source code into a format that can run faster and improve
performance.

Syntax highlighting
A feature that displays source code in different colors and fonts that correspond with a coding
language’s grammar.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 40
Terms to Know
Algorithm
A set of step-by-step instructions that describe how to solve a problem.

Application Programming Interfaces (APIs)

Ready-to-use sets of code building blocks that you can repurpose in your own project.

Asynchronous JavaScript and XML (AJAX)

AJAX is not a specific technology. Rather, it’s a technique that developers use to decrease
loading times and improve user experience. It is difficult to pinpoint the origin of the term
but it was first publicly used by Jesse James Garrett in his article, Ajax: A New Approach to Web
Applications.

Back End
The lowest tier, the data tier, in a web application.

CSS (Cascading Style Sheets)

Specifies how a document should be presented to users.

Clients and HTTP requests

Clients can send HTTP requests to servers. Servers don’t always respond to every request,
though. Servers are able to reject requests as well.

Code completion
Similar to how auto-complete or predictive text might help you compose text messages on
a mobile device, but this helps to reduce the number of keystrokes used to write code.

Communication protocol
A set of instructions and rules that define how information ought to be transferred from one
place to another.

Compile
Transform the code into a different form so that the browser can run it.

Computer
A computer is anything that can perform different functions based on changing conditions
and has the ability to store data

Computer network

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 41
 A group of interconnected computers that can communicate with one another.

Cross-platform applications
Applications that are compatible with different systems.

Formal Language
A language designed by people for specific, often technical, applications.

Front End
The highest tier, the presentation tier, in a web application.

HyperText Markup Language (HTML)

A markup language that is a type of code used to group, annotate, and categorize content
in a way that computers understand.

HyperText Transfer Protocol (HTTP)

The name of a communication protocol that’s often used to communicate with computers
on the web.

Hyperlink
Those pieces of text on a website that connect you from one page to another.

Integrated Development Environment (IDE)

Programs that combine several different tools into a single application.

Internet
The technological backbone of the World Wide Web.

Interpret
The code you see is processed and executed directly by the browser.

JavaScript
The first programming language of the web. Web developers use JavaScript to program
dynamic behavior on a website, which made it possible for developers to create web
applications.

Just-in-time compiling
Modern browsers will compile JavaScript source code into a format that can run faster and
improve performance.

Natural Language

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 42
 A language that evolved naturally over time.

Pair Programming
A collaborative technique where two engineers write code on one computer. Usually, one
engineer types while the other engineer describes what the code should be doing at a high
level.

Presenting
Converting a document in a way that is usable by your audience. When a web browser
presents a document to a user, it converts HTML source code into a visual format that can
be displayed on a computer screen.

Program
Programs are algorithms that computers understand. Engineers write programs using
programming languages.

Programming Language
A formal language designed to tell computers what to do.

Servers and HTTP responses

Servers can take HTTP requests clients and reply by sending HTTP responses back to their
clients.

Software Development
The work involved in creating programs that computers can execute. The tasks involved
can include graphic design, copyediting, and software engineering.

Software Engineering
Software engineering is a discipline that combines features from mathematic, scientific, and
creative fields. The work that software engineers do isn’t just writing code. They also use
specialized languages (code) to denote ideas like mathematicians, understand the rules of
the system they’re working with like scientists, and create solutions and evaluate tradeoffs
like designers.

Software architecture
The process and product of planning, designing, and constructing a software system.

Stand-up Meeting or Scrum Meeting

A daily meeting where colleagues update their teammates on the status of their tasks and
coordinate the rest of the day.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 43
 Static Web Page
Web pages that loaded and never changed.

Syntax highlighting
A feature that displays source code in different colors and fonts that correspond with a
coding language’s grammar.

Three-tiered architecture (also called Multi-tier and Multi-layer)

In multitiered systems, code is strategically partitioned into separate tiers so that, whenever
developers need to modify an application, they’ll only have to work with one tier at a time
instead of tearing apart and reworking the entire application.

Token
The basic building block of a language.

Traditional applications and Web applications

Here, we use the term traditional application to refer to desktop applications — which run
on operating systems like Windows or MacOS — and mobile applications — which run on
Android and iOS. In contrast, web applications run in web browsers.

Uniform Resource Locator (URL)

Websites on the Internet are identified by their URL. They’re unique addresses that you can
use to access a website. For example, by typing https://google.com into your browser,
you’re able to go to Google’s homepage.

Web Development
Web development is software development on the web. In other words, it’s the work
involved in creating websites.

Web Engineers
Web engineers are software engineers that are specifically responsible for writing code and
programming websites.

Whitespace Time
Whitespace time is a common benefit that tech companies will provide their employees. It’s
the name for an amount of time that an engineer should devote to personal projects or
volunteer work.

World Wide Web (WWW)

An information system where websites and other resources are identified by URLs.
Colloquially, the World Wide Web is known as, simply, the “web”.

© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 44
© 2023 SOPHIA Learning, LLC. SOPHIA is a registered trademark of SOPHIA Learning, LLC. Page 45