add some awesome-sauce
DESCRIPTION
Presentation to Clarksburg High School students with supporting demo site: http://hp.trevordavis.netTRANSCRIPT
![Page 1: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/1.jpg)
![Page 2: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/2.jpg)
ADD SOMEAWESOME-SAUCE
Trevor Davis05.06.2011
![Page 3: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/3.jpg)
WHAT DO I DO?‣ Flat designs to interactive sites
‣ HTML
‣ CSS
‣ JavaScript
![Page 4: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/4.jpg)
HTML5 & CSS3
![Page 5: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/5.jpg)
WHAT WE'LL COVER‣ Doctype
‣ Elements
‣ Selectors
‣ Properties
‣ Values
![Page 6: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/6.jpg)
PROGRESSIVE ENRICHMENT
![Page 7: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/7.jpg)
DEGRADATION‣ Not everything is supported in every browser
‣ That's ok
‣ Provide fallbacks
![Page 8: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/8.jpg)
PREFIXES
![Page 9: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/9.jpg)
PREFIXES.something { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
![Page 10: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/10.jpg)
HTML5
![Page 11: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/11.jpg)
DOCTYPE
![Page 12: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/12.jpg)
PRE-HTML5 DOCTYPES<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
![Page 13: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/13.jpg)
GROSS
![Page 14: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/14.jpg)
HTML5 DOCTYPE<!DOCTYPE html>
![Page 15: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/15.jpg)
ELEMENTS
![Page 16: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/16.jpg)
SOOOO MANY‣ section
‣ article
‣ aside
‣ hgroup
‣ header
‣ footer
‣ nav
‣ figure
‣ figcaption
‣ video
‣ audio
‣ mark
‣ progress
‣ meter
‣ time
‣ canvas
‣ datalist
‣ and more…
![Page 17: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/17.jpg)
LET'S LOOK AT THESE 3‣ header
‣ section
‣ video
![Page 18: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/18.jpg)
HTML5 VIDEO FORMATS‣ mp4
‣ webm
‣ ogg
‣ Dive into HTML5
![Page 19: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/19.jpg)
CSS3
![Page 20: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/20.jpg)
SELECTORS
![Page 21: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/21.jpg)
AGAIN, SOOOO MANY‣ E[foo^="bar"]
‣ E[foo$="bar"]
‣ E[foo*="bar"]
‣ E:root
‣ E:nth-child(n)
‣ E:nth-last-child(n)
‣ E:last-child
‣ E:first-of-type
‣ E:last-of-type
‣ E:only-child
‣ E:empty
‣ and more…
![Page 22: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/22.jpg)
LET'S LOOK AT THESE 3‣ E:first-child
‣ E:last-child
‣ E:nth-child(n)
![Page 23: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/23.jpg)
PROPERTIES
![Page 24: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/24.jpg)
A WHOLE BUNCH‣ border-radius
‣ border-image
‣ box-shadow
‣ background-size
‣ multiple backgrounds
‣ background-size
‣ text-shadow
‣ animations
‣ transforms
‣ transitions
‣ opacity
‣ and more…
![Page 25: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/25.jpg)
TEXT SHADOWtext-shadow: 1px 1px 1px #fff
text-shadow: x y blur color
![Page 26: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/26.jpg)
BORDER RADIUSborder-radius: 5px
border-radius: length
![Page 27: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/27.jpg)
BOX SHADOWbox-shadow: inset 0 0 5px #000
box-shadow: inset x y blur spread color
![Page 28: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/28.jpg)
OPACITYopacity: 0.5
opacity: alphavalue
![Page 29: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/29.jpg)
TRANSFORMtransform: transform-function
transform: rotate(60deg)
matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY
Transform builder
![Page 30: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/30.jpg)
TRANSITIONtransition: all 2.5s ease-in-out 2s
transition: property duration timing-function delay
Ceasar
![Page 31: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/31.jpg)
ANIMATIONanimation: fly 4.5s linear infinite
animation: name duration timing-function delay count direction
![Page 32: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/32.jpg)
VALUES
![Page 33: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/33.jpg)
LET'S JUST LOOK AT THESE‣ font-face
‣ rgba
‣ gradients
![Page 34: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/34.jpg)
FONT FACE@font-face { font-family: 'ArvoItalic'; src: url('/fonts/arvo-italic-webfont.eot'); src: url('/fonts/arvo-italic-webfont.eot?iefix') format('eot'), url('/fonts/arvo-italic-webfont.woff') format('woff'), url('/fonts/arvo-italic-webfont.ttf') format('truetype'), url('/fonts/arvo-italic-webfont.svg#webfontCl4HytEc') format('svg'); font-weight: normal; font-style: normal;}
![Page 35: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/35.jpg)
RGBAcolor: rgba(0, 0, 0, 0.5)
color: rgba(red, green, blue, alpha)
![Page 36: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/36.jpg)
GRADIENTSbackground: -moz-linear-gradient(top, #f8f0e1 0%, #eddab7 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f0e1), color-stop(100%,#eddab7))
![Page 37: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/37.jpg)
GRADIENT SYNTAX-moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])
-webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);
Gradient generator
![Page 38: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/38.jpg)
RANDOM CSS TIPS
![Page 39: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/39.jpg)
RANDOM CSS TIPS‣ Create a baseline
‣ Alphabetize properties
‣ Comment grouping
‣ Don't touch CSS until your HTML is solid
![Page 40: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/40.jpg)
QUESTIONS?
![Page 41: Add Some Awesome-Sauce](https://reader033.vdocument.in/reader033/viewer/2022051611/54b8b0ca4a7959f3638b45f5/html5/thumbnails/41.jpg)
THANKS!‣ My Site: http://trevordavis.net
‣ Twitter: @trevor_davis
‣ Source: https://github.com/davist11/HP-Demo
‣ Demo: http://hp.trevordavis.net