It's Shiny!

Talk introducing basics of HTML5 and CSS3.

Given at Girl Geek Dinner meetups June 26 2012.

Transcript

1. It’s Shiny! Peggy @pyko
2. HTML5 & CSS3
3. HTML
7. HTML5
8. <article> <header> <h2>The Blackbird - Blurb</h2> <p>by Lexicon on June 21, 2012</p> </header> <p> Seventeen and on the brink of stepping into society, Serah is well- known in Porthaven as the spoiled and insufferable daughter of a merchant family. By night she is the notorious Blackbird, a thief responsible for... </p> </article>
11. CSS3
12. body { padding: 30px; font-size: 16px; } .by-line { color: #333; margin: 5px 10px; }
16. type .class #id
17. <article> <header> <h2>The Blackbird - Blurb</h2> <p>by Lexicon on June 21, 2012</p> </header> <p> Seventeen and on the brink of stepping into society, Serah is well- known in Porthaven as the spoiled and insufferable daughter of a merchant family. By night she is the notorious Blackbird, a thief responsible for... </p> </article> article { border: 1px solid #000; border-radius: 10px; background: #BDD4DE; }
19. <h2>The Blackbird - Blurb</h2> <p>by Lexicon on June 21, 2012</p> </header> <div class=”entry-content”> <p>Seventeen and on the brink of stepping into society, Serah is well-known in Porthaven as the spoiled and insufferable daughter of a merchant family. By night she is the notorious Blackbird, a thief responsible for...</p> <p>Van is a young trav who reminds Serah of someone from her past...</p> </div> </article> .entry-content { padding: 0 10px; }
21. <article> <header> <h2>The Blackbird - Blurb</h2> <p>by Lexicon on June 21, 2012</p> </header> <p> Seventeen and on the brink of stepping into society, Serah is well- known in Porthaven as the spoiled and insufferable daughter of a merchant family. By night she is the notorious Blackbird, a thief responsible for... </p> </article> article header { padding: 10px; border-bottom: 2px solid #3F5765; }
26. CSS IS AWESOME
29. http://modernizr.com http://caniuse.com
31. http://twitter.github.com/bootstrap
32. http://www.html5doctor.com http://www.html5rocks.com
33. http://css-tricks.com http://webdesignerwall.com
34. http://smashingmagazine.com http://alistapart.com
35. http://kuler.adobe.com http://colorschemedesigner.com
36. http://www.thetoolbox.cc
37. Cmd/Ctrl Shift C
42. images thanks to: http://www.flickr.com/photos/hyperspace/228139375/ http://www.flickr.com/photos/heipei/24041156/ http://www.flickr.com/photos/beth19/4703932712/ http://www.flickr.com/photos/magnuscanis/526247731/ http://www.flickr.com/photos/27282406@N03/4134166721/ http://paulirish.com/2010/high-res-browser-icons/
43. story text thanks to: lexicon www.cloudedmemories.com