SLIDE 1
Design & Presentation
Review
Designing for the web Review HTML/CSS The head is where you put - - PowerPoint PPT Presentation
Designing for the web Review HTML/CSS The head is where you put - - PowerPoint PPT Presentation
Design & Presentation Designing for the web Review HTML/CSS The head is where you put information about your HTML le, like its title. (Stu that won't appear on the page.) The body is where you put your content, such as text, images,
SLIDE 2
SLIDE 3
SLIDE 4
The head is where you put information about your HTML le, like its title. (Stu that won't appear on the page.) The body is where you put your content, such as text, images, and links. (For human eyes!)
SLIDE 5
HTML: Basic structure
- Elements
- Tags
- Attributes
SLIDE 6
Element
SLIDE 7
Tag
SLIDE 8
Attribute
SLIDE 9
Elements nest inside
- ne another
SLIDE 10
SLIDE 11
SLIDE 12
How to add an image
SLIDE 13
SLIDE 14
Image attributes
- src
- alt
- width
- height
SLIDE 15
SLIDE 16
Cascading Style Sheets
SLIDE 17
Styles can be inline
SLIDE 18
SLIDE 19
This text is pink.
SLIDE 20
Styles can be written in the HTML header
SLIDE 21
SLIDE 22
This text is also pink.
SLIDE 23
Or in an external stylesheet
SLIDE 24
SLIDE 25
This text is still pink.
SLIDE 26
Selectors:
- id
- class
- element: div, a, span
- element state: a:active, a:hover, a:visited
SLIDE 27
SLIDE 28
SLIDE 29
The basics:
What you can control with CSS
- text styles
- "the box model"
- positioning & display
- and more!
SLIDE 30
Text styles
- color
- font-family
- font-size
- font-weight
- text-align
- text-decoration
SLIDE 31
"The box model"
- width
- height
- border
- margin
- padding
SLIDE 32
SLIDE 33
Positioning & display
- position
- display
- oat
SLIDE 34
Other
- list-style-type
- cursor
- border radius
- & much more!
SLIDE 35
Let's talk about …
Head & body details
SLIDE 36
Header tags
SLIDE 37
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
SLIDE 38
SLIDE 39
SLIDE 40
Tip
Whitespace is your friend!
SLIDE 41
This doesn't look so great
Flop over scratch the box put toy mouse in food bowl run out of litter box at full speed stick butt in face, or attack dog, run away and pretend to be victim purr while eating. Play time hiss at vacuum cleaner white cat sleeps on a black shirt and eat grass, throw it back up.
SLIDE 42
SLIDE 43
Much better!
Flop over scratch the box put toy mouse in food bowl run out of litter box at full speed stick butt in face, or attack dog, run away and pretend to be victim purr while eating. Play time hiss at vacuum cleaner white cat sleeps on a black shirt and eat grass, throw it back up. Immediately regret falling into bathtub under the bed lay on arms while you're using the keyboard and lick the other cats sun bathe. Kitty power!
SLIDE 44
Float a pullquote too
"Meow meow meow (I am a pullquote)"
Flop over scratch the box put toy mouse in food bowl run out of litter box at full speed stick butt in face, or attack dog, run away and pretend to be victim purr while eating. Play time hiss at vacuum cleaner white cat sleeps on a black shirt and eat grass, throw it back up. Immediately regret falling into bathtub under the bed lay on arms while you're using the keyboard and lick the other cats sun bathe. Kitty power!
SLIDE 45
BREAK!
SLIDE 46
SLIDE 47
Via Fast Company
SLIDE 48
Tip
Use percent, not pixels
SLIDE 49
SLIDE 50
Via Fast Company
SLIDE 51
Tip
Max-width is here to help
SLIDE 52
SLIDE 53
Via Fast Company
SLIDE 54
Tip
Breakpoints for better layouts
SLIDE 55
Via Fast Company
SLIDE 56
SLIDE 57
SLIDE 58
Ex 1. Freeze frames Ex 2. Because Scott Walker Asked
SLIDE 59
http://bit.ly/media-query-zip
SLIDE 60