In order to understand how a web application (webapp) works, we will begin with a brief introduction to the components of a web page. A webapp typically includes a frontend, a backend, and an API (application programming interface).

What is the difference between the frontend, the backend, and the API?

The frontend of a webapp is visual. Everything that the user sees on their browser is part of the frontend of the web page. The backend consists of tasks and processes that go on behind the scenes to support the application. The backend may have a number of components including databases, authentication (I.e., to ensure that the person is the right user), and payments.

How do the frontend and backend communicate with each other? This is where the API comes in. The API is the layer that sits between the frontend and backend and exposes the backend so that the frontend can communicate with it, and trigger underlying processes.

Next, it is important to understand what languages are used to construct webapps. The three primary languages used are HTML, CSS, and JavaScript.

First, let's address terminology: what does HTML stand for? HTML stands for HyperText Markup Language. What does CSS stand for? CSS stands for Cascading Style Sheets. Next, we will discuss each individually and outline the differences.

What are HTML, CSS, and JavaScript?

Imagine a web page as a house. In this analogy, HTML is the structure of the house. It provides the framework for things like the walls, the roof, and the floor. CSS, however, is what makes the house look attractive. In this analogy, CSS would be the paint, the trim, and all other interior design elements. Lastly, JavaScript is used for all other processes underneath that let the webapp run. In this analogy, that would be the HVAC system, plumbing, electrical and all other systems that ensure that the house is functioning.

Request & Response

Next, we must introduce the client and the server. The client is the browser, and the server is the computer. The request and response model dictates that if a request is made from the browser, that request will go to a server that is “somewhere in the world”. The server will then send HTML back to the browser. The browser will then take the HTML and construct a house out of it, building the framework of the web page. It will then be read top-down to see what HTML is needed, what CSS has to be applied, or what JavaScript is underlying it all.

To put it in chronological order, we have a browser that makes a request to a server. The server sends HTML back with instructions on how to build out the page. This is then received by the browser. The browser builds the structure based on this blueprint, and that is what is shown to the end user.

HTML Elements

HTML is made up of tags, here are just a few examples of common tags:

• <h1>, <h2>, <h3>, <h4>, <h5> = headers, larger pieces of text, with <h1> being the largest and <h5> being the smallest of the headers
• <p> = paragraph text, smaller and typically longer text
• <a> = links, typically any link within a web page is an <a> tag
• <div> = a way to wrap different parts of the page itself, you can think about it like a bog used to organise a part of your page
• <img> = images that are visible on the web page itself

For more information on HTML elements, check out the following resource: https://www.w3schools.com/html/html_elements.asp

An Example

• <h1> = used for the largest header (“Joshua D’Souza)
• <h3> = used for another header, a statement that that web page creator wanted to be noticeable but is not the largest header on the page, with a greeting (“Hey everyone, I’m Josh!”)
• <p> = paragraph text, describing what the purpose of the web page is (“This is an example of some … walking through this slowly”).
• <a> = links to social media and a product portfolio so that the viewer can easily access resources (“My LinkedIn”, “My Projects”)
• <img> = the image of Joshua on the page
• <div> = the box that encompasses all of the different elements within it, in this example it holds the headings, the paragraph, the links, and the image

Creating HTML Content

HTML content must be nested within an opening and a closing tag. If we want to write the title Joshua D’Souza, it would look like this:

<h1>Joshua D’Souza</h1>

The forward slash used in the second <h1>, </h1>, tag above corresponds to the closing of the first <h1> tag. This principle is the same for other types of HTML tags.

HTML Tags Have Attributes

Attributes in tags help you customize an element. For example, if we would like to describe a link, we will of course be using an anchor tag. When using this anchor tag, however, we will use an href attribute to describe the link that we want to go to. It would look like this:

<a href=”google.com”>Google</a>

In this case, what we would see on the site is “Google” but the user would be directed to the href, which is Google.com. This principle is the same for images (recall that the tag for images is <img>), which would use a src attribute. The src attribute corresponds to source, and would look like this:

<img src=”google.com/some-image.jpg” />

For more information on HTML attributes, check out the following resource: https://www.w3schools.com/html/html_attributes.asp

CSS (to make things pretty)

Every HTML tag has a “class” attribute, which allows the creator of the web page to style each class how they would like. More information on the stylizing of class attributes can be found below when discussing the <style> tag. For example, the <h1> class mentioned above can be named “HeaderText”, as seen in the following example:

<h1 class=”HeaderText”>Joshua D’Souza</h1>

Similarly, <img> shown above can be named “ImageClass”:

<img src=”some-image.jpeg” class=”ImageClass” />

<style> tag

The <style> tag lets you define CSS properties. Using this, the creator of a web page can make any number of stylistic choices. For example, if we were to work with “HeaderText”, which corresponds to <h1> and the user-visible Joshua D’Souza, we can choose the font size and colour like so:

<style>
.HeaderText {
color: blue;
font-size: 50px;
}
</style>

Now, the “HeaderText” will reference the CSS and apply the attributes that have been stated in the <style> tag. A viewer to the page will now see Joshua D’Souza in blue, with a font size of 50 pixels.