UX Bootcamp Code Fitness

1,862
-1

Published on

Slides from UX Bootcamp Code Fitness and Prototyping in Code workshop.
http://uxbootcamp.org

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,862
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

UX Bootcamp Code Fitness

  1. 1. UX BOOTCAMP Code Fitness
  2. 2. MARKUP
  3. 3. JAVASCRIPTCSSHTML
  4. 4. HTML ≈ IA
  5. 5. TASKLabel the website printout with the following:• main heading• paragraph• unordered list• ordered list• image• subheading• link
  6. 6. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  7. 7. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  8. 8. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  9. 9. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  10. 10. <!DOCTYPE html><html> <head> Browser stuff </head> <body> Visible on the page </body></html>
  11. 11. NESTED TAGS<body> <h1>Main heading</h1> <p>Site Content</p></body> body h1 p
  12. 12. OPENING AND CLOSING TAGS<h1>A heading</h1><p>Some text</p><img src=”image.jpg” /><br />
  13. 13. OPENING AND CLOSING TAGS<div> <h1>A heading</h1> <p>Some text</p></div>
  14. 14. BROWSER DEFAULTS
  15. 15. PARAGRAPHS<p>This is a paragraph.</p><p>This is another paragraph.</p> screenshot from bbc.co.uk/news
  16. 16. HEADINGS<h1>This is a heading</h1><p>This is a paragraph.</p> screenshot from bbc.co.uk/news
  17. 17. UNORDERED LISTS<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ul> screenshot from bbc.co.uk/news
  18. 18. ORDERED LISTS<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ol> screenshot from bbc.co.uk/food
  19. 19. LINKS<a href=”http://google.com”>Thisis the link text.</a> screenshot from bbc.co.uk/sport
  20. 20. IMAGES<img src=”http://nyancat.com/nyancat.jpg” />
  21. 21. COMMENTSHTML <!-- This is an HTML comment -->
  22. 22. JSBIN
  23. 23. TASKMark up the contents of this page:http://jsbin.com/elowes/12/edit#html,live
  24. 24. <h1>Heading 1</h1><p>Paragraph</p><a href=”http://google.com”>Link</a><h2>Heading 2</h2><ul> <li>Unordered List</li></ul><ol> <li>Ordered List</li></ol><img src=”image.jpg” />
  25. 25. STYLE
  26. 26. JAVASCRIPTCSSHTML
  27. 27. ADDING CSS STYLES<style> /* This is a CSS comment */</style>
  28. 28. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.
  29. 29. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.CSS h1 { Heading font-family: Georgia; color: green; Lorem ipsum dolor sit } amet.
  30. 30. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.CSS h1 { Heading font-family: Georgia; color: green; Lorem ipsum dolor } sit amet. p { font-family: Helvetica; color: red; font-weight:bold; }
  31. 31. WRITING CSS
  32. 32. selectorh1
  33. 33. open the curly braceh1 {
  34. 34. propertyh1 { font-family
  35. 35. colonh1 { font-family:
  36. 36. valueh1 { font-family: Georgia
  37. 37. semi-colonh1 { font-family: Georgia; ;
  38. 38. h1 { font-family: Georgia; color: green;
  39. 39. h1 { font-family: Georgia; color: green; } close the curly brace
  40. 40. h1 { font-family: Georgia; color: green; }
  41. 41. TASKTry giving everything on your page a different backgroundcolor
  42. 42. COLORh1 { color: red; }
  43. 43. COLORh1 { color: red; }h1 { color: #CC0000; }
  44. 44. GROUPING STYLES
  45. 45. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.CSS h1 { Heading font-family: Georgia; color: green; Lorem ipsum dolor } sit amet. p { font-family: Georgia; color: green; }
  46. 46. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.CSS h1, p { Heading font-family: Georgia; color: green; Lorem ipsum dolor } sit amet.
  47. 47. TASKTry grouping styles to give all your paragraphs andheadings the same color
  48. 48. SECTIONING TAGS
  49. 49. HTML <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p>HeadingLorem ipsum dolor sit amet.
  50. 50. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>HeadingLorem ipsum dolor sit amet.
  51. 51. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; }HeadingLorem ipsum dolor sit amet.
  52. 52. SIZES
  53. 53. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; width:250px; }HeadingLorem ipsum dolorsit amet.
  54. 54. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; width:50%; }HeadingLorem ipsum dolor sit amet.
  55. 55. TASKAdd some <div> tags to parts of your page you think shouldbe grouped
  56. 56. STYLE WITH CLASS
  57. 57. HTML <div><p>Lorem ipsum</p></div> <div><p>Lorem ipsum</p></div>CSS div { color:blue; }Lorem ipsumLorem ipsum
  58. 58. HTML <div><p>Lorem ipsum</p></div> <div class=”callout”><p>Lorem ipsum</p></div>CSS div { color:blue; } .callout { color:pink; }Lorem ipsumLorem ipsum
  59. 59. HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”> <p>Lorem ipsum</p> </div>CSS .callout { color:pink; }Lorem ipsumLorem ipsum
  60. 60. HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”> <p>Lorem ipsum</p> </div>CSS div.callout { color:pink; }Lorem ipsumLorem ipsum
  61. 61. HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”> <p>Lorem ipsum</p> </div>CSS p .callout { color:pink; }Lorem ipsumLorem ipsum
  62. 62. SPACING IS IMPORTANT Any element with a.callout class of “callout” Any div with a class ofdiv.callout “callout” Any element with adiv .callout class of “callout” that’s within a div
  63. 63. CLASS TIPS• When using a class, think about what it is rather than how it looks• Don’t start with a numeral or symbol• You can use a class more than once, and have different styles for it depending on where it’s nested.
  64. 64. TASKGive your <div>s different styles
  65. 65. IDS• Can only be used once on a page• Used for navigating between sections on the same page <div class=”callout” id=”content”> <p>Lorem ipsum</p> </div> #content {…}
  66. 66. NAVIGATION
  67. 67. BACK TO THE LISTHTML <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>•List item 1•List item 2•List item 3
  68. 68. NAVIGATIONHTML <nav> <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a></li> <li><a href=”…”>List item 3</a></li> </ul> </nav>•List item 1•List item 2•List item 2
  69. 69. NESTING LISTSHTML <ul> <li>List item 1</li> <li>List item 2 <ul> <li>List item 2A</li> <li>List item 2B</li> </ul> </li> <li>List item 3</li> </ul>•List item 1•List item 2 •List item 2A •List item 2B•List item 3
  70. 70. •List item 1•List item 2•List item 2 •List item 2A •List item 2B•List item 3
  71. 71. TASKAdd some navigation to your page linking to external sites
  72. 72. LAYOUT
  73. 73. BORDERS, MARGIN ANDPADDING
  74. 74. ADD SOME PADDINGCSS section { Lorem ipsum padding-bottom:2%; dolor site amet. }
  75. 75. ADD SOME PADDINGCSS section { Lorem ipsum padding:0 0 2% 0; dolor site amet. }
  76. 76. ADD SOME PADDINGCSS section { Lorem ipsum padding:2%; dolor site amet. }
  77. 77. ADD SOME PADDINGCSS section { Lorem ipsum padding:2%; dolor site amet. }
  78. 78. ADD SOME PADDINGCSS section { Lorem ipsum padding:2% 0; dolor site amet. }
  79. 79. ADD SOME PADDINGCSS section { Lorem ipsum padding:0 2%; dolor site amet. }
  80. 80. ADD SOME MARGINS Lorem ipsum Lorem ipsum dolor site amet. dolor site amet.CSS section { margin:2%; } Lorem ipsum Lorem ipsum dolor site amet. dolor site amet.
  81. 81. Lorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  82. 82. border paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  83. 83. marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  84. 84. marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  85. 85. TASKAdd some margins and paddings to the <div> tags inyour page
  86. 86. FLOATS
  87. 87. TASKHave a look at http://jsbin.com/awuqaf/5/edit#html,live
  88. 88. navdivdiv
  89. 89. width:25%width:75%width:75%
  90. 90. width:25%float:left;width:75%float:rightwidth:75%float:right
  91. 91. width:25% width:75%float:left; float:rightwidth:75%float:right
  92. 92. width:25% width:75%float:left; float:right width:75% float:right
  93. 93. width:25%float:left;width:75%float:rightwidth:75%float:left
  94. 94. width:25% width:75%float:left; float:rightwidth:75%float:left
  95. 95. width:25% width:75%float:left; float:rightwidth:75%float:left
  96. 96. SPECIFICITY AND THE CASCADE
  97. 97. HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS p { color:blue; }
  98. 98. HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS .prominent { color:pink; }
  99. 99. HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS p { color:blue; } .prominent { color:pink; }
  100. 100. WHAT COLOR IS THE PARAGRAPH? <p class=”error”>There has been an error</p>p { color:blue; }.error { color:yellow; }
  101. 101. WHAT COLOR IS THE PARAGRAPH? <p class=”error prominent”>There has been an error</p>p { color:blue; }.prominent { color:pink; }.error { color:yellow; }
  102. 102. WHAT COLOR IS THE PARAGRAPH? <div class=”error”> <p class=”prominent”>There has been an error</p> </div>p { color:blue; }.prominent { color:pink; }.error { color:yellow; }
  103. 103. TASK Open up the Hackbook http://hackasaurus.org/hackbook/ and try the following tasks:• Apply a background image to the whole page• Make your navigation look more realistic using background colors and borders• Add a 3rd column to your page• Add a table
  104. 104. ADVANCED KNOWLEDGE
  105. 105. ABSOLUTE & FIXEDPOSITIONING
  106. 106. TASKHave a look at http://jsbin.com/oconam/3/edit#html,live
  107. 107. HTML <div class=”box1”> <div class=”box2”> .box2 </div> </div> .box1CSS.box2 { position: absolute; right: 0; top:0; }
  108. 108. HTML <div class=”box1”> <div class=”box2”> .box2 </div> </div> .box1CSS.box1 { position: relative }.box2 { position: absolute; right: 0; top: 0; }
  109. 109. HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }
  110. 110. HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×