Table of Contents

Lab 01 - Web Basics

Brief introduction video

The web is the backbone of the internet, and the largest application platform today. This is all due to a core characteristic:

The web is simple.

Think about it - when you want to check Facebook, you just type facebook.com in your browser, press Enter, *poof* and you suddenly know what all your friends ate this morning. This simplicity isn't apparent - although there are some complex things going on, most of the behind-the-scenes stuff is pretty easy to understand.

This lab aims to help you learn the bare minimum that you need to know in order to develop a website. You'll see how the browser works, you'll learn how the server knows what data to send, and you'll find out how designers make websites look pretty.

Let's dig in!

🌍 The browser

A web browser (commonly referred to as a browser) is a software application for accessing information on the World Wide Web. Each individual web page, image, and video is identified by a distinct URL, enabling browsers to retrieve and display them on the user's device.

That's Wikipedia's definition of a web browser. Pretty boring, ain't it ? Let's define it a different way:

A web browser is the vehicle that allows you to view, interact and discover everything from what's going on in the USA to some guy that loves hats.

We all know how to use a web browser - you're using it right now to view this page. You probably also have other pages open in the background, such as YouTube or Facebook. Some of those pages might send you notifications, or play media content such as video and audio. But what exactly makes it tick ?

How does the browser know what to render

If you hit Ctrl + U in this page, you'll see something similar to this: 

 
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="lang:search.language" content="en">
      <link rel="shortcut icon" href="../../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-0.17.3, mkdocs-material-2.8.0">
      <title>Browser - .js Summer Course</title>
............................................................................

This code is called HTML, and is the language that defines the “scaffolding” of any webpage. We'll dive into HTML later, but for now you only need to know that the elements that are between <> brackets (like <meta>) are called tags, and are the building blocks of the language.

HTML and its tags define a tree, which represents the structure of our web page. That is why we call it our “scaffolding”: it builds our page like a resistance structure builds a house.

If you dive deeper into the source code of any webpage, you'll come across something like this: 

.md-nav__title {
  display: inline-block;
  margin: .4rem;
  padding: .8rem;
  font-size: 2.4rem;
  cursor: pointer
}

This is HTML's counterpart, CSS. While HTML defines our page's structure, CSS tells the browser how elements are supposed to look. We'll look into CSS in depth a bit later.

How does rendering actually happen ?

The page rendering process is broken up into multiple steps, as shown in this diagram:

Browser rendering pipeline

Image source

If you follow the pipeline above, you'll see that the steps are more or less as follows. We'll ignore the Script blocks for now.

There are a few extra steps in the pipeline such as reflow / layout, paint and composite, but all you really need to follow in the image above are the blue and purple boxes.

Examples

A visualisation of this process for an older version of the Twitter site:

As you can see, the browser first positions the elements in the top-left corner of the parent element (most of the time this is the browser window), renders the contents, applies the required CSS and then positions the element correctly in the page.

Another visualisation of a more complex website is here:

Notice how the browser begins to render a lot of elements between 0:20 and 1:30 ? Those are the individual options available in the dropdown menus (day, month, year) that we need to have ready to display when the user toggles the dropdown.

As you can see, the browser does a huge amount of work in a short amount of time in order to present you a website. And this is just the structure and painting - we haven't gotten to interactivity yet.

For a more in-depth look at how the browser renders our page, check out this talk by Ryan Seddon at JSConf EU 2015:

Also, if you are interested in learning more about the specifics of how the browser renders a page, check out this artucle from Mozilla Hacks.

💫 HTTP and APIs

We've seen how the browser renders the page that we see, but how do the files get from the server to our browser, in order to be rendered ?

The magic behind this is a protocol called HTTP. Let's see what MDN has to say about HTTP:

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. … HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.

Let's break this definition down:

