Download as PDF, PPTX
CSS3 and jQuery for Designers
- 1. CSS3 & jQuery for Designers Tuesday, 3 April 12
- 2.
- 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 beteaching this class Tuesday, 3 April 12
- 6. First of all... HTML5? Tuesday, 3 April 12
- 7. How to createa HTML5 site in one line of code... Tuesday, 3 April 12
- 8. <!DOCTYPE html> Tuesday, 3April 12
- 9. A collection ofnew 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 reeeeallyneed to know this stuff though? Tuesday, 3 April 12
- 12. So, this CSS3business. Tuesday, 3 April 12
- 13. What you’ll learnabout CSS3 • Colours • Fonts • Text shadow • Transforms • Border radius • Transitions • Gradients • Animation • Box shadow Tuesday, 3 April 12
- 14. What you won’tlearn • 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.
- 19. But don’t dothis on live sites, okay??? Or someone may kill kittens. Tuesday, 3 April 12
- 20. Let’s begin! Tuesday, 3April 12
- 21.
- 22. Text shadow Tuesday, 3April 12
- 23. Box shadow Tuesday, 3April 12
- 24. Border radius Tuesday, 3April 12
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. Putting it together Tuesday,3 April 12
- 31. A commerical break Tuesday,3 April 12
- 32.
- 33. jQuery stops youwriting a lot of code for simple things all the time Tuesday, 3 April 12
- 34. How to adda class in pure Javascript Tuesday, 3 April 12
- 35.
- 36. What’s in jQuery? • Selecting • Events • Attributes • Animation • Traversing • Ajax • Manipulation • JS Utilities Tuesday, 3 April 12
- 37. Bo Selector. Tuesday, 3April 12
- 38.
- 39. Just a function. The $ doesn’t mean anything special. Tuesday, 3 April 12
- 40. What does itmean? Double rainbow? Tuesday, 3 April 12
- 41. Uses CSS engineto 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.
- 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, 3April 12
- 59.
- 60. Email: rik@lomalogue.com Twitter: @riklomas Tuesday, 3 April 12