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.
what is scope? Context -
2 types of scope- Global Scope and Local Scope
global scope is like a public bathroom. You should only use it when you have to and try not to touch anything.
local variables are not available outside of the function
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
strict mode = "use strict";
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.
Using standard divs a a header/nav block.
<div class="header"> <div class="nav"></div> </div>
<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.
|Selector||Name||What it does|
||Global Selector||Global styles, selects everything|
||Descendent Selector||Selects all .child elements that are descendants of any div element|
||Direct Child Selector||Select all .child elements where their parent is a div|
||Adjacent Sibling Selector||Selects an element (.sibling) that follows directly after the prior element (div), in which both elements share the same parent|
||General Sibling Selector||Selects an element (ul) that follows anywhere after the prior element (p), in which both elements share the same parent|
||Pseudo Class||Selects every element with class .mydiv that is the first child of its parent|
||Multiple classes||Selects any section element with a class of .this-class|
||Comma separated selectors||Selects all h1, h2, and h3 elements|
||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-childworks 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,
- :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.
In all honesty, I'm too tired to try and capture the animation overview. It's worth reviewing later though.