Slide 1
Slide 1 text
UX BOOTCAMP
Code Fitness
Slide 2
Slide 2 text
Before we get started
Slide 3
Slide 3 text
http://jsbin.com
Slide 4
Slide 4 text
Javascript
window
HTML+ CSS
window
Preview window
(automatically updates)
[
[
[
View/hide windows
X
Slide 5
Slide 5 text
Switch between code view and full screen preview
Include a javascript library
(we won’t need this today)
Slide 6
Slide 6 text
Save a branch
This number changes
Shareable link!
Slide 7
Slide 7 text
HTML
Slide 8
Slide 8 text
Interaction
(Javascript)
Styles (CSS)
Markup (HTML)
Slide 9
Slide 9 text
HTML ≈ IA
Slide 10
Slide 10 text
Browser Defaults
Slide 11
Slide 11 text
Label the website printout with the following:
•main heading
•paragraph
•unordered list
•ordered list
•image
•subheading
•link
Slide 12
Slide 12 text
Very basic HTML page
Site name
Site Content
HTMLSlide 13
Slide 13 text
Very basic HTML page
Site name
Site Content
“I’m writing HTML” HTMLSlide 14
Slide 14 text
Very basic HTML page
Site name
Site Content
tag HTMLSlide 15
Slide 15 text
Very basic HTML page
Site name
Site Content
browser information [ HTMLSlide 16
Slide 16 text
Very basic HTML page
Site name
Site Content
which character encoding we’re using HTMLSlide 17
Slide 17 text
Very basic HTML page
Site name
Site Content
appears in browser tab HTMLSlide 18
Slide 18 text
Very basic HTML page
Site name
Site Content
appears on page [ HTMLSlide 19
Slide 19 text
Opening & Closing T
ags
Some self-closing tags: Some tags that close because they contain text: HTML HTML HTML HTML
A heading
Some text
Some self-closing tags: Some tags that close because they contain text: HTML HTML HTML HTML
Slide 20
Slide 20 text
Opening & Closing T
ags
A heading
Some text
body h1 p HTMLSlide 21
Slide 21 text
Paragraphs
This is a paragraph.
This is another paragraph.
screenshot from bbc.co.uk/news HTMLSlide 22
Slide 22 text
Headings
This is a heading
This is a paragraph.
screenshot from bbc.co.uk/news HTMLSlide 23
Slide 23 text
Unordered List
- List item 1
- List item 2
- List item 3
Slide 24
Slide 24 text
Ordered List
- List item 1
- List item 2
- List item 3
Slide 26
Slide 26 text
Images
HTML
Slide 27
Slide 27 text
Comments
HTML
Slide 28
Slide 28 text
Mark up the contents of this page:
http://goo.gl/y2pqJ
Slide 29
Slide 29 text
Slide 30
Slide 30 text
Style
Slide 31
Slide 31 text
Interaction
(Javascript)
Styles (CSS)
Markup (HTML)
Slide 32
Slide 32 text
Writing CSS
CSS Flexbox prototype
…
HTML
Slide 33
Slide 33 text
h1
“selector”
Writing CSS
CSS
Slide 34
Slide 34 text
h1 {
open the curly brace
Writing CSS
CSS
Slide 35
Slide 35 text
h1 {
font-family
“property”
Writing CSS
CSS
Slide 36
Slide 36 text
h1 {
font-family:
add a colon
Writing CSS
CSS
Slide 37
Slide 37 text
h1 {
font-family: Georgia
Writing CSS
“value”
CSS
Slide 38
Slide 38 text
h1 {
font-family: Georgia;
finish with a semi-colon
Writing CSS
CSS
Slide 39
Slide 39 text
h1 {
font-family: Georgia;
color: green;
start a new line, add more styles
Writing CSS
CSS
Slide 40
Slide 40 text
h1 {
font-family: Georgia;
color: green;
}
close the curly brace
Writing CSS
CSS
Slide 41
Slide 41 text
h1 {
font-family: Georgia;
color: green;
}
Writing CSS
CSS
Slide 42
Slide 42 text
Adding more styles
h1 {
font-family: Georgia;
color: green;
}
p {
font-family: Verdana;
color: pink;
}
CSS
Slide 43
Slide 43 text
Comments
/* This is a CSS comment */
HTML
CSS
Slide 44
Slide 44 text
Heading
Heading
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. HTMLSlide 45
Slide 45 text
Heading
Heading
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Heading h1 { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. HTML CSSSlide 46
Slide 46 text
Heading
Lorem ipsum dolor sit amet.
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 CSSSlide 47
Slide 47 text
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)
Slide 48
Slide 48 text
Grouping styles
Slide 49
Slide 49 text
Heading
h1 {
font-family: Arial;
color: green;
}
p {
font-family: Arial;
color: green;
}
Lorem ipsum dolor
sit amet.
CSS
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
Try grouping styles to give all your
paragraphs and headings the same color
Slide 52
Slide 52 text
Sectioning T
ags
Slide 53
Slide 53 text
Heading
Lorem ipsum dolor sit amet.
Heading Lorem ipsum dolor sit amet. HTMLSlide 54
Slide 54 text
Heading
Lorem ipsum dolor sit amet.
Slide 55
Slide 55 text
Heading
Lorem ipsum dolor sit amet.
Slide 56
Slide 56 text
Add some
tags to the bits of content
on your page that you think should be
grouped
Slide 57
Slide 57 text
Dimensions
Slide 58
Slide 58 text
Heading
Lorem ipsum dolor sit amet.
Slide 59
Slide 59 text
Heading
Lorem ipsum dolor sit amet.
Slide 60
Slide 60 text
Style with class
Slide 61
Slide 61 text
Lorem ipsum
Dolor sit amet
Consectetuer adipiscing
Slide 62
Slide 62 text
Lorem ipsum
Dolor sit amet
Consectetuer adipiscing
Slide 63
Slide 63 text
Lorem ipsum
Dolor sit amet
Consectetuer adipiscing
Slide 64
Slide 64 text
Lorem ipsum
Dolor sit amet
Consectetuer adipiscing
Slide 65
Slide 65 text
Lorem ipsum
Dolor sit amet
Consectetuer adipiscing
Slide 66
Slide 66 text
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.
Slide 67
Slide 67 text
IDs
• Can only be used once on a page
• Used for navigating between sections on the same
page
#content {…}
HTML
CSS
Lorem ipsum
Slide 68
Slide 68 text
Give your
s different styles
Slide 69
Slide 69 text
Navigation
Slide 70
Slide 70 text
Back to the list
- List item 1
- List item 2
- List item 3
Slide 71
Slide 71 text
Back to the list
•List item 1
•List item 2
•List item 2.1
•List item 2.2
•List item 3
HTML
Slide 72
Slide 72 text
Back to the list
•List item 1
•List item 2
•List item 2.1
•List item 2.2
•List item 3
HTML
Slide 73
Slide 73 text
Back to the list
•List item 1
•List item 2
•List item 2.1
•List item 2.2
•List item 3
HTML
Slide 74
Slide 74 text
Back to the list
•List item 1
•List item 2
•List item 3
HTML
Slide 75
Slide 75 text
Add some navigation to your page linking to
external sites
Slide 76
Slide 76 text
Borders, margin and padding
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
margin-bottom: 10px
[
[
(also margin-bottom on
the box above)
Slide 80
Slide 80 text
padding: 5px
[
Slide 81
Slide 81 text
border: 1px solid grey
[
Slide 82
Slide 82 text
div {
…
}
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Donec
odio.
Quisque volutpat mattis eros. Nullam
malesuada erat ut turpis.
CSS
Slide 83
Slide 83 text
div {
padding-bottom: 20px;
}
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Donec
odio.
Quisque volutpat mattis eros. Nullam
malesuada erat ut turpis.
CSS
Slide 84
Slide 84 text
div {
padding: 20px;
}
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Donec
odio.
Quisque volutpat mattis
eros. Nullam malesuada
erat ut turpis.
CSS
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
div {
margin-right: 20px;
}
Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis.
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Donec
odio.
CSS
Slide 87
Slide 87 text
div {
margin: 20px;
}
Quisque volutpat mattis eros.
Nullam malesuada erat ut
turpis.
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Donec
odio.
CSS
Slide 88
Slide 88 text
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.
Slide 89
Slide 89 text
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.
Slide 90
Slide 90 text
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.
Slide 91
Slide 91 text
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.
Slide 92
Slide 92 text
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
Slide 93
Slide 93 text
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
Slide 94
Slide 94 text
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.
Slide 95
Slide 95 text
Floats
Slide 96
Slide 96 text
How floats work
nav
div
div
Slide 97
Slide 97 text
How floats work
nav {
width:30%;
}
div {
width:70%;
}
div {
width:70%;
}
Slide 98
Slide 98 text
How floats work
nav {
width:30%;
float:left;
}
div {
width:70%;
}
div {
width:70%;
}
Slide 99
Slide 99 text
How floats work
nav {
width:30%;
float:left;
}
div {
width:70%;
float:left;
}
div {
width:70%;
}
Slide 100
Slide 100 text
How floats work
nav {
width:30%;
float:left;
}
div {
width:65%;
float:left;
}
div {
width:70%;
float:left;
}
Slide 101
Slide 101 text
How floats work
nav {
width:30%;
float:left;
}
div {
width:65%;
float:right;
}
div {
width:65%;
float:right;
}
Slide 102
Slide 102 text
Have a look at:
Try creating a 2 column layout using floats.
How about 3 columns?
http://goo.gl/iRwsr
Slide 103
Slide 103 text
Specificity
Slide 104
Slide 104 text
Using more than one class
.alert {
border: 2px solid grey;
background-color: yellow;
}
There has been an error
HTML
CSS
There’s been an error
Slide 105
Slide 105 text
Using more than one class
.alert {
border: 2px solid grey;
background-color: yellow;
}
.error {
background-color: red;
}
There has been an error
HTML
CSS
There’s been an error
Slide 106
Slide 106 text
Lorem ipsum
Dolor sit amet
Dolor sit amet Lorem ipsum Specificity HTMLSlide 107
Slide 107 text
Lorem ipsum
Dolor sit amet
Specificity Dolor sit amet Lorem ipsum HTMLSlide 108
Slide 108 text
Lorem ipsum
Dolor sit amet
.highlight { background-color:yellow; } Specificity Dolor sit amet Lorem ipsum HTML CSSSlide 109
Slide 109 text
Lorem ipsum
Dolor sit amet
.highlight { background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSSSlide 110
Slide 110 text
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
Slide 111
Slide 111 text
Read CSS backwards
div.content p .highlight {
…
}
These styles apply to…
CSS
Slide 112
Slide 112 text
Read CSS backwards
div.content p .highlight {
…
}
Anything that has a class of highlight
CSS
Slide 113
Slide 113 text
Read CSS backwards
div.content p .highlight {
…
}
That’s within a paragraph
CSS
Slide 114
Slide 114 text
Read CSS backwards
div.content p .highlight {
…
}
That’s within a div that has a class of “content”
CSS
Slide 115
Slide 115 text
Lorem ipsum
Dolor sit amet
p.highlight { background-color:yellow; } Specificity Lorem ipsum Dolor sit amet HTML CSSSlide 116
Slide 116 text
Lorem ipsum
Dolor sit amet
p .highlight { background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSSSlide 117
Slide 117 text
Lorem ipsum
Dolor sit amet
.highlight { background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSSSlide 118
Slide 118 text
Lorem ipsum
Dolor sit amet
span.highlight { background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSSSlide 119
Slide 119 text
Lorem ipsum
Dolor sit amet
span .highlight { background-color:yellow; } Specificity Lorem ipsum Dolor sit amet HTML CSSSlide 120
Slide 120 text
No content
Slide 121
Slide 121 text
Breakdown
Styles applied to a class will override styles for its element
Lorem ipsum
Lorem ipsum
p { color:blue; } HTML CSSSlide 122
Slide 122 text
Breakdown
Class styles override styles applied to their element
Lorem ipsum
Lorem ipsum
p { color:blue; } .prominent { color:pink; } HTML CSSSlide 123
Slide 123 text
Breakdown
If an element has 2 classes, the one declared last in the
stylesheet will override the one declared before it
Lorem ipsum
Lorem ipsum
p { color:blue; } .prominent { color:pink; } .highlight { color:green; } HTML CSSSlide 124
Slide 124 text
Breakdown
If an element has 2 classes, the one declared last in the
stylesheet will override the one declared before it
Lorem ipsum
Lorem ipsum
p { color:blue; } .highlight { color:green; } .prominent { color:pink; } HTML CSSSlide 125
Slide 125 text
Breakdown
A style will override other styles if it defines more selectors
p { color:blue; }
.important { color:orange; }
.highlight { color:green; }
.prominent { color:pink; }
HTML
CSS
Lorem ipsum
Lorem ipsum
Slide 126
Slide 126 text
Breakdown
A style will override other styles if it defines more selectors
p { color:blue; }
.important { color:orange; }
.important .prominent { color:purple; }
.prominent { color:pink; }
HTML
CSS
Lorem ipsum
Lorem ipsum
Slide 127
Slide 127 text
Breakdown
A style will override other styles if it defines more selectors
p { color:blue; }
.important { color:orange; }
.important p { color:purple; }
.important .prominent { color:grey; }
.prominent { color:pink; }
HTML
CSS
Lorem ipsum
Slide 128
Slide 128 text
Breakdown
A style will override other styles if it defines more selectors
p { color:blue; }
.important { color:orange; }
.important p { color:purple; }
.important .prominent { color:grey; }
.important p.prominent { color:cyan; }
.prominent { color:pink; }
HTML
CSS
Lorem ipsum
Slide 129
Slide 129 text
Quiz
What colour is this paragraph?
There has been an error
p { color:blue; } .error { color:red; } HTML CSSSlide 130
Slide 130 text
Quiz
What colour is this paragraph?
p { color:blue; }
.prominent { color:green; }
.error { color:red; }
HTML
CSS
There has been an error
Slide 131
Slide 131 text
Quiz
What colour is this paragraph?
p { color:blue; }
.prominent .error { color:hotpink; }
.prominent { color:green; }
.error { color:red; }
HTML
CSS
There has been an error
Slide 132
Slide 132 text
Quiz
What colour is this paragraph?
There has been an error
p { color:blue; } .prominent { color:green; } .error { color:red; } HTML CSSSlide 133
Slide 133 text
Quiz
What colour is this paragraph?
There has been an error
p { color:blue; } p.prominent { color:green; } .error { color:red; } HTML CSSSlide 134
Slide 134 text
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
Slide 135
Slide 135 text
Advanced Knowledge
Slide 136
Slide 136 text
Absolute & Fixed Positioning…
Slide 137
Slide 137 text
Have a look at
http://goo.gl/iizt7
Slide 138
Slide 138 text
Slide 139
Slide 139 text
Absolute & Fixed Positioning
.box1 {
position: relative
}
.box2 {
position: absolute;
right: 0;
top: 0;
}
.box1
.box2
HTML
CSS
Slide 140
Slide 140 text
Absolute & Fixed Positioning
.box2 {
position: fixed;
right: 0;
top: 0;
}
HTML
CSS
Slide 141
Slide 141 text
Absolute & Fixed Positioning
.box1 {
position: relative
}
.box2 {
position: fixed;
right: 0;
top: 0;
}
HTML
CSS
Slide 142
Slide 142 text
Flexbox
Slide 143
Slide 143 text
Flexbox
Full demo with all compatible browsers: http://goo.gl/dv9x9
http://goo.gl/ciXp8
http://goo.gl/NKQ18
Not yet.
Slide 144
Slide 144 text
Flexbox
…
…
…
…
HTML
Slide 145
Slide 145 text
Flexbox
.row {
display:box;
}
.column {
flex-box:1;
width:0;
}
…
…
makes columns equal width
CSS
Slide 146
Slide 146 text
Flexbox
.row {
display:box;
}
.column {
flex-box:1;
width:0;
}
…
…
…
CSS
Slide 147
Slide 147 text
Flexbox
.row {
display:box;
}
.column {
flex-box:1;
width:0;
}
…
…
…
…
CSS
Slide 148
Slide 148 text
Ninja style…
Slide 149
Slide 149 text
Ninja style
…
…
…
…
Slide 150
Slide 150 text
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
Slide 151
Slide 151 text
Ninja style
.row .column:first-child {
margin-left:0;
}
.row .column:last-child {
margin-right:0;
}
…
…
…
…
CSS
Slide 152
Slide 152 text
Have a play with:
http://goo.gl/Qt4oS
Slide 153
Slide 153 text
No content