4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>We &hearts; CSS</title>
<meta name="viewport" content="width=1024">
    <link rel="stylesheet" href="dist/coderdeck-core.min.css" type="text/css">

	<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >

	<script src='dist/jquery.min.js'></script>
	<script src="dist/modernizr.js"></script>	

	<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

</head>
<body class="deck-container">
	<script type='text/coderdeck' id='coderdeck-default'>
	  <html>
	    <head>
	      <script src='src/jquery.min.js'>SCRIPTEND
	    </head>
	    <body>
		    CODE
	    </body>
	</html>
	</script>

	<script type='text/coderdeck' id='coderdeck-plain'>
		<html>
			<title>test</title>
			<link rel="stylesheet" href="reset.css">
			<body>
				CODE
			</body>
		</html>
	</script>

	<script type='text/coderdeck' id='coderdeck-css-playground'>
		<html>
			<title>test</title>
				CODE
			<body>
				<h1>I'm a H1 heading</h1>
				<h2>I'm a H2 heading</h2>
				<p>Pargraph of text &lt;p&gt;</p>
				<div class='stuff'>&lt;div&gt; with class "stuff"</div>
				<div id='my-div'>&lt;div&gt; with id "my-div"</div>
			</body>
		</html>
	</script>


	<script type='text/coderdeck' id='coderdeck-style-example'>
		<html>
			<title>test</title>
			<style>
				CODE
			</style>
			<body>
				<h1>I'm a H1 heading</h1>
				<h2>I'm a H2 heading</h2>
				<h3>Pargraph of text &lt;p&gt; here</p>
				<div class='stuff'>I'm a div &lt;div&gt; with class "stuff"</div>
				<div id='my-div'>I'm a &lt;div&gt; with id "my-div"</div>
			</body>
		</html>
	</script> 	


<!-- Create any number of elements with class slide within the container -->
<article class='slide slide-subhead'>
<h1>More CSS <font color="red">&hearts;</font></h1>
<p>Week 4: <a href='http://acacheung.github.io/webspring-2016/4.html'>http://acacheung.github.io/webspring-2016/4.html</a></p>
<p><a href="cheatsheet.html">Cheat Sheet</a>
</article>

<article class='slide slide-list'>
<h1>Order of Business</h1>
	<ol>
		<li class="slide">
			<h3>Review</h3>
		</li>
		<li class="slide">
			<h3>CSS Styling Basics</h3>
		</li>
		<li class="slide">
			<h3>CSS Box Model</h3>
		</li>
		<li class="slide">
			<h3>Floats</h3>
		</li>
		<li class="slide">
			<h3>Exercises</h3>
		</li>
		<li class="slide">
			<h3>Homework</h3>
		</li>
	</ol>
</article>

<article class='slide slide-list'>
  <h1><a href="http://trentwalton.com/2012/06/08/jiro-sushi-web-type/">Blog chop</a></h1>
  <ul>
  <li class="slide">
    <h3>WHAT your end users might want</h3>
  </li>
  <li class="slide">
    <h3>WHY they want it</h3>
  </li>
  <li class="slide">
    <h3>HOW to provide it to them</h3>
  </li>
</article>

<article class='slide slide-subhead'>
  <h1>UX Audit: <a href="https://www.airbnb.com/">Airbnb</a></h1>
</article>

<article class='slide slide-subhead'>
  <h1>Questions?</h1>
</article>

<article class='slide slide-accent'>
  <h1>Let's Review <br/><a href="http://acacheung.com/gdi/intro/index.html#slide-9">HTML tags and attributes</a></h1>
</article>

<article class='slide slide-accent'>
	<h1>Let's Review <br/>Our CSS Basics</h1>
</article>

<article class="slide slide-list">
<h1>What is CSS?</h1>
<ul>
<li class="slide">
	<h3>Cascading style sheets</h3>
