What are the steps to setting up a project?
Initialize repository (local and remote)
Add files to track
Make commits to your repository
Push to remote
Style
We don't want this...
... or this....
We want this....
... made by this.
Size
Layout
Font
Background
Color
Opacity
<div id="container">
<div id="sub-div">
<p id="block">
<text>Text1</text>
<text>Text2</text>
<text>Text3</text>
</p>
</div>
</div>
<div id="container">
<div id="sub-div"> // Has own styles + #container styles
<p id="block"> // Own styles + #sub-div + #container
<text>Text1</text> // styles + #block + #sub-div + #container
<text>Text2</text>
<text>Text3</text>
</p>
</div>
</div>
Inline with HTML elements
<div style="font-size:30px">Text goes here</div>
Style section in HTML code
<html>
<style>
**** CSS syntax goes here ****
</style>
</html>
Include from a separate file
<html>
<link rel="stylesheet" href="css/my-css.css"/>
</html>
Recall HTML element attributes
<div id="my-div" class="container">...</div>
In CSS, select by property or type
/* CSS pseudo-code */
selector {
property:value;
}
By ID
li { /* all <li> elements */
property:value;
}
By class
.my-class { /* with the . symbol */
property:value;
}
By element type
#my-id { /* with the # symbol */
property:value;
}
Absolute units
in (inches)
px (pixels, 1px = 1/96 in)
cm (centimeters)
mm (millimeters)
pt (point, 1pt = 1/72 in)
pc (picas, 1pt = 12 pt)
Relative units
% (percentage of parent width)
em (relative to font-size)
Every HTML element is a box with content
{even text!}
How to understand positioning
Layout dictated by size of each box
Space between content and border
Space between boxes
"Block" level elements (divs, by default)
<div>Block element</div>
<div>Block element</div>
"In-line" level elements (spans)
<span>Inline element</span>
<span>Other inline element</span>
Inline-block elements
Allow other elements on the same line (unlike block)
Can set width/height (unlike in-line)
Fixed position
#element {
position:fixed;
}
Keeps element fixed relative to browser window
Absolute position
#element {
position:absolute;
}
Positioned an absolute number of pixels from parent
(removed from flow of other elements)
Relative position
#element {
position:relative;
}
Move element relative to where it should be
Too many options
english: 'blue'
Hue-saturation-lightness: hsl(255, 100, 50%)
red-green-blue: rgb(0,0,255)
Hex: #0000FF
can specify opacity (alpha) via rgba, hsla
Find the most well designed website you can (~5 minutes)
Find the worst designed website you can (~5 minutes)
In groups of ~3, share what you've found (~10 minutes)
Discuss (~10 minutes)
Git challenge (due tomorrow before class )