Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

UX Bootcamp Code Fitness

Anna Debenham
September 26, 2011

UX Bootcamp Code Fitness

Slides from the UX Prototyping in Code workshop http://lanyrd.com/2011/ux-bootcamp-prototying-in-code/sghbr/

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. Switch between code view and full screen preview Include a

    javascript library (we won’t need this today)
  2. Label the website printout with the following: •main heading •paragraph

    •unordered list •ordered list •image •subheading •link
  3. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=”utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> HTML
  4. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> “I’m writing HTML” HTML
  5. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> tag HTML
  6. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> browser information [ HTML
  7. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> which character encoding we’re using HTML
  8. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears in browser tab HTML
  9. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears on page [ HTML
  10. Opening & Closing T ags <h1>A heading</h1> <img src=”image.jpg” />

    <p>Some text</p> <br /> Some self-closing tags: Some tags that close because they contain text: HTML HTML HTML HTML
  11. Unordered List <ul> <li>List item 1</li> <li>List item 2</li> <li>List

    item 3</li> </ul> screenshot from bbc.co.uk/news HTML
  12. Ordered List <ol> <li>List item 1</li> <li>List item 2</li> <li>List

    item 3</li> </ol> screenshot from bbc.co.uk/news HTML
  13. <h1>Heading 1</h1> <p>Paragraph</p> <a href=”http://google.com”>Link</a> <h2>Heading 2</h2> <ul> <li>Unordered List</li>

    </ul> <img src=”http://google.com/image.jpg” /> <ol> <li>Ordered List</li> </ol> HTML HTML HTML HTML HTML HTML HTML
  14. Adding more styles h1 { font-family: Georgia; color: green; }

    p { font-family: Verdana; color: pink; } CSS
  15. Heading <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor

    sit amet. Heading h1 { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. HTML CSS
  16. <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor sit

    amet. Heading h1 { font-family: Georgia; color: green; } p { color: red; font-weight:bold; } Lorem ipsum dolor sit amet. Heading HTML CSS
  17. Try giving everything on your page a different background color

    Open this in another tab for reference: http://goo.gl/tngWK (don’t forget, American spelling)
  18. Heading h1 { font-family: Arial; color: green; } p {

    font-family: Arial; color: green; } Lorem ipsum dolor sit amet. CSS
  19. Heading h1 { font-family: Arial; color: green; } p {

    font-family: Arial; color: green; } Lorem ipsum dolor sit amet. Heading h1, p { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. CSS
  20. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; } CSS HTML
  21. Add some <div> tags to the bits of content on

    your page that you think should be grouped
  22. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; width:250px; } HTML CSS
  23. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; width:50%; } HTML CSS
  24. <div><p>Lorem ipsum</p></div> <div><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div { background-color:yellow;

    … } Dolor sit amet Lorem ipsum we want to target this one Consectetuer adipiscing HTML CSS
  25. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
  26. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing use classes as “hooks” for styling HTML CSS
  27. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } .alert { background-color:red; } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
  28. 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.
  29. 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 {…} HTML CSS
  30. Back to the list <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 HTML
  31. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  32. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  33. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  34. Back to the list <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 3 HTML
  35. div { … } Lorem ipsum dolor sit amet, consectetuer

    adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  36. div { padding-bottom: 20px; } Lorem ipsum dolor sit amet,

    consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  37. div { padding: 20px; } Lorem ipsum dolor sit amet,

    consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  38. div { padding: 20px 20px 0 20px; } Lorem ipsum

    dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  39. div { margin-right: 20px; } Quisque volutpat mattis eros. Nullam

    malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
  40. div { margin: 20px; } Quisque volutpat mattis eros. Nullam

    malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
  41. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 200px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  42. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 210px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  43. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 220px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  44. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 230px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  45. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 240px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px margin: 10px
  46. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 248px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px margin: 10px border:4px border:4px
  47. Add some margin, padding and borders to your page. Tip:

    Try adding a left and right margin to your body. Adding a margin of “auto” to it centres everything.
  48. How floats work nav { width:30%; float:left; } div {

    width:70%; float:left; } div { width:70%; }
  49. How floats work nav { width:30%; float:left; } div {

    width:65%; float:left; } div { width:70%; float:left; }
  50. How floats work nav { width:30%; float:left; } div {

    width:65%; float:right; } div { width:65%; float:right; }
  51. Have a look at: Try creating a 2 column layout

    using floats. How about 3 columns? http://goo.gl/iRwsr
  52. Using more than one class <div class=”alert”> <p>There’s been an

    error</p> </div> .alert { border: 2px solid grey; background-color: yellow; } There has been an error HTML CSS
  53. Using more than one class <div class=”alert error”> <p>There’s been

    an error</p> </div> .alert { border: 2px solid grey; background-color: yellow; } .error { background-color: red; } There has been an error HTML CSS
  54. p.highlight {…} p .highlight {…} .highlight {…} Spacing is important

    Any element with a class of “highlight” Any paragraph with a class of “highlight” Anything with a class of “highlight” that’s within a paragraph CSS CSS CSS
  55. Read CSS backwards div.content p .highlight { … } That’s

    within a div that has a class of “content” CSS
  56. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> p .highlight {

    background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSS
  57. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> span .highlight {

    background-color:yellow; } Specificity Lorem ipsum Dolor sit amet HTML CSS
  58. Breakdown Styles applied to a class will override styles for

    its element <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p> p { color:blue; } HTML CSS
  59. Breakdown Class styles override styles applied to their element <p>Lorem

    ipsum</p> <p class=”prominent”>Lorem ipsum</p> p { color:blue; } .prominent { color:pink; } HTML CSS
  60. Breakdown If an element has 2 classes, the one declared

    last in the stylesheet will override the one declared before it <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> p { color:blue; } .prominent { color:pink; } .highlight { color:green; } HTML CSS
  61. Breakdown If an element has 2 classes, the one declared

    last in the stylesheet will override the one declared before it <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> p { color:blue; } .highlight { color:green; } .prominent { color:pink; } HTML CSS
  62. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .highlight { color:green; } .prominent { color:pink; } HTML CSS
  63. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important .prominent { color:purple; } .prominent { color:pink; } HTML CSS
  64. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important p { color:purple; } .important .prominent { color:grey; } .prominent { color:pink; } HTML CSS
  65. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important p { color:purple; } .important .prominent { color:grey; } .important p.prominent { color:cyan; } .prominent { color:pink; } HTML CSS
  66. Quiz What colour is this paragraph? <p class=”error”>There has been

    an error</p> p { color:blue; } .error { color:red; } HTML CSS
  67. Quiz What colour is this paragraph? <div class=”prominent”> <p class=”error”>There

    has been an error</p> </div> p { color:blue; } .prominent { color:green; } .error { color:red; } HTML CSS
  68. Quiz What colour is this paragraph? <div class=”prominent”> <p class=”error”>There

    has been an error</p> </div> p { color:blue; } .prominent .error { color:hotpink; } .prominent { color:green; } .error { color:red; } HTML CSS
  69. Quiz What colour is this paragraph? <p class=”error prominent”>There has

    been an error</p> p { color:blue; } .prominent { color:green; } .error { color:red; } HTML CSS
  70. Quiz What colour is this paragraph? <p class=”error prominent”>There has

    been an error</p> p { color:blue; } p.prominent { color:green; } .error { color:red; } HTML CSS
  71. Open up the Hackbook: 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 table http://hackbook.hackasaurus.org
  72. <div class=”box1”> <div class=”box2”> </div> </div> .box2 { position: absolute;

    right: 0; top:0; } .box1 .box2 Absolute & Fixed Positioning HTML CSS
  73. Absolute & Fixed Positioning <div class=”box1”> <div class=”box2”> </div> </div>

    .box1 { position: relative } .box2 { position: absolute; right: 0; top: 0; } .box1 .box2 HTML CSS
  74. Absolute & Fixed Positioning <div class=”box1”> <div class=”box2”> </div> </div>

    .box1 { position: relative } .box2 { position: fixed; right: 0; top: 0; } HTML CSS
  75. Flexbox <div class=”row”> <div class=”column”> … </div> <div class=”column”> …

    </div> </div> <div class=”row”> <div class=”column”>…</div> </div> <div class=”column”>…</div> HTML
  76. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> makes columns equal width CSS
  77. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS
  78. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS
  79. Ninja style <div class=”row”> <div class=” column”> … </div> </div>

    <div class=” column”> … </div> <div class=” column”> … </div> <div class=” column”> … </div>
  80. Ninja Style div.last-child {…} a[href$=.pdf] div:nth-child(3) {…} T argets the

    third child div of a parent T argets the last child div of a parent T argets all links that are pointing to a PDF file CSS CSS CSS
  81. Ninja style .row .column:first-child { margin-left:0; } .row .column:last-child {

    margin-right:0; } <div class=”row”> <div class=” column”> … </div> </div> <div class=” column”> … </div> <div class=” column”> … </div> <div class=” column”> … </div> CSS