I'm beginning to see that I won't be able to write out full blog posts, bu tI want to keep up with at least posting my notes so I can go back and expand on them later.

Scope

what is scope? Context -

2 types of scope- Global Scope and Local Scope

global scope

global scope is like a public bathroom. You should only use it when you have to and try not to touch anything.

local Scope

local variables are not available outside of the function

Garbage collection

Scope chain - it goes upstairs

A function has access to all the variables that were in scope when that function was created.

Resolving names Local scope, parent scope, grandparent scope, global error

First class functions - they have as many rights and priveledges as any other value

undeclared variables

strict mode = "use strict";

hoisting

IIFE

Recursion

Function Arguments

HTML5 Semantic Markup

We quickly went over semantic markup in html5. Semantic simply means, that something has meaning, so semantic markup uses words like header, nav, aside, section, article, etc... instead of div to give the markup that we use, more meaning.

For example:

Using standard divs a a header/nav block.

<div class="header">
    <div class="nav"></div>
</div>

Compared to:

<header>
    <nav></nav>
</header>

While we were listerning to the lecture I made an example page showing a lot of the semantic Markup in action.

Semantic Markup

CSS Selectors

Selector Name What it does
* Global Selector Global styles, selects everything
div .child Descendent Selector Selects all .child elements that are descendants of any div element
div > .child Direct Child Selector Select all .child elements where their parent is a div
div + .sibling Adjacent Sibling Selector Selects an element (.sibling) that follows directly after the prior element (div), in which both elements share the same parent
p ~ ul General Sibling Selector Selects an element (ul) that follows anywhere after the prior element (p), in which both elements share the same parent
.mydiv:first-child Pseudo Class Selects every element with class .mydiv that is the first child of its parent
section.this-class Multiple classes Selects any section element with a class of .this-class
h1, h2, h3 Comma separated selectors Selects all h1, h2, and h3 elements
input[type=password] Attribute Selector Selects all input elements that have a type equal to password

CSS Psuedo Selectors

  • :link - select links on the page.
  • :visited - selects all links that have been visited.
  • :active - selects all links and applies styles to them when they become active (ie. are clicked on).
  • :hover - use this to set styles for when the mouse hovers over an element. Easy way to really spice up your design.
  • :first-child - select the first child within a parent.
  • :last-child - select the last child within a parent.
  • :nth-child(num) - accepts an algebraic expression to specify the different child elements you want to select. You can use this to select only the fifth child, or every odd or even element, or the first 5 child elements, and more! This article talks about how :nth-child works and this article goes over different formulas you can use.
  • :nth-of-type(num) - accepts an algebraic expression to specify the different type of elements you want to select. You can pass it a mathematical expression, even, or odd.
  • :before - allows you to insert content onto a page (from your CSS file) before an HTML element. The result is not actually on the DOM, but it appears as if it is. You need to include a content property.
  • :after - allows you to insert content onto a page (from your CSS file) after an HTML element. Just like with :before, the result is not actually on the DOM. You also need to include a content property.

CSS Animations

In all honesty, I'm too tired to try and capture the animation overview. It's worth reviewing later though.