Skip to content

✨ The languages of the web

We've seen how the browser renders a page, and we've seen how the browser interacts with the server in order to provide us with all that the web offers us. Now, let's dive in a bit deeper and see how exactly do these languages work.

HTML

HTML is the language that defines a web page's structure. As we've seen, HTML uses tags and attributes in order to define a webpage. A simple HTML page example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html> 

We can see here a couple of elements:

  • The <!DOCTYPE html> declaration - this defines the document as a HTML5 file
  • The <html> element - this is the root element of the document, similar to how / is the root folder in a Linux filesystem
  • The <head> element - this element contains information about the document, such as the page's <title>
  • The <body> element - this element contains everything that is visible on the page

HTML tags are standard and describe well-defined elements, for example:

  • <p> - defines a paragraph box.
  • <div> - defines a generic element that can contain anything
  • <h1> - defines a title (heading)

There are also more specific tags, such as <article> or <nav>. It is important to learn the correct HTML tags to use, as these help the browser and automated tools (such as search engines) make correct assertions about our page.

Some HTML tags also support attributes. You can think of attributes as being similar to function parameters. For example, to embed an image we can use a code that looks like this:

1
<img src='https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg' />

And this will generate the following:

I am an image

Here we are using the img tag's src attribute to specify the source of the image, or, in other words, where is the image located. The browser will then go ahead and retrieve the image, and display it for us.

But let's say that we want to make that image have rounded corners, or be centered, or have a shadow. How would we do that ?

CSS

CSS, standing for Cascading Style Sheet, is the language we use to specify how an element will look like. CSS is a simple language, and it looks something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
html {
  margin: 0;
  padding: 0;
  background-color: red;
}

body {
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
}

As you can see, we pick an HTML tag and say what properties it should have. We define things such as the size of the font, or background color, or spacing between it and other elements.

We can do many things with CSS. For example:

Here's the HTML code for the above images, with the image URL omitted for brevity:

1
2
3
4
5
<div class='image-css-example'>
  <img src='https://...' class='drop-shadow' />
  <img src='https://...' class='rounded' />
  <img src='https://...' class='animated' />
</div>

We can see here a new attribute: the class attribute. We'll talk about this more in just a moment.

Now, let's take a look into the CSS that generates the above code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.image-css-example img {
  margin: 5px;
}

.image-css-example .drop-shadow {
  box-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

.image-css-example .rounded {
  border-radius: 50px;
}

.image-css-example .animated {
  animation-name: image-animation-example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes image-animation-example {
  from {
    border-radius: 0;
    transform: scale(1);
    opacity: 1;
  }

  50% {
    border-radius: 100px;
    transform: rotate(180deg);
    opacity: 0;
  }
}

Well, this looks more complicated than the first example, doesn't it ? But don't fret, we'll go through each of these things and you'll see that, in fact, this code is easy to understand.

Classes

We've seen that, in CSS, we can apply rules to elements based on their tag. For example, this rule:

1
2
3
div {
  background-color: red
}

will make all the div elements on the page have a red background color.

But what if we want to target a specific element ? That's where the class attribute comes in - it allows us to select all elements that have that specific class. For example, given this HTML code:

1
2
3
4
<div>
  <p> I am a paragraph </p>
  <p class='red'> I have red text color </p>
</div>

We can make the second paragraph have the text color red by applying these CSS rules:

1
2
3
.red {
  color: red
}

This will result in something like this:

I am a paragraph

I have red text color

You can also be more explicit, and specify that a certain rule should only be applied to paragraph tags with the .red class that are under a div tag:

1
2
3
div .red {
  color: red;
}

With the following HTML, this is the result that will appear:

1
2
3
4
<div>
  <p class='red'> I have red text color </p>
</div>
<p class='red'> I have red class but no red text color </p>

I have red text color

I have red class but no red text color

The Box Model

CSS relies on what is called a box model. When we say that the HTML tags are rendered as boxes, these boxes have certain properties that define how they relate to elements around them. An easy way to view the box model is this graphic that you can find in most browser's developer tools menu:

CSS Box Model on MDN

There are four basic components of a box:

  • The width and height - these define the baseline size of the element
  • The padding - this defines the spacing between the element's contents and its effective border
  • The border - this defines the separation between an element's content and the spacing around it
  • The margin - this defines the spacing around the element

In CSS, you can define them exactly as written above: width, height etc. You can also specify border, margin or padding for just one side of the box, like so:

1
2
3
4
  padding-top: 5px;
  padding-right: 4px;
  padding-bottom: 3px;
  padding-left: 2px;

Or you can use a shorthand form and define them all in one go:

1
2
3
4
5
6
  padding: 5px 4px 3px 2px;
           |   |   |   |
           |---|---|---|---- top
               |---|---|--------- right
                   |---|--------------- bottom
                       |---------------------- left

Animations!

CSS also allows us to animate HTML elements. Let's bring back the photo above:

If we take a look at the CSS applied to the image, we get a hint on how CSS animations work:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
.image-css-example .animated {
  animation-name: image-animation-example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes image-animation-example {
  from {
    border-radius: 0;
    transform: scale(1);
    opacity: 1;
  }

  50% {
    border-radius: 100px;
    transform: rotate(180deg);
    opacity: 0;
  }
}

As you can see, we use a couple of rules:

  • animation-name - this tells the browser what animation rules to use
  • animation-duration - this is evident - the duration that the animation will run for
  • animation-iteration-count - this defines the number of times the animation will repeat

These three rules are the bare minimum needed in order to add an animation to a HTML element. But we still need to define how the animation will look like. We do this by using a @keyframes declaration, followed by the animation name (the one we set in the animation-name property).

The body of the @keyframes declaration defines the animation steps. These steps can be:

  • from or to - this defines the initial and final state of the object
  • a percentage - this percentage is the part of the animation, for example 50% is the middle of the animation

We can use the transform property to manipulate an element in various ways, such as:

  • scale() - makes the item bigger or smaller
  • rotate() - rotates the item clockwise or counterclockwise
  • translateX(), translateY(), translateZ() - moves the element in 3D space

You can see more examples of the transform property here.

Defining the animation origin point

By default the origin point of the animation is at the center:

But what if we want to obtain something like this ?

It's simple: we use a rule called transform-origin:

1
transform-origin: 0 50%;

This rule takes two parameters: the first represents the horizontal distance from the top left corner, and the second represents the vertical distance from the same corner.

JavaScript

JavaScript is the programming language of the web. It runs in the browser, as well as on the server (as we'll see in the next days) and even on Arduino-like hardware. The syntax of JavaScript is very similar to C++, with a few small differences. Here's a small example:

1
2
3
4
5
6
let iceCream = 'chocolate'
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!')
} else {
  alert('Awwww, but chocolate is my favorite...')
}

A couple of things are worth mentioning about JavaScript:

  • Java has no relation to JavaScript. The name was just an unfortunate market-based decision made by Netscape in the early years of the language.
  • As opposed to other languages such as C++ or Java, JavaScript has no types - any variable can take any value. The following is valid JavaScript code:
1
2
3
4
5
let x = 1
console.log(x) // prints 1

x = 'hello'
console.log(x) // prints 'hello'
  • You'll see a lot of code examples on the internet using var for variable declarations. We recommend that you use let. If you want to learn more about the why, read this great article from hackernoon.
  • You don't need any development environment to write JavaScript - you only need your browser and a simple text editor such as Notepad! Of course, a better text editor such as Visual Studio Code or Atom will improve your experience greatly.
  • Semicolons in JavaScript are optional. We recommend using something like prettier-standard paired with an editor such as Visual Studio Code when developing in JavaScript

We will delve deeper into JavaScript in the following days.

jQuery is not JavaScript

A common mistake is to mix jQuery with JavaScript. This is caused by historic reasons and poor online documentation. What you need to know is that jQuery is written in JavaScript. It's just a library that provides extra APIs for interacting with the browser. In the early days of the internet, where each browser had a slightly different syntax, jQuery was necessary, but nowadays it's more of an impediment rather than a useful thing to use.