# Learning to code

1. Syntax
1. Context
1. Tools

## Syntax

Web sites/apps use 3 programming languages with different syntaxes.

1. HTML (HyperText Markup Language) for the structure of a page
2. CSS (Cascading Style Sheets) for the styles applied to that structure
3. JS (JavaScript) for logic and user interaction

You need to get familiar with these language. It's usually simpler to begin learning them in isolation, via platforms like freeCodeCamp and Codecademy. These let you write small snippets of code and see if they work without worrying about the wider context of making a whole web page.

## Context

At some point you need to learn how all these pieces fit together to create a web site from scratch. Some people wait too long to do this—I'd recommend trying to make something simple as soon as you're familiar with the syntaxes of HTML and CSS. You don't need to know _everything_ to make a basic page.

It's also important to get a vague idea of how the web works. E.g. when you visit google.com in Chrome what happens? How does Chrome go and get the page, how does Google give it what it needs, what code is involved in displaying the result to you?

## Tools

Finally you'll need to have a few programs installed on your computer in order to build entire web sites. You can rely on online platforms to write code for a bit but ideally you should start getting familiar with your tools as soon as you can. It's no different that e.g. a carpenter getting used to the various saws in their workshop.

You'll need:

1. A text editor for writing code.
This can be as simple as something like Notepad, but it's good to use a dedicated code editor that will have helpful extra features (like Visual Studio Code).
Note that a text editor lets you edit and control a raw text file directly. This is different to a "word processor" program like MS Word that creates a custom formatted document—you can't write code in these.
1. A terminal emulator.
You'll be interacting with your computer at a slightly lower level than the average user. It's usually easier/quicker to control things by writing text-based commands into a "terminal", instead of trying to find the right button in a graphical app.
macOS' built in Terminal.app is okay, but most people like to use something more customisable like iTerm2.
1. A modern web browser.
The browser is where your code will actually be running. Modern ones have built-in "developer tools" that let you inspect the elements on the page, view the source code of websites, and generally help you see what's going on under-the-hood.
Any modern browser is fine, e.g. Chrome, Firefox, Edge. Safari doesn't have the best developer tools so is probably not such a great choice.

---

## Language intros

### HTML

HTML is a "markup language". This means it's used to add meaning to a document. E.g. here is some raw text:

Hello here's some text

This text has no "semantics". I.e. the computer doesn't know anything about what it is supposed to represent. We can add semantics by using HTML "tags":

<p>Hello here's some text</p>

The `<p>` tag represents a "paragraph" element in HTML. This tells a web browser to interpret this text as a new paragraph. There are _a lot_ of different tags, but you won't need to worry about most of them at first (and it's fine to google them, e.g. "html tag for a button").

Our paragraph has an opening tag (`<p>`) and a closing tag (`</p>`). Anything between the tags is inside the paragraph (often called "child content" or "children").

Some tags have special behaviour that tells the browser to _do stuff_. E.g. we can show an image with the `<img>` tag:

<img src="https://somewebsite.com/my-image.jpg">

We've introduced a new bit of syntax here: "attributes". HTML tags can have extra information added that is specific to that instance of the element. In this case we've added the "src" attribute (it stands for "source"), which is used to tell the browser the location of the image file to show.

Attributes can either be a name/value pair like `<p name="value">`, or they can be just the name, like `<p hidden>`. The latter is for attributes that are either "on" or "off" and have no value beyond that.

We've also introduced a different kind of tag: note that there's no closing `</img>`. This is because some elements are "void elements". That means they can't have anything inside of them, and so don't require a closing tag.

That's pretty much all the HTML syntax you need to get started.

### CSS

When the web was invented CSS didn't exist yet. This meant HTML was also used to change how elements on a page looked. E.g. there were tags like `<font>` to control text styles. CSS was specifically for styling the page so HTML could focus just on the meaning of each element.

CSS is stuctured as sets of "declarations". Each declaration has a "selector" and a block of rules. E.g.

p {
  color: blue;
  background-color: purple;
}

The selector is the bit before the curly brackets. In this case it is targetting all the `<p>` elements on the page. You can see more examples of selectors below.

The rules are the lines _inside_ the curly brackets. There are two rules here. Rules are structured as property/value pairs. The property is on the left of the colon; the value is on the right. A semicolon is required as the end of a rule.

Properties come from CSS itself—there are lots of these for controlling almost every aspect of how things look. Here we are using the `color` and `background-color` properties to change the colour of the text within the paragraph and the background colour of the paragraph.

