0
UX BOOTCAMP  Code Fitness
MARKUP
JAVASCRIPTCSSHTML
HTML ≈ IA
TASKLabel the website printout with the following:• main heading• paragraph• unordered list• ordered list• image• subheadi...
<!DOCTYPE html><html>    <head>          <meta charset=“utf-8” />          <title>Site name</title>    </head>    <body>  ...
<!DOCTYPE html><html>    <head>          <meta charset=“utf-8” />          <title>Site name</title>    </head>    <body>  ...
<!DOCTYPE html><html>    <head>          <meta charset=“utf-8” />          <title>Site name</title>    </head>    <body>  ...
<!DOCTYPE html><html>    <head>          <meta charset=“utf-8” />          <title>Site name</title>    </head>    <body>  ...
<!DOCTYPE html><html>    <head>          Browser stuff    </head>    <body>          Visible on the page    </body></html>
NESTED TAGS<body>   <h1>Main heading</h1>   <p>Site Content</p></body>           body     h1           p
OPENING AND CLOSING TAGS<h1>A heading</h1><p>Some text</p><img src=”image.jpg” /><br />
OPENING AND CLOSING TAGS<div>  <h1>A heading</h1>  <p>Some text</p></div>
BROWSER DEFAULTS
PARAGRAPHS<p>This is a paragraph.</p><p>This is another paragraph.</p>                       screenshot from bbc.co.uk/news
HEADINGS<h1>This is a heading</h1><p>This is a paragraph.</p>                      screenshot from bbc.co.uk/news
UNORDERED LISTS<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ul>                        screenshot ...
ORDERED LISTS<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ol>                        screenshot fr...
LINKS<a href=”http://google.com”>Thisis the link text.</a>                      screenshot from bbc.co.uk/sport
IMAGES<img src=”http://nyancat.com/nyancat.jpg” />
COMMENTSHTML <!-- This is an HTML comment -->
JSBIN
TASKMark up the contents of this page:http://jsbin.com/elowes/12/edit#html,live
<h1>Heading 1</h1><p>Paragraph</p><a href=”http://google.com”>Link</a><h2>Heading 2</h2><ul> <li>Unordered List</li></ul><...
STYLE
JAVASCRIPTCSSHTML
ADDING CSS STYLES<style> /* This is a CSS comment */</style>
HTML <h1>Heading</h1>       Heading <p>Lorem ipsum dolor   Lorem ipsum dolor sit sit amet.</p>          amet.
HTML <h1>Heading</h1>         Heading <p>Lorem ipsum dolor     Lorem ipsum dolor sit sit amet.</p>            amet.CSS h1 ...
HTML <h1>Heading</h1>         Heading <p>Lorem ipsum dolor     Lorem ipsum dolor sit sit amet.</p>            amet.CSS h1 ...
WRITING CSS
selectorh1
open the curly braceh1 {
propertyh1 { font-family
colonh1 { font-family:
valueh1 { font-family: Georgia
semi-colonh1 { font-family: Georgia;                     ;
h1 { font-family: Georgia; color: green;
h1 { font-family: Georgia; color: green; }   close the curly brace
h1 { font-family: Georgia; color: green; }
TASKTry giving everything on your page a different backgroundcolor
COLORh1 { color: red; }
COLORh1 { color: red; }h1 { color: #CC0000; }
GROUPING STYLES
HTML <h1>Heading</h1>         Heading <p>Lorem ipsum dolor     Lorem ipsum dolor sit sit amet.</p>            amet.CSS h1 ...
HTML <h1>Heading</h1>         Heading <p>Lorem ipsum dolor     Lorem ipsum dolor sit sit amet.</p>            amet.CSS h1,...
TASKTry grouping styles to give all your paragraphs andheadings the same color
SECTIONING TAGS
HTML <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p>HeadingLorem ipsum dolor sit amet.
HTML <div>   <h1>Heading</h1>   <p>Lorem ipsum dolor sit amet.</p> </div>HeadingLorem ipsum dolor sit amet.
HTML <div>   <h1>Heading</h1>   <p>Lorem ipsum dolor sit amet.</p> </div>CSS div {    background-color:pink;    color:whit...
SIZES
HTML <div>   <h1>Heading</h1>   <p>Lorem ipsum dolor sit amet.</p> </div>CSS div {    background-color:pink;    color:whit...
HTML <div>   <h1>Heading</h1>   <p>Lorem ipsum dolor sit amet.</p> </div>CSS div {    background-color:pink;    color:whit...
TASKAdd some <div> tags to parts of your page you think shouldbe grouped
STYLE WITH CLASS
HTML <div><p>Lorem ipsum</p></div> <div><p>Lorem ipsum</p></div>CSS div { color:blue; }Lorem ipsumLorem ipsum
HTML <div><p>Lorem ipsum</p></div> <div class=”callout”><p>Lorem ipsum</p></div>CSS div { color:blue; } .callout { color:p...
HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”>  <p>Lorem ipsum</p> </div>CSS .callout { color:...
HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”>  <p>Lorem ipsum</p> </div>CSS div.callout { col...
HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”>  <p>Lorem ipsum</p> </div>CSS p .callout { colo...
SPACING IS IMPORTANT               Any element with a.callout       class of “callout”               Any div with a class ...
CLASS TIPS• When using a class, think about what it is rather than how it  looks• Don’t start with a numeral or symbol• Yo...
TASKGive your <div>s different styles
IDS• Can only be used once on a page• Used for navigating between sections on the same page   <div class=”callout” id=”con...
NAVIGATION
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•...
NAVIGATIONHTML <nav>  <ul>    <li><a href=”…”>List item 1</a></li>    <li><a href=”…”>List item 2</a></li>    <li><a href=...
NESTING LISTSHTML  <ul>     <li>List item 1</li>     <li>List item 2        <ul>             <li>List item 2A</li>        ...
•List item 1•List item 2•List item 2  •List item 2A  •List item 2B•List item 3
TASKAdd some navigation to your page linking to external sites
LAYOUT
BORDERS, MARGIN ANDPADDING
ADD SOME PADDINGCSS section {                      Lorem ipsum   padding-bottom:2%;                      dolor site amet. ...
ADD SOME PADDINGCSS section {                       Lorem ipsum   padding:0 0 2% 0;                       dolor site amet....
ADD SOME PADDINGCSS section {                   Lorem ipsum   padding:2%;                   dolor site amet.   }
ADD SOME PADDINGCSS section {                   Lorem ipsum   padding:2%;                   dolor site amet.   }
ADD SOME PADDINGCSS section {                   Lorem ipsum   padding:2% 0;                   dolor site amet.   }
ADD SOME PADDINGCSS section {                   Lorem ipsum   padding:0 2%;                   dolor site amet.   }
ADD SOME MARGINS       Lorem ipsum        Lorem ipsum       dolor site amet.   dolor site amet.CSS section {   margin:2%; ...
Lorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
border                    paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis...
marginborder                    paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpat...
marginborder                    paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpat...
TASKAdd some margins and paddings to the <div> tags inyour page
FLOATS
TASKHave a look at http://jsbin.com/awuqaf/5/edit#html,live
navdivdiv
width:25%width:75%width:75%
width:25%float:left;width:75%float:rightwidth:75%float:right
width:25%     width:75%float:left;              float:rightwidth:75%float:right
width:25%     width:75%float:left;              float:right              width:75%              float:right
width:25%float:left;width:75%float:rightwidth:75%float:left
width:25%     width:75%float:left;              float:rightwidth:75%float:left
width:25%     width:75%float:left;              float:rightwidth:75%float:left
SPECIFICITY AND THE CASCADE
HTML      <h2 class=”prominent”>Heading</h2>      <p>Lorem ipsum</p>      <p class=”prominent”>Lorem ipsum</p>CSS p { colo...
HTML      <h2 class=”prominent”>Heading</h2>      <p>Lorem ipsum</p>      <p class=”prominent”>Lorem ipsum</p>CSS .promine...
HTML      <h2 class=”prominent”>Heading</h2>      <p>Lorem ipsum</p>      <p class=”prominent”>Lorem ipsum</p>CSS p { colo...
WHAT COLOR IS THE PARAGRAPH? <p class=”error”>There has been an error</p>p { color:blue; }.error { color:yellow; }
WHAT COLOR IS THE PARAGRAPH? <p class=”error prominent”>There has been an error</p>p { color:blue; }.prominent { color:pin...
WHAT COLOR IS THE PARAGRAPH? <div class=”error”>   <p class=”prominent”>There has been an error</p> </div>p { color:blue; ...
TASK Open up the Hackbook http://hackasaurus.org/hackbook/ and try the following tasks:• Apply a background image to the w...
ADVANCED KNOWLEDGE
ABSOLUTE & FIXEDPOSITIONING
TASKHave a look at http://jsbin.com/oconam/3/edit#html,live
HTML <div class=”box1”>   <div class=”box2”>                                .box2   </div> </div>                        ....
HTML <div class=”box1”>   <div class=”box2”>       .box2   </div> </div>                        .box1CSS.box1 {  position:...
HTML <div class=”box1”>   <div class=”box2”>   </div> </div>CSS.box1 {  position: relative  }.box2 {  position: fixed;  ri...
HTML <div class=”box1”>   <div class=”box2”>   </div> </div>CSS.box1 {  position: relative  }.box2 {  position: fixed;  ri...
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
UX Bootcamp Code Fitness
Upcoming SlideShare
Loading in...5
×

UX Bootcamp Code Fitness

1,770

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,770
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

Transcript of "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.

×