UX Bootcamp Code Fitness

  • 1,602 views
Uploaded on

Slides from UX Bootcamp Code Fitness and Prototyping in Code workshop. …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,602
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
24
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UX BOOTCAMP Code Fitness
  • 2. MARKUP
  • 3. JAVASCRIPTCSSHTML
  • 4. HTML ≈ IA
  • 5. TASKLabel the website printout with the following:• main heading• paragraph• unordered list• ordered list• image• subheading• link
  • 6. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  • 7. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  • 8. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  • 9. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  • 10. <!DOCTYPE html><html> <head> Browser stuff </head> <body> Visible on the page </body></html>
  • 11. NESTED TAGS<body> <h1>Main heading</h1> <p>Site Content</p></body> body h1 p
  • 12. OPENING AND CLOSING TAGS<h1>A heading</h1><p>Some text</p><img src=”image.jpg” /><br />
  • 13. OPENING AND CLOSING TAGS<div> <h1>A heading</h1> <p>Some text</p></div>
  • 14. BROWSER DEFAULTS
  • 15. PARAGRAPHS<p>This is a paragraph.</p><p>This is another paragraph.</p> screenshot from bbc.co.uk/news
  • 16. HEADINGS<h1>This is a heading</h1><p>This is a paragraph.</p> screenshot from bbc.co.uk/news
  • 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. 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. LINKS<a href=”http://google.com”>Thisis the link text.</a> screenshot from bbc.co.uk/sport
  • 20. IMAGES<img src=”http://nyancat.com/nyancat.jpg” />
  • 21. COMMENTSHTML <!-- This is an HTML comment -->
  • 22. JSBIN
  • 23. TASKMark up the contents of this page:http://jsbin.com/elowes/12/edit#html,live
  • 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. STYLE
  • 26. JAVASCRIPTCSSHTML
  • 27. ADDING CSS STYLES<style> /* This is a CSS comment */</style>
  • 28. HTML <h1>Heading</h1> Heading <p>Lorem ipsum dolor Lorem ipsum dolor sit sit amet.</p> amet.
  • 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. 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. WRITING CSS
  • 32. selectorh1
  • 33. open the curly braceh1 {
  • 34. propertyh1 { font-family
  • 35. colonh1 { font-family:
  • 36. valueh1 { font-family: Georgia
  • 37. semi-colonh1 { font-family: Georgia; ;
  • 38. h1 { font-family: Georgia; color: green;
  • 39. h1 { font-family: Georgia; color: green; } close the curly brace
  • 40. h1 { font-family: Georgia; color: green; }
  • 41. TASKTry giving everything on your page a different backgroundcolor
  • 42. COLORh1 { color: red; }
  • 43. COLORh1 { color: red; }h1 { color: #CC0000; }
  • 44. GROUPING STYLES
  • 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. 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. TASKTry grouping styles to give all your paragraphs andheadings the same color
  • 48. SECTIONING TAGS
  • 49. HTML <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p>HeadingLorem ipsum dolor sit amet.
  • 50. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>HeadingLorem ipsum dolor sit amet.
  • 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. SIZES
  • 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. 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. TASKAdd some <div> tags to parts of your page you think shouldbe grouped
  • 56. STYLE WITH CLASS
  • 57. HTML <div><p>Lorem ipsum</p></div> <div><p>Lorem ipsum</p></div>CSS div { color:blue; }Lorem ipsumLorem ipsum
  • 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. 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. 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. 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. 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. 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. TASKGive your <div>s different styles
  • 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. NAVIGATION
  • 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. 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. 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. •List item 1•List item 2•List item 2 •List item 2A •List item 2B•List item 3
  • 71. TASKAdd some navigation to your page linking to external sites
  • 72. LAYOUT
  • 73. BORDERS, MARGIN ANDPADDING
  • 74. ADD SOME PADDINGCSS section { Lorem ipsum padding-bottom:2%; dolor site amet. }
  • 75. ADD SOME PADDINGCSS section { Lorem ipsum padding:0 0 2% 0; dolor site amet. }
  • 76. ADD SOME PADDINGCSS section { Lorem ipsum padding:2%; dolor site amet. }
  • 77. ADD SOME PADDINGCSS section { Lorem ipsum padding:2%; dolor site amet. }
  • 78. ADD SOME PADDINGCSS section { Lorem ipsum padding:2% 0; dolor site amet. }
  • 79. ADD SOME PADDINGCSS section { Lorem ipsum padding:0 2%; dolor site amet. }
  • 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. Lorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  • 82. border paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  • 83. marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  • 84. marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
  • 85. TASKAdd some margins and paddings to the <div> tags inyour page
  • 86. FLOATS
  • 87. TASKHave a look at http://jsbin.com/awuqaf/5/edit#html,live
  • 88. navdivdiv
  • 89. width:25%width:75%width:75%
  • 90. width:25%float:left;width:75%float:rightwidth:75%float:right
  • 91. width:25% width:75%float:left; float:rightwidth:75%float:right
  • 92. width:25% width:75%float:left; float:right width:75% float:right
  • 93. width:25%float:left;width:75%float:rightwidth:75%float:left
  • 94. width:25% width:75%float:left; float:rightwidth:75%float:left
  • 95. width:25% width:75%float:left; float:rightwidth:75%float:left
  • 96. SPECIFICITY AND THE CASCADE
  • 97. HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS p { color:blue; }
  • 98. HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS .prominent { color:pink; }
  • 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. WHAT COLOR IS THE PARAGRAPH? <p class=”error”>There has been an error</p>p { color:blue; }.error { color:yellow; }
  • 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. 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. 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. ADVANCED KNOWLEDGE
  • 105. ABSOLUTE & FIXEDPOSITIONING
  • 106. TASKHave a look at http://jsbin.com/oconam/3/edit#html,live
  • 107. HTML <div class=”box1”> <div class=”box2”> .box2 </div> </div> .box1CSS.box2 { position: absolute; right: 0; top:0; }
  • 108. HTML <div class=”box1”> <div class=”box2”> .box2 </div> </div> .box1CSS.box1 { position: relative }.box2 { position: absolute; right: 0; top: 0; }
  • 109. HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }
  • 110. HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }