Whew — a lot of material to remember and go over. Yesterday was a big day with lots of new material to remember. Heres a look at some (or all) of it.

Css positioning — part 1. We learned about the Box Model and what goes inside it. In the middle is the content (that can be anything like text or an image).

After that is padding — which adds height and width around the content, generally increasing the it’s size. Up next is Border which has different types (ex: solid or dotted line). And then finally we have Margin (I need to do more research on what this does). And another part we went over was Display — which may be a default element of the page. Also important to remember is that some elements will have a default value of 8px.

More positioning elements include Block (image types are blocks) and blocks push content to the next line/or page. The next positioning is Inline Block — think of this as a navigation bar — literally a line (or block) going horizontally across the page. You can shove a list in there and have it display horizontally.

The day before we covered web page elements. One of the ones I was having a difficult time understanding was <div>. A <div> can be thought of as a block or a box/container of some sort that can be used on a web page to hold information, this can be anything (content- text/image). As I’m a visual person I tend to think of it as a container or box that can hold other containers — If anyone is familiar with those russian dolls that had smaller ones inside of each other. This can be done for <div>’s as well. Also something I am slightly having a time to grasp is the DRY concept. Don’t Repeat Yourself. An example is an exercise we did in class. I made 4 boxes inside a div and then using css I gave them an id(which means an element can be identified and adjusted individually on a webpage using css.) Instead of labeling the boxes as a class and having them share the same measurements. An ID and CLASS can be used together on the same elements. For example:

<div class=“box_size”; id=”green box”></div>. That is the html element and then on the css side I can have: .box_size{ height: 100; Width; 100} and then #greenbox{ background-color: green}. I could have several boxes labeled Box size for class and they would all retain the same height and width. Then I could have different ID names for the boxes and have them be different colors.

Oh and some more position elements are Border radius — this option rounds out the edges of the border. The higher the pixel number the rounder the edges will be. So you can turn a box into a circle.

And Margin is identified in the following order Margin: Top px, Right px, Bottom px, Left px; So it will look like — Margin: 1px, 2px, 3px, a trick to center <div>s is to use Margin: 0 auto.

to center an inline element use text align:

More positions: Positions in genial are relative to its page and relative to other elements.

Theres position: Static (which is the default position) Elements will appear on the left of the page.

theres also Fixed positioning: The element stays in the same position no matter how you adjust your page. For example if you made a box in the top left and set it.

as a fixed position in css, then shrank your window and scrolled up and down on the page. the element would remain in a fixed position and would stay there in the top left of the window.

Then Position: relative (this is moved in relation to it’s parent div)

Then there’s also float and clear. Clear only works with floats.

Other things we learned yesterday was more javascript! java script is not Java. but Java is pretty cool — cause Stan said so. =p

But we really learned how to make objects and giving them attributes and behaviors. an object can be defined as ex: var Car = {};

Up next comes the attributes of the object:

Car.color = ‘red’, Car.make = ‘Ford’, car.windows = 4.

Now we follow it up with some behaviors:

Car.turnOn = function(){ console.log(‘Vroom Vroom’);}, Car.brake = function(){console.log(‘Scree’);}, Car.turn = function(){ console.log(‘Turn Righ’); }.

When typing in Car.make in the console log it will return Ford. And calling Car.brake will reveal the behavior Scree.

Ok, that’s all for this morning. Hopefully more tomorrow as blogging this refreshes my memory of the covered topics.