</li>
<li class="slide">
	<h3>The presentation: Layout, styling</h3>
</li>
<li class="slide">
	<h3>What is HTML for?</h3>
</li>
<li class="slide">
	<h3>HTML is for the structure (content, data)</h3>
</li>
</ul>
</article>

<article class="slide slide-list">
<h2>Available selectors</h2>
<ul>
	 <li class='slide'>
		 <h3>Name of element (p, div, h1)</h3>
	</li>
	<li class='slide'>
		<h3>Class name, which is preﬁxed with a period (.)<br/>
		HTML: &lt;div <span class="callout">class=‘my-class-name</span>’&gt;<span class="light"> This is my class name </span>&lt;/div&gt;<br/>
		CSS: <span class="callout">.my-class-name</span> {<span class="light"> font-size: 25px; </span>}
	</h3>
	</li>
	<li class='slide'>
		<h3>Element id, which is preﬁxed with a pound sign / hash (#)<br/>
			HTML: &lt;div <span class="callout">id=‘my-id</span>’&gt;<span class="light"> This is my id</span>&lt;/div&gt;<br/>
			CSS: <span class="callout">#my-id</span> { <span class="light"> color: red;</span> }
	</h3>
</li>
	 <li class='slide'>
     <h3>But, I don't recommend id's because of <a href="http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/" target="_blank">these reasons</a></h3>
	</li>
</ul>
</article>

<article class='slide slide-list'>
<h2>Pay attention to how you name things</h2>
<ul>
<li class="slide">
	<h3>aka naming conventions</h3>
</li>
<li class="slide">
  <h3>I use <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" target="_blank">BEM</a> naming conventions</h3>
</li>
<li class="slide">
	<h3>You can't use spaces.</h3>
</li>
<li class="slide">
	<h3>For now, I'd recommend dashes - CSS uses Dashes (<em>background-color, font-family</em>), <br/>
		Javascript uses camelCase</h3>
</li>
<li class="slide">
	<h3>Be consistent! - easier to read and remember what you wrote.</h3>
</li>
</ul>
</article>

<article class="slide slide-list">
<h1>Properties</h1>
<ul>
<li class="slide">
	<h3>There are lots of them</h3>
</li>
<li class="slide">
	<h3>Two Primary types: Layout, Style<br/>
	(Padding is layout, color is style)</h3>
</li>
<li class="slide">
	<h3>Style generally inherit, Layout don’t</h3>
</li>
<li class="slide">
	<h3>Sometimes can be combined into one: e.g.<br/>
	<em>font = font-family, font-style, font-variant, ...</em><br/>
	<em>background = background-color, background-image, background-repeat, background-attachment, background-position ...</em><br/>
	<em>padding = padding-top, padding-right, padding-bottom, padding-left ...</em></h3>
</li>
<li class="slide">
	<h3>Layout box properties go clockwise from  midnight: top, right, bottom, left</h3>
</li>
</ul>
</article>

<article class='slide slide-accent'>
	<h1>How do we use this in our sites?</h1>
</article>

<article class='slide slide-list'>
	<h1>Remember</h1>
	<ul>
	<li><h3>Styles are Separate from HTML</h3></li>
	<li><h3>Link to CSS in your HTML</h3></li>
	<li><h3>Your CSS should start with a <a href='http://meyerweb.com/eric/tools/css/reset/'>RESET</a></h3></li>
	</ul>
</article>

<article class='slide slide-list'>
		<p><br/><img src="images/style-linking-example.gif" class='top-image'/><br/><br/></p>
</article>

<article class='slide slide-list'>
	<h1>Block elements vs inline elements</h1>
		<p><br/><img src="http://acacheung.com/gdi/intro/images/block-inline.png" class='top-image'/><br/><br/></p>
</article>

<article class='slide'>
  <h1>Block elements vs inline elements</h1>
  <p>
  <p><em>Block</em>: p, h1, h2, ul, li, most things</p>
  <p><em>Inline</em>: images, links, em, strong</p>
  <textarea class='coder-editor'>
  <!DOCTYPE html>
  <html>
    <p>This is paragraph text. It is defaulted to display: block.</p>
    <h1>This is a heading 1</h1>
    <a href='#'>This is a link</a>
    <img class='logo' src='http://girldevelopit.com/assets/pink-logo.png' />
    <em>This is emphasized text<span>This is a span inside an em tag</span></em>
    <strong>This is strong text</strong>
  </html>
  <style>
    .logo {
      width: 350px;
    }
    span {
      color: orange;
    }
  </style>
  </textarea>
</article>

<article class='slide slide-list'>
	<h2>In Your HTML</h2>
	<pre class='prettyprint'>
&lt;head&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;		
	</pre>		
</article>

<article class='slide slide-list'>
	<h2>The Meyer Reset</h2>
	<pre class='prettyprint'>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	</pre>		
</article>

<article class='slide slide-accent'>
	<h1>Styles</h1>
</article>

<article class="slide slide-list">
<h1>Style Properties</h1>
<ul>
<li class="slide">
	<h3>color:</h3>
</li>
<li class="slide">
	<h3>background-color:</h3>
</li>
<li class="slide">
	<h3>border-radius:</h3>
</li>
<li class="slide">
	<h3>font: style variant weight size family</h3>
</li>
<li class="slide">
	<h3>text-align:</h3>
</li>
<li class="slide">
	<h3>text-indent:</h3>
</li>
<li class="slide">
	<h3>opacity:</h3>
</li>
<li class="slide">
	<h3>line-height</h3>
</li>
<li class="slide">
	<h3>letter-spacing, word-spacing	</h3>
</li>
</ul>
</article>

<article class='slide slide-list'>
<h2>Style Properties</h2>
<textarea class='coder-editor coder-editor-split coder-editor-instant' data-coder-template="coderdeck-plain" id='coderdeck-default'>
<style>
p {


}	
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
</textarea>
</article>

<article class='slide slide-accent'>
	<h1>Combining Selectors</h1>
</article>


<article class="slide slide-list">
<h1>Selector combinations </h1>
<ul>
	 <li class='slide'>
		 <h3> Can have a declaration apply to multiple 
			 styles with a comma (,)</h3>
			<ul>
				<li><em>.my-class-one, .my-class-two</em> { color: red; }</li>
		 	</ul>
	</li>
	<li class='slide'>
		<h3> Can “Cascade” styles with spaces between selectors</h3>
			<ul>
				<li>HTML<pre>&lt;nav id='top'&gt;&lt;p&gt; ... &lt;/p&gt;&lt;/nav&gt;</pre>
			 		CSS<pre><em>#top p </em> { color: red; } /* only p's inside of outer */</pre>
				</li>
		 	</ul>
	</li>
	<li class='slide'>
		<h3>Pseudo-classes that apply to elements in certain conditions</h3>
			<ul>
				<li><em>a:hover</em> { color: blue; } /* only links we are hovering over */<br/>
					<em>a:visited</em> { color: red; } /* links we've visited already */<br/>
					<em>p:first-child</em> { color: red; } /* the first paragraph in a container */<br/>
				</li>
			</ul>		
	</li>
	<li class='slide'>
		<h3>Also can select by arbitrary attributes</h3>
			<ul>
				<li><em>input[type=radio]</em>{ color: blue; } /* only radio buttons */<br/></li>
			</ul>	
	</li>
</ul>
</article>
<article class='slide slide-list'>
<h2>Selector Combination Exercise</h2>
<p>With classes, make all the header and footer have black backgrounds with white text</p>
<textarea class='coder-editor coder-editor-split coder-editor-instant' data-coder-template="coderdeck-plain" id='coderdeck-default'>
<style>

</style>
<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section>
  <article>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
  <article>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

</textarea>
</article>
 
<article class='slide slide-accent'>
	<h1>Cascading</h1>
</article>

<article class="slide slide-list">
<h1>Cascading Hierarchy</h1>
<ol>
<li class="slide">
	<h3>Inline style (those defined directly with a style='....' attribute in the tag)</h3>
</li>
<li class="slide">
	<h3>Number of ID selectors</h3>
</li>
<li class="slide">
	<h3>Number of Class selectors</h3>
</li>
<li class="slide">
	<h3>Number of tag selectors</h3>
</li>
<li class="slide">
	<h3>Order of appearance last to first</h3>
</li>
<li class="slide">
	<h3>Style inheritance</h3>
</li>
</ol>
</article>


<article class='slide slide-list'>
<h2>Cascading - What Color?</h2>
<textarea class='coder-editor coder-editor-full' data-coder-template="coderdeck-plain" id='coderdeck-default'>
<style>
  p {
    color: red;
  }
  .blue {
    color: blue;
  }
  #menu p {
    color: black;
  }
