Week 3


CSS Layouts

The way we've managed CSS layouts has evolved over the years. In chronological order:

CSS selectors

CSS selectors are how you get things on the page to style them in your CSS. There are a few basic ways to do this:


Select on multiple things on a single element by chaining selectors together without a space, for example: a.danger.btn { color: red; }

Descendant CSS selectors

You can select nested elements by putting a space between selectors. For example: header a selects all the <a> tags in the header.

Some rules of thumb when nesting CSS selectors:

Why do we need programming languages?


In programming languages, information is stored in things called variables.

in Javascript variables are created using the keyword var. For example: var x = 1;

Variables can store different types of data, for example:

Javascript Language Rules

Javascript Language Conventions


In the above example (var x = 1;), we call the equals sign (=) the "operator". The operator = assigns a value to a variable. The above example assigns the value 1 to the variable x.

There are other operators used to manipulate values, for example: +, -, *, etc.


Functions fundamentally have three parts:

For example:

function sum(a, b) {
var result = a + b;
return result;

Functions are called with parentheses, for example, the following returns the number 5:

sum(2, 3);

Javascript and the browser provide you with a bunch of functions you can use to do things. You can find a complete list at MDN. Some examples (try them out!):