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 );
$( ' . 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; }
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