</style>

<div id="menu"><p class='blue'>This is the paragraph</p></div>
</textarea>
</article>


<article class="slide slide-list">
	<h1>Organizing Your CSS</h1>
	<ol>
		<li class='slide'>
			<h3>Start with your reset</h3>
		</li>
		<li class="slide">
			<h3>Set your base element styles (body, p, h1, h2)</h3>
		</li>
		<li class="slide">
			<h3>Set your class styles - layout first, then visual</h3>
		</li>
	</ol>	
</article>	

<article class='slide slide-accent'>
<h1>Image Replacement</h1>
<p>There are <a href="https://css-tricks.com/the-image-replacement-museum/">many methods</a>. I use <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">this hybrid one</a>.</p>
</article>

<article class='slide slide-list'>
<h2>Logo Replacement</h2>
<textarea class='coder-editor coder-editor-split' data-coder-template="coderdeck-plain" id='coderdeck-default'>
&lt;style&gt;
.logo {
 width: 300px;
 height: 80px;
 background-image: url(images/logo.png);
 text-indent: -9999px;
 }
</style>
<header>
 <a href='#' class="logo"><h1>My Logo</h1></a>
</header>
</textarea>
</article>

<article class='slide slide-accent'>
	<h1>Let's Talk Layout</h1>
</article>

