CSS3 and jQuery for Designers
- 1. CSS3 & jQuery for Designers Tuesday, 3 April 12
- 2. Hello! Tuesday, 3 April 12
- 3. What I’ll be teaching today Tuesday, 3 April 12
- 4. Why this is important to learn ...and why you are awesomer than other web designers Tuesday, 3 April 12
- 5. How I’ll be teaching this class Tuesday, 3 April 12
- 6. First of all... HTML5? Tuesday, 3 April 12
- 7. How to create a HTML5 site in one line of code... Tuesday, 3 April 12
- 8. <!DOCTYPE html> Tuesday, 3 April 12
- 9. A collection of new features for HTML Tuesday, 3 April 12
- 10. HTML5’s new features • New semantic tags, e.g. <nav>, <article>, <footer> • Audio and video capacity • Canvas • Geolocation • Drag and drop • History APIs • Offline mode • Data storage and File APIs Tuesday, 3 April 12
- 11. Do I reeeeally need to know this stuff though? Tuesday, 3 April 12
- 12. So, this CSS3 business. Tuesday, 3 April 12
- 13. What you’ll learn about CSS3 • Colours • Fonts • Text shadow • Transforms • Border radius • Transitions • Gradients • Animation • Box shadow Tuesday, 3 April 12
- 14. What you won’t learn • Generated content • Masking • Multi-backgrounds • New measurement units • Image borders • Improved text flows • Background sizing • Multi column layouts • Reflections • Responsive design Tuesday, 3 April 12
- 15. Beware: Experimental Stuff Tuesday, 3 April 12
- 16. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; Tuesday, 3 April 12
- 17. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; Tuesday, 3 April 12
- 18. -webkit-box-sizing: border-box; Tuesday, 3 April 12
- 19. But don’t do this on live sites, okay??? Or someone may kill kittens. Tuesday, 3 April 12
- 20. Let’s begin! Tuesday, 3 April 12
- 21. Colours Tuesday, 3 April 12
- 22. Text shadow Tuesday, 3 April 12
- 23. Box shadow Tuesday, 3 April 12
- 24. Border radius Tuesday, 3 April 12
- 25. Gradients Tuesday, 3 April 12
- 26. Fonts Tuesday, 3 April 12
- 27. Transitions Tuesday, 3 April 12
- 28. Transforms Tuesday, 3 April 12
- 29. Animations Tuesday, 3 April 12
- 30. Putting it together Tuesday, 3 April 12
- 31. A commerical break Tuesday, 3 April 12
- 32. jQuery? Tuesday, 3 April 12
- 33. jQuery stops you writing a lot of code for simple things all the time Tuesday, 3 April 12
- 34. How to add a class in pure Javascript Tuesday, 3 April 12
- 36. What’s in jQuery? • Selecting • Events • Attributes • Animation • Traversing • Ajax • Manipulation • JS Utilities Tuesday, 3 April 12
- 37. Bo Selector. Tuesday, 3 April 12
- 38. $ Tuesday, 3 April 12
- 39. Just a function. The $ doesn’t mean anything special. Tuesday, 3 April 12
- 40. What does it mean? Double rainbow? Tuesday, 3 April 12
- 41. Uses CSS engine to pick elements from the HTML Tuesday, 3 April 12
- 42. #header ul li { background: #eee; } $(“#header ul li”) Tuesday, 3 April 12
- 43. #header ul li { background: #eee; } $(“#header ul li”) Tuesday, 3 April 12
- 44. #header ul > li a:nth-child(2n) { background: #eee; } $(“#header ul > li a:nth-child(2n)”) Tuesday, 3 April 12
- 45. $(“#header ul li”).addClass(“selected”); $(“h1”).css(“color”, “black”); $(“img”).attr(“src”, “cat.jpg”); Tuesday, 3 April 12
- 46. $(“h1”).css(“color”, “black”) .addClass(“selected”) .fadeIn(500); Tuesday, 3 April 12
- 47. $(“h1”).parent() .next() .find(“li”) .addClass(“selected”); Tuesday, 3 April 12
- 48. $(“h1”).on(“click”, function () { // Do something when clicked }); Tuesday, 3 April 12
- 49. Examples Tuesday, 3 April 12
- 50. Tools worth using Tuesday, 3 April 12
- 51. Modernizr http://modernizr.com/ Tuesday, 3 April 12
- 52. body.rgba h1 { color: rgba(...); if (Modernizr.rgba) { } // has rgba } else { body.no-rgba h1 { // no rgba color: #000; } } Tuesday, 3 April 12
- 53. SASS http://sass-lang.com/ Tuesday, 3 April 12
- 54. h1 { h1 { color: #f00; color: #f00; } a { h1 a { color: #000; color: #000; } } } Tuesday, 3 April 12
- 55. Coffeescript http://coffeescript.org/ Tuesday, 3 April 12
- 56. $(“h1”).on(“click”, function () { $(this).addClass(“selected”); }) $(“h1”).on “click”, -> $(@).addClass “selected” Tuesday, 3 April 12
- 57. Codekit http://incident57.com/codekit/ Tuesday, 3 April 12
- 58. In closing Tuesday, 3 April 12
- 59. Thanks! Tuesday, 3 April 12
- 60. Email: rik@lomalogue.com Twitter: @riklomas Tuesday, 3 April 12