2. What you already know
What is “The Web”
What is HTML
What is a DOM
Why the web matters as a technology
3.
4.
5.
6.
7. What we’ll learn
How to change the appearance of HTML
How to control page layout
How to make a single web page look great on multiple devices
8. au·to·mo·bile
Noun
A road vehicle, typically with four wheels,
powered by an internal combustion engine or
electric motor and able to carry a small number
of people.
10. Early Feature Creep
Air conditioning
Heated / Cooled Seats
Radio
Tire pressure monitors
Tape Player
Automatic transmission
CD Player
Bluetooth Phone Integration
MP3 Player
Laser Assisted Cruise Control
GPS Navigation
Automatic parallel parking?
11. Web = (HTML Documents + Hyper Links + Browser)
12. Web Feature Creep
Pictures
AJAX
Complex layouts
Authenticated User Sessions
Animation
Single Page Applications
Interactivity
Streaming Audio and Video
Forms
14. Tools for managing complexity
Modules: separate code into pieces by subject and concern
Layers: abstract complexity into layers. Higher layers build on top of lower
layers. Lower layers hide complexity from higher layers.
Declarative programming: name code by what it accomplishes, not how
it accomplishes it.
25. Selectors query the DOM
p { ... }
header p { ... }
h1 { ... }
#elem a { ... }
#myElem { ... }
a[href="http://www.jw.org"] { ... }
.someClass { ... }
a:hover { ... }
#parent > .someClass { ... }
a:focus { ... }
26. Colors are numeric
Colors are 3 or 6 digit hexadecimal numbers.
#FFF, #3FA2BF, #2F798F
Hexadecimal is base-16. {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F}
One digit is 4 bits (1 nibble, half an octet)
A color is 3 octets (24 bits). 8 bits for each Red, Green, Blue.
BONUS: How many distinct colors can be represented?
35. Box Model Property Shorthand
#myBox {
top right bottom left
margin: 10px 20px 30px
40px;
}
#yourBox {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
36. Dimensions
Pixels (px) are the smallest possible unit on a screen
Percents (%) allow sizing based on the size of the parent container
Ems (em) are equal to the font-size of the parent element
Generally use pixels for fonts & borders. Percents and Ems for layout
Designs must re-flow with the screen. Fixed width is bad practice.
37. Review
What is CSS?
How do selectors work?
How do you specify colors in CSS?
Whats the box model?
According to the box model, what order is spacing applied in?
What units are available for dimensions?
38. Discuss 01.02.02
What selector would you use to...
Select the top-level element in the document
Select the `<div>` element with the `container` class
Select all of the links in the document
Select the element with the ID of `title`
39. Discuss 01.02.03
What elements are being selected?
What colors are being used? How do colors work in CSS?
What kind of font and font styling are being applied?
Whats the difference between width and max-width?
What is margin and padding? How are the similar? How are they different?
Short-hand vs. Long-hand CSS?
Why define the width as a percentage instead of in pixels?
What fonts can you use in CSS? Why are there multiple?
40. Activity 01.02.03
Customize example 01.02.03 in Chrome Dev Tools.
Change the color on the page to match the color clothing you're
currently wearing.
Increase the font size and change the font style to something with serifs.
Change the distribution of spacing on the page to something you think is
more readable.
Make the first line of a paragraph indented.
41. Activity 01.02.04
Genesis 1—3 as HTML in project_work folder
Write CSS to:
Make each chapter display as a column
Improve the typography
Improve the colors
Make sizing / spacing more readable
Bonus: Use Media Queries to change layout based on screen width
42. Homework 01.02
Review: Read Web-Fundamentals-CSS.epub
Get creative: Write CSS for Alice in Wonderland
It should be readable on any screen size
Headings, poems, and paragraphs should be discernible by a visual hierarchy
Too much contrast in colors (text color vs. background color) is difficult to read,
but so is too little.
Tomorrow morning: compare CSS styling of Alice in Wonderland.
What challenges did you face? What did you learn?