<article class="slide slide-list">
<h1>Layout Properties</h1>
<ul>
<li class="slide">
	<h3>Box model: margin, padding, width, height</h3>
</li>
<li class="slide">
	<h3>top, bottom, left, right</h3>
</li>
<li class="slide">
	<h3>border</h3>
</li>
<li class="slide">
	<h3>position [ static, relative, absolute ]</h3>
</li>
<li class="slide">
	<h3>ﬂoat [ left, right, none ], clear [ left, right, both]</h3>
</li>
<li class="slide">
	<h3>display [none, block, inline inline-block]</h3>
</li>
<li class="slide">
	<h3>visibility [visible, hidden]</h3>
</li>
<li class="slide">
	<h3>background (color, image, repeat, position)</h3>
</li>
</ul>
</article>

<article class='slide slide-accent'>
	<h1>Box Model</h1>
</article>


<article class='slide slide-image'>
<h1>Layout = Box Model</h2>
<img src='http://acacheung.com/gdi/intro/images/boxmodel.gif'/>
</article>

<article class="slide slide-list">
<h1>Layout Properties</h1>
<ul>
<li class="slide">
	<h3>Content: the text</h3>
		<ul>
			<li>color: red;</li>
			<li>font-size: 20px;</li>
			<li>text-transform: uppercase;</li>
		</ul>	
</li>
<li class="slide">
	<h3>Padding: color behind the text</h3>
	<ul>
		<li>padding-top: 5px; (-left, -right, -top, -bottom)</li>
		<li>padding:5px 10px;</li>
		<li>padding:5px 3px 10px 20px;</li>
	</ul>	
	
