• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UX Bootcamp Code Fitness
 

UX Bootcamp Code Fitness

on

  • 1,709 views

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

Statistics

Views

Total Views
1,709
Views on SlideShare
1,638
Embed Views
71

Actions

Likes
2
Downloads
18
Comments
1

1 Embed 71

http://lanyrd.com 71

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    UX Bootcamp Code Fitness UX Bootcamp Code Fitness Presentation Transcript

    • UX BOOTCAMP Code Fitness
    • MARKUP
    • JAVASCRIPTCSSHTML
    • HTML ≈ IA
    • TASKLabel the website printout with the following:• main heading• paragraph• unordered list• ordered list• image• subheading• link
    • <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
    • <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
    • <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
    • <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
    • <!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 from bbc.co.uk/news
    • 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
    • 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><ol> <li>Ordered List</li></ol><img src=”image.jpg” />
    • 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 { Heading font-family: Georgia; color: green; Lorem ipsum dolor sit } amet.
    • 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; }
    • 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 { Heading font-family: Georgia; color: green; Lorem ipsum dolor } sit amet. p { font-family: Georgia; color: green; }
    • 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.
    • 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:white; }HeadingLorem ipsum dolor sit amet.
    • SIZES
    • 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.
    • 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.
    • 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:pink; }Lorem ipsumLorem ipsum
    • HTML <p>Lorem <span class=”callout”>ipsum</span></p> <div class=”callout”> <p>Lorem ipsum</p> </div>CSS .callout { color:pink; }Lorem ipsumLorem ipsum
    • 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
    • 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
    • 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
    • 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.
    • 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=”content”> <p>Lorem ipsum</p> </div> #content {…}
    • 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•List item 3
    • 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
    • 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
    • •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 Lorem ipsum dolor site amet. dolor site amet.
    • Lorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
    • border paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
    • marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
    • marginborder paddingLorem ipsum dolor sitamet, consectetueradipiscing elit. Donecodio. Quisque volutpatmattis eros.
    • 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 { color:blue; }
    • HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS .prominent { color:pink; }
    • HTML <h2 class=”prominent”>Heading</h2> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p>CSS p { color:blue; } .prominent { color:pink; }
    • 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:pink; }.error { color:yellow; }
    • 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; }
    • 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
    • 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> .box1CSS.box2 { position: absolute; right: 0; top:0; }
    • HTML <div class=”box1”> <div class=”box2”> .box2 </div> </div> .box1CSS.box1 { position: relative }.box2 { position: absolute; right: 0; top: 0; }
    • HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }
    • HTML <div class=”box1”> <div class=”box2”> </div> </div>CSS.box1 { position: relative }.box2 { position: fixed; right: 0; top: 0; }