ADVANCED 

HTML & CSS 

Part 2
BLACKGIRLSCODE(2)


WELCOME!


Wi - Fi:
USERNAME | HSC
PASSWORD | youdidittoyourself

WELCOME!

Please download workshop files here: 

https://github.com/blackgirlscode






WHY WE ARE ALL HERE? 


Career Change ?
Start My Business? 
Excersice Brainpower

WHAT WE ARE LEARNING TODAY?




Learn to Code Advanced HTML & CSS 

How to make pages more interactive.

DOM Manipulation

WHAT WE ARE LEARNING TODAY?


jQUERY 

TRANSFORMATIONS 

aNIMATION 

EXTENDING sEMANTICS







JQUERY



WHAT IS IT?


WHAT IT IS NOT...


WHY IT'S USED...



JQUERY


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="script.js"></script>
$(document).ready(function(event){ 
  // jQuery code 
});
$('.feature');           // Class selector
$('li strong');          // Descendant selector
$('em, i');              // Multiple selector
$('a[target="_blank"]'); // Attribute selector
$('p:nth-child(2)');     // Pseudo-class selector

JAVASCIPT?

IS THAT LIKE JAVA? 




TRANSFORMATIONS

http://codepen.io/shayhowe/pen/khtnm

$( ' . f e a t u r e ' ) ;  //  C l a s s   s e l e c t o r
$( ' l i   s t r o n g ' ) ;// D e s c e n d a n t s e l e c to r
$( ' e m ,   i ') ;         // M u l t i p l e s e l e c t o r
$( ' a [ t a r g e t = " _ b l a n k " ] '); //  A t t r i b u t e   s e l ec t o r
$( ' p : n t h - c h i l d ( 2 ) ' );   // Pseudo-class selector.box-1 {
  tr  a n s f o r m  : s c a l e ( . 7 5 );
}
. b o x - 2   {

t r a n s f o r m : s c a l e ( 1 . 2 5 );

TRANSITIONS AND ANIMATION



For a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover:focus:active, and :target pseudo-classes.

TRANSITIONS AND ANIMATION


.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}
http://codepen.io/shayhowe/pen/aCwcK


why mot just use jquery for animations? 

extending semantics

WHY SHOULD I CARE?

What is the DOM?


EXTENDING SEMANTICS

STRUCTURAL 

TEXT LEVEL
 
NEW INPUT ATTRIBUTES

THANK YOU!


TO LEARN MORE VISIT 

http://learn.shayhowe.com/advanced-html-css
Made with Slides.com