UX Bootcamp Code Fitness

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

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” />

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.

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% 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.

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

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; }

UX Bootcamp Code Fitness

by Anna Debenham

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 61

Statistics

UX Bootcamp Code Fitness Presentation Transcript