Values are specified by you. They have to be _valid_ (e.g. you can't do `color: 50`), but otherwise you can choose what to set.

#### Selectors

Selectors are one of the most important parts of CSS. They let you target almost anything on the page, often in lots of different ways.

We've already seen an "element selector" (just `p`). This will target every HTML element that matches the tag name. Sometimes however this is too general. What if we want to make only some of the paragraphs blue?

You can add a "class" attribute to HTML elements. This is used to give a more specific name to certain elements, to signify that they should be different. E.g.

<p class="special">Hello here's some text</p>

We can use this class in a CSS selector like this:

.special {
  color: blue;
}

The `.` tells CSS we want to target all elements with a `class` attribute. We can now add `class="special"` to any element we want (not just `<p>`s!) and they'll have blue text.

There are lots of other types of selector, but you can get pretty far with just element and class selectors.

### JavaScript

JavaScript has quite a bit more syntax to learn compared to HTML and CSS. They are both designed to solve very specific problems (describing the meaning and styles of pages respectively).

JavaScript (JS) is a more general purpose programming language, which means you can do almost anything in it. This is fun, but it does mean there's a bit more to learn. I'll just cover a quick overview for now.

JS consists of sets of "statements". These usually end with a semicolon (although it's technically optional you should include them to avoid confusion). E.g.

1 + 2;

This statement will be evaluated by JS—the result will be `3`. However it's not a very useful program since we don't do anything with the result. We won't even _see_ the result since we have to tell JS explicitly to print something.

#### Variables

JS lets you define "variables". This is like naming a specific value so you can reference it again later. We can create variables like this:

let x;
x = 1;

The `let` keyword tells JS to create a new variable with the name that follows it. We can then assign a value to that variable using the "assignment operator" (`=`).

**Note**: there are several ways to define variables. You may see the `var` keyword used in older examples. `let` is a newer and slightly safer version of `var`.

Since we usually want to define a variable _and_ assign a value we normally do it in one go like this:

let x = 1;

We can define as many variables as we like by writing multiple statements:

let x = 1;
let y = 2;

We can use the variables by referencing them by name:

let x = 1;
let y = 2;
x + y;

This will have the same result as our first program above: `3`. JS effectively replaces the variable names with their values when it needs to evaluate the final line, so it ends up with `1 + 2;`.

Variables don't have to be simple values—they can be the result of any valid "expression". E.g.

let x = 1;
let y = 2;
let sum = x + y;

JS will evaluate variable definitions from right to left. So here it will find the result of the `x + y` expression, then set that as the value of our `sum` variable.

#### Types

So far we have only used numbers. However JS has several different "types" of value. The "primitive" types include `number`, `string`, `boolean` and `undefined`.

`number` represents numbers. You can create a number value by typing digits directly as we've seen. You can create negative numbers by appending a minus symbol: `let x = -1;`.

`string` represents arbitrary groups of characters (e.g. words). You can create a string using quotation marks (single or double work, but pick one to be consistent):

let message = "hello I am a string";

`boolean` can only have two values `true` and `false`. It is used for conditional logic (which we'll see in a moment).

let isAllowed = false;

`undefined` is used to represent a variable that has no value yet. It is implied if a variable is defined with no value, like this:

let x;

Weirdly it can also be defined using the `undefined` keyword, like this:

let x = undefined;

#### Conditions

Programs need to be able to "branch" their logic based on certain conditions. For example a video play/pause button needs to do different things based on whether the video is currently playing or not.

JS uses the `if` keyword to create conditional statements. E.g.

if (someCondition) {
  1 + 2;
}

JS will check if whatever is inside the parentheses (`()`) is "truthy". If it is the code inside the "block" (within the curly brackets) will run.

##### Truthiness

"Truthy" is a special term that means "is a value that can considered equivalent to true". Almost all values are "truthy", and so it is easier to define "falsy" values.

`0`, `false`, `""` (an empty string) and `undefined` are all considered "falsy". So the following `if` statement would not execute the code inside the block:

let message = "";

if (message) {
  1 + 2;
}

##### Comparison operators

JS has several operators for comparing values that are useful in conditions. You may recognise some from mathematics.

`>` means "is greater than". If the value on its left is greater than the value on its right it evaluates to `true`, otherwise `false`. E.g.

let x = 1;
let isPositive = x > 0;

`<` means "is smaller than". If the value on its left is smaller than the value on its right it evaluates to `true`, otherwise `false`. E.g.

let x = -1;
let isNegative = x < 0;

Both `<` and `>` are _exclusive_. I.e. `x < 5` will be `false` if `x` is `5`. They both have _inclusive_ variants by appending an equals sign: `<=` and `>=` ("less than or equal to", "greater than or equal to").

`===` means "is strictly equivalent to". If the value on its left is _exactly the same_ as the value on its right it evaluates to `true`, otherwise `false`. E.g.

let firstMessage = "hello";
let secondMessage = "hello";
let isDuplicate = firstMessage === secondMessage;

`!==` means "is not strictly equal to". If the value on the left is _not_ the same as the value on the right it evaluates to `true`, otherwise `false`. E.g.

let firstMessage = "hello";
let secondMessage = "goodbye";
let isDifferent = firstMessage !== secondMessage;

##### Logical operators

JS also has operators for doing logic that are useful in conditions.

`!` is the "logical NOT" operator. It flips the boolean value of an expression. E.g. `!true` is `false`. It also works on more complex expressions. E.g.

let age = 17;
let isAllowedBooze = !(age < 18);

(this example is a bit contrived as you would usually just do `age > 17`)

`&&` is the "logical AND" operator. If the value on the left _and_ the value on the right are truthy it evaluates to `true`, otherwise `false`. E.g.

let x = 5;
let isPositive = x > 0;
let isLarge = x > 1000;
let isLargePositive = isPositive && isLarge;

`||` is the "logical OR" operator. If the value on the left _or_ the value on the right are truthy it evaluates to `true`, otherwise `false`. E.g.

let x = 0;
let isPositive = x > 0;
let isNegative = x < 0;
let isNotZero = isPositive || isNegative;