UX Bootcamp Code Fitness

UX BOOTCAMP Code Fitness

Before we get started

http://jsbin.com

Javascript window HTML+ CSS window Preview window (automatically updates) [
[ [ View/hide windows X

Switch between code view and full screen preview Include a
javascript library (we won’t need this today)

Save a branch This number changes Shareable link!

Interaction (Javascript) Styles (CSS) Markup (HTML)

HTML ≈ IA

Browser Defaults

Label the website printout with the following: •main heading •paragraph
•unordered list •ordered list •image •subheading •link

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

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

/> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> tag HTML

/> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> browser information [ HTML

/> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> which character encoding we’re using HTML

/> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears in browser tab HTML

/> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears on page [ HTML

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

Opening & Closing T ags <body> <h1>A heading</h1> <p>Some text</p>
</body> body h1 p HTML

Paragraphs <p>This is a paragraph.</p> <p>This is another paragraph.</p> screenshot
from bbc.co.uk/news HTML

Headings <h1>This is a heading</h1> <p>This is a paragraph.</p> screenshot
from bbc.co.uk/news HTML

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

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

Links <a href=”http://google.com”>This is the link text.</a> screenshot from bbc.co.uk/sport
HTML

Images <img src=”http://nyancat.com/ nyancat.jpg” /> HTML

Comments  HTML

Mark up the contents of this page: http://goo.gl/y2pqJ

<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

Interaction (Javascript) Styles (CSS) Markup (HTML)

Writing CSS <head> <meta charset=utf-8> <title>CSS Flexbox prototype</title> <style> …
</style> </head> HTML

h1 “selector” Writing CSS CSS

h1 { open the curly brace Writing CSS CSS

h1 { font-family “property” Writing CSS CSS

h1 { font-family: add a colon Writing CSS CSS

h1 { font-family: Georgia Writing CSS “value” CSS

h1 { font-family: Georgia; finish with a semi-colon Writing CSS
CSS

h1 { font-family: Georgia; color: green; start a new line,
add more styles Writing CSS CSS

h1 { font-family: Georgia; color: green; } close the curly
brace Writing CSS CSS

h1 { font-family: Georgia; color: green; } Writing CSS CSS

Adding more styles h1 { font-family: Georgia; color: green; }
p { font-family: Verdana; color: pink; } CSS

Comments  /* This
is a CSS comment */ HTML CSS

Heading <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor
sit amet. HTML

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

<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

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)

Grouping styles

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

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

Try grouping styles to give all your paragraphs and headings
the same color

Sectioning T ags

<h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Heading Lorem ipsum dolor
sit amet. HTML

<div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem
ipsum dolor sit amet. HTML

ipsum dolor sit amet. div { background-color: hotpink; color: white; } CSS HTML

Add some <div> tags to the bits of content on
your page that you think should be grouped

Dimensions

ipsum dolor sit amet. div { background-color: hotpink; color: white; width:250px; } HTML CSS

ipsum dolor sit amet. div { background-color: hotpink; color: white; width:50%; } HTML CSS

Style with class

<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 Consectetuer adipiscing HTML CSS

<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

<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

background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing use classes as “hooks” for styling HTML CSS

background-color:yellow; … } .alert { background-color:red; } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS

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.

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

Give your <div>s different styles

Navigation

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

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

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

Add some navigation to your page linking to external sites

Borders, margin and padding

margin-bottom: 10px [ [ (also margin-bottom on the box above)

padding: 5px [

border: 1px solid grey [

div { … } Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS

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

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

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

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

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

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.

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.

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.

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.

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

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

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.

Floats

How floats work nav div div

How floats work nav { width:30%; } div { width:70%;
} div { width:70%; }

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

width:70%; float:left; } div { width:70%; }

width:65%; float:left; } div { width:70%; float:left; }

width:65%; float:right; } div { width:65%; float:right; }

Have a look at: Try creating a 2 column layout
using floats. How about 3 columns? http://goo.gl/iRwsr

Specificity

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

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

<p>Lorem ipsum</p> <p>Dolor sit amet</p> Dolor sit amet Lorem ipsum
Specificity HTML

<p>Lorem ipsum</p> <p class=”highlight”>Dolor sit amet</p> Specificity Dolor sit amet
Lorem ipsum HTML

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

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

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

Read CSS backwards div.content p .highlight { … } These
styles apply to… CSS

Read CSS backwards div.content p .highlight { … } Anything
that has a class of highlight CSS

Read CSS backwards div.content p .highlight { … } That’s
within a paragraph CSS

Read CSS backwards div.content p .highlight { … } That’s
within a div that has a class of “content” CSS

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

<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

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

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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Advanced Knowledge

Absolute & Fixed Positioning…

Have a look at http://goo.gl/iizt7

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

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

.box2 { position: fixed; right: 0; top: 0; } HTML CSS

.box1 { position: relative } .box2 { position: fixed; right: 0; top: 0; } HTML CSS

Flexbox

Flexbox Full demo with all compatible browsers: http://goo.gl/dv9x9 http://goo.gl/ciXp8 http://goo.gl/NKQ18
Not yet.

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

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

<div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS

<div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS

Ninja style…

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

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

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

Have a play with: http://goo.gl/Qt4oS

UX Bootcamp Code Fitness

UX Bootcamp Code Fitness

More Decks by Anna Debenham

Other Decks in Technology

Featured

Transcript