CSS3 and jQuery for Designers

2,274 views

Published on

Code: http://cl.ly/FYus
Handout: http://f.cl.ly/items/420d0j2c0f022J0v3V1X/handout.pdf

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,274
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS3 and jQuery for Designers

  1. 1. CSS3 & jQuery for DesignersTuesday, 3 April 12
  2. 2. Hello!Tuesday, 3 April 12
  3. 3. What I’ll be teaching todayTuesday, 3 April 12
  4. 4. Why this is important to learn ...and why you are awesomer than other web designersTuesday, 3 April 12
  5. 5. How I’ll be teaching this classTuesday, 3 April 12
  6. 6. First of all... HTML5?Tuesday, 3 April 12
  7. 7. How to create a HTML5 site in one line of code...Tuesday, 3 April 12
  8. 8. <!DOCTYPE html>Tuesday, 3 April 12
  9. 9. A collection of new features for HTMLTuesday, 3 April 12
  10. 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 APIsTuesday, 3 April 12
  11. 11. Do I reeeeally need to know this stuff though?Tuesday, 3 April 12
  12. 12. So, this CSS3 business.Tuesday, 3 April 12
  13. 13. What you’ll learn about CSS3 • Colours • Fonts • Text shadow • Transforms • Border radius • Transitions • Gradients • Animation • Box shadowTuesday, 3 April 12
  14. 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 designTuesday, 3 April 12
  15. 15. Beware: Experimental StuffTuesday, 3 April 12
  16. 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. 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. 18. -webkit-box-sizing: border-box;Tuesday, 3 April 12
  19. 19. But don’t do this on live sites, okay??? Or someone may kill kittens.Tuesday, 3 April 12
  20. 20. Let’s begin!Tuesday, 3 April 12
  21. 21. ColoursTuesday, 3 April 12
  22. 22. Text shadowTuesday, 3 April 12
  23. 23. Box shadowTuesday, 3 April 12
  24. 24. Border radiusTuesday, 3 April 12
  25. 25. GradientsTuesday, 3 April 12
  26. 26. FontsTuesday, 3 April 12
  27. 27. TransitionsTuesday, 3 April 12
  28. 28. TransformsTuesday, 3 April 12
  29. 29. AnimationsTuesday, 3 April 12
  30. 30. Putting it togetherTuesday, 3 April 12
  31. 31. A commerical breakTuesday, 3 April 12
  32. 32. jQuery?Tuesday, 3 April 12
  33. 33. jQuery stops you writing a lot of code for simple things all the timeTuesday, 3 April 12
  34. 34. How to add a class in pure JavascriptTuesday, 3 April 12
  35. 35. $(“a”).addClass(“hello”);Tuesday, 3 April 12
  36. 36. What’s in jQuery? • Selecting • Events • Attributes • Animation • Traversing • Ajax • Manipulation • JS UtilitiesTuesday, 3 April 12
  37. 37. Bo Selector.Tuesday, 3 April 12
  38. 38. $Tuesday, 3 April 12
  39. 39. Just a function. The $ doesn’t mean anything special.Tuesday, 3 April 12
  40. 40. What does it mean? Double rainbow?Tuesday, 3 April 12
  41. 41. Uses CSS engine to pick elements from the HTMLTuesday, 3 April 12
  42. 42. #header ul li { background: #eee; } $(“#header ul li”)Tuesday, 3 April 12
  43. 43. #header ul li { background: #eee; } $(“#header ul li”)Tuesday, 3 April 12
  44. 44. #header ul > li a:nth-child(2n) { background: #eee; } $(“#header ul > li a:nth-child(2n)”)Tuesday, 3 April 12
  45. 45. $(“#header ul li”).addClass(“selected”); $(“h1”).css(“color”, “black”); $(“img”).attr(“src”, “cat.jpg”);Tuesday, 3 April 12
  46. 46. $(“h1”).css(“color”, “black”) .addClass(“selected”) .fadeIn(500);Tuesday, 3 April 12
  47. 47. $(“h1”).parent() .next() .find(“li”) .addClass(“selected”);Tuesday, 3 April 12
  48. 48. $(“h1”).on(“click”, function () { // Do something when clicked });Tuesday, 3 April 12
  49. 49. ExamplesTuesday, 3 April 12
  50. 50. Tools worth usingTuesday, 3 April 12
  51. 51. Modernizr http://modernizr.com/Tuesday, 3 April 12
  52. 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. 53. SASS http://sass-lang.com/Tuesday, 3 April 12
  54. 54. h1 { h1 { color: #f00; color: #f00; } a { h1 a { color: #000; color: #000; } } }Tuesday, 3 April 12
  55. 55. Coffeescript http://coffeescript.org/Tuesday, 3 April 12
  56. 56. $(“h1”).on(“click”, function () { $(this).addClass(“selected”); }) $(“h1”).on “click”, -> $(@).addClass “selected”Tuesday, 3 April 12
  57. 57. Codekit http://incident57.com/codekit/Tuesday, 3 April 12
  58. 58. In closingTuesday, 3 April 12
  59. 59. Thanks!Tuesday, 3 April 12
  60. 60. Email: rik@lomalogue.com Twitter: @riklomasTuesday, 3 April 12

×