</li>
<li class="slide">
	<h3>Border: line around the padding</h3>
	<ul>
		<li>border-style: solid;</li>
		<li>border-width: 5px;</li>
		<li>border-color: red;</li>
		<li>border: 5px solid red;</li>
	</ul>
</li>
<li class="slide">
	<h3>Margin: transparent space around the padding and border</h3>
	<ul>
		<li>margin-top: 5px; (-left, -right, -top, -bottom)</li>
		<li>margin: 5px 10px;</li>
		<li>margin: 5px 3px 10px 20px;</li>
	</ul>
</li>
</ul>
</article>

<article class='slide slide-list'>
<h2>Box Model Exercise</h2>
<p>Set Box1 to be 100px in width, padding: 24px;, and a red border of 10px. What is the total amount of space it takes up horizontally?
<textarea class='coder-editor coder-editor-split coder-editor-instant'  data-save='box-model'>
<style>
  .box1 { 
    background-color:teal;
  }

  .box2 { 
    background-color:orange;
  }


</style>

<div class="box1">I'm a box</div>
<div class="box2">I'm a box 2!</div>
</textarea>
</article> 


<article class='slide slide-accent'>
	<h1>How do you layout elements on the page?</h1>
</article>


<article class="slide slide-list">
<h1>Only two ways to layout:</h1>
	<ul>
		<li class="slide">
    <h3>1. Using floats to align things next to each other</h3>
		</li>
		<li class="slide">
			<h3>2. Use “position: absolute; top:...; left:....” inside of a positioned container.</h3>
		</li>
    <style>
.position-example { 
  -webkit-transition: -webkit-transform 1s linear; 
  -webkit-transform: translate(0,0) rotate(0deg); }
.position-example.deck-current {
 -webkit-transform: translate(30px,250px) rotate(15deg);
}
    </style>
		<li class="position-example slide">
    <h3 style=''>(I lied) 3. you can use transforms or flexbox - but let's ignore those for now</h3>
		</li>
	</ul>
</article>

<article class='slide slide-list'>
<h2>Float Exercise</h2>
<h3>navs are a great example of floating elements - we'll make this from a list</h3>
<h3><img src="images/nav-floats.png"/></h3>
</article>

<article class='slide slide-list'>
<h2>Float Exercise</h2>
<textarea class='coder-editor coder-editor-split coder-editor-instant' >
<style>


</style>

<nav>
  <ul>
    <li>home</li>
    <li>about</li>
    <li>shop</li>
    <li>contact</li>
  </ul>
</nav>
</textarea>
<script type='coder-solution'>
<style>
  li {
    list-style:none;
    float:left;
    margin:10px;
    background-color:teal;
    padding:7px 14px;
    color:white;
    text-transform:uppercase;
    font-family:Helvetica;
  }


</style>

<nav>
  <ul>
    <li>home</li>
    <li>about</li>
    <li>shop</li>
    <li>contact</li>
  </ul>
</nav>
</script>

</article> 


<article class='slide slide-homework' id="homework-4">
<h2>Homework</h2>
<ul class='slide'>	
	<li>
    <h3>Finish <a href="http://learnlayout.com/" target="_blank">learnlayout.com</a></h3>
	</li>
	<li>
    <h3><a href="https://www.codecademy.com/learn/web" target="_blank">Units 4 and 5 on Codecademy</a></h3>
	</li>
    <li>
      <h3>Work on CSS for Dobot</h3>				
    </li>
    <li>
      <h3>Wireframe and mockup design for blog post</h3>
    </li>
  </ul>
</ul>
</article>


<script src='dist/coderdeck.min.js'></script>

<!-- Prettify -->
<script src="src/prettify.js"></script>


<script>
	$(function() {
		$.deck('.slide');
	});
</script>
</body>
</html>