Although it might seem daunting at first, you'll see that HTTP is a very simple, text-based protocol. Communication in HTTP is request-response based: the client sends the server a request, and the server replies with a response. There are a few extra cases, but most of the time this is the way the protocol works.

The protocol only specifies a couple of things, the most important being the format of the request and the response.

The HTTP Request and Response formats

When the client makes a request to a server, the packet it sends needs to have the following fields:

A complete request looks something like this: 

GET /hello.html HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.facebook.com
Accept-Language: en-us
Accept-Encoding: gzip

The following line: 

GET /hello.html HTTP/1.1

is the request line. This specified the HTTP method (GET), the resource we want to request (/hello.html) and the protocol version that we are using (HTTP/1.1).

A resource in HTTP terms is any object that we can manipulate on a server. This is usually a text file (HTML, CSS, etc.) but can also be dynamic media such as images, photos or video streams.

The rest of the lines in the request are the header fields. These have the format of Key: Value, and are always entered each on one line. There are two more interesting header fields in the request above: 

User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.facebook.com

The first line tells the server a bit about the client that is sending the request. In this way, the server can, for example, send plaintext metadata about an image if the requester is a command-line browser, and send the complete media file if the server is a graphical one.

The next line specifies the host that we are connecting to. The resource path in the request line is relative to the Host value.

The following lines are examples that set various parameters about the client so that the server has an easier time sending a correct response.

An HTTP response looks similar to the request. The required information that the server has to include is: 

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

Here we can see fields such as Date and Server that tell us information about the server, Last-Modified and Content-Length that tell us information about the content we have requested, and more.

The most important part of the response though is the very first line: 

HTTP/1.1 200 OK

This tells us the HTTP version (which usually matches the one the client sends in its request) but also the status code and its meaning.

HTTP Status Codes

In order for the server to inform us about how the request went, HTTP specifies a Status Code directive. These codes are numerical values ranging from 100 to 500 that have associated human-readable strings to explain what went wrong (or right) with the request. These codes are categorized based on the first number in the code:

Most of the time you'll only interact with a couple of codes:

CodeMessage Meaning
200 OK Request fullfilled successfully
301 REDIRECT You'll find what you're looking for at a different address
404 NOT FOUND What you requested isn't on this server
500 SERVER ERRORThe server failed to deliver your request

HTTP Methods

Apart from status codes, the HTTP protocol also defines a couple of methods used to communicate with the server. Think of these as remote functions that you call on a server. Although the protocol defines many methods, in daily use we only need a couple of these:

PUT and POST accept message bodies that detail, for example, how exactly a resource is to be edited, or what the new resource should contain. The GET and DELETE requests usually get all their information from the resource's location.

The browser usually makes GET requests when retrieving web pages, but it also makes POST requests when, for example, you submit an online form.

What is an API ?

An API is simply an HTTP server that, instead of responding with HTML, CSS and JS files, accepts and responds with data-specific formats such as JSON or XML. Most of today's online APIs use JSON as their format of choice. They usually are documented and are intended to be used by software programs.

APIs that respect the HTTP method descriptions above are called REST APIs, or Representational State Transfer APIs.

✨ 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: 

<!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:

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

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: 

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

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: 

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.

Classes

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

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: 

<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: 

.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: 

div .red {
  color: red;
}

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

<div>
  <p class='red'> I have red text color </p>
</div>
<p class='red'> I have red class but no red text color </p>
<p style="color: red"> I have red text color </p>

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:

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: 

  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: 

  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: 

.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:

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:

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

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%%'': 

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, 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: 

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: 

let x = 1
console.log(x) // prints 1
 
x = 'hello'
console.log(x) // prints 'hello'

We will delve deeper into JavaScript in the lab.

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.

GitHub Pages

GitHub Pages

Getting started with GitHub Pages

Tasks

Task 1 - Modify the task.css file from Task 1 to make the human do something (e.g. jump).

Task 2 - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages:

Feedback

Please take a minute to fill in the feedback form for this lab.