Day2 - Web Mobile and HTML5

day2 of the seminar - pdf  could be found here .

nice tool - for sharing screen with other over http - https://join.me/
if you need to fill up your site with text http://hipsteripsum.me/

the browser before rendering the page looking for any reference for style sheet - css files.
when adding style tag in the page header - should be faster to render.

 (h1,h2...,div,p,li,....) tags are blocked tags - get the full line.
inline tags(span,a,...) written one after the other in the container, inline elements represents text.
if you want.
img tags are special , they are inline/block element , you can define the size of this tag(width ).

to center block element you need to :
mergin-right: auto;
mergin-left: auto;

css selector - its the tag before { such as div,body,h1.

when you have multiple tags selector ,  with space between them, such as:
div div {}
means that the selector will look for div that have a parent div as well (its not have to be a direct father).

when planning a page (web page) use
reset.css - its  important to reset all the browser defaults, best practice, cancelled browser defaults.
there are many browser in the market(desktop,mobile), with different default , so you want to clear it first.

good practice to use em as sizing for fonts/heights , the idea is when the you set the font size on the body each em equal to the font size, when you change the font size all the sizes are changed.

PXtoEM.com PX to EM conversion made simple.

Mobile CSS PPT

we will use class selector when you need to have many items on the same page e.g.:
img.thumb { ......}

cool css samples:
http://css-tricks.com/examples/ShapesOfCSS/
http://www.the-art-of-web.com/


css animation tags:
-webkit-transition: all 0.5s;
-webkit-transform

exercise:
build left menu - when click on button , the menu will shown/hide with animation from the left.