Reorganized/revised typography & nav exercise. Removed ID slide to extra reading resource. Moved quote exercise to HTML exercise #3 and related example files updated.

Author: christinatruong

framework/img/workshop/exercise3-about.png

@@ -1,5 +1,6 @@
 /* GLOBAL STYLES
 -----------------------------------------*/
+
 /* apply a natural box layout model to all elements, but allowing components to change */
 html {
   box-sizing: border-box;
@@ -8,40 +9,29 @@ html {
   box-sizing: inherit;
 }
 
-/* clears floated child elements */
-.clearfix:before,
-.clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-
 body {
   padding: 0;
   margin: 0;
   font-family: "Open Sans", sans-serif;
   color: #333;
 }
-header,
-section {
-  padding: 20px 30px;
-}
 h1 {
   font-family: "Nixie One", serif;
 }
 h1, h2 {
   font-weight: 300;
   text-transform: uppercase;
-  margin: 0;
-  line-height: 1;
+  margin: 0; /* removes default space */
+  line-height: 1; /* tightens up the space between the headings */
 }
 a {
   color: #bf6d50;
   text-decoration: none;
 }
-
+header,
+section {
+  padding: 20px 30px;
+}
 
 /* HEADER
 -----------------------------------------*/
@@ -52,19 +42,17 @@ header h2 {
   font-size: 18px;
 }
 
-
-/* NAVIGATION MENU
------------------------------------------*/
+/* Navigation */
 nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+  list-style-type: none; /* removes bullets */
+  margin: 0; /* removes default margin */
+  padding: 0; /* removes default padding */
 }
 nav ul li {
-  display: inline-block;
+  display: inline-block; /* gets the list items to line up side by side */
 }
 nav a {
-  display: block;
+  display: block; /* changes the element to block */
   padding: 5px 15px;
-  text-transform: uppercase;
+  text-transform: uppercase; 
 }

framework/img/workshop/exercise5-nav.png

@@ -24,8 +24,12 @@ <h2>Web Developer + City Girl</h2>
 			<h2>Hello!</h2>
 
 			<p>[Personal summary or life story here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.</p>
-			<p>Links to stuff about you, if needed. <a href="#">Link example</a> and <a href="#">another link example</a>.</p>
-			<p>Or another paragraph! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque maiores dolor id voluptatibus iure eum hic similique, cum impedit possimus nesciunt deleniti atque fugiat. Nesciunt in ipsum voluptatem debitis nihil!</p>	
+			<p>Links to stuff about you, if needed. <a href="#">Link example</a> and <a href="#">another link example</a>.</p>	
+
+			<blockquote class="quote">
+					<p>The more that you read, the more things you will know. The more that you learn, the more places you'll go.</p>
+					<cite>― Dr. Seuss, I Can Read With My Eyes Shut!</cite>
+			</blockquote>
 		</section>
 
 		<footer>

index.html

@@ -28,6 +28,11 @@ <h2>Hello!</h2>
 			<p>[Personal summary or life story here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.</p>
 			<p>Links to stuff about you, if needed. <a href="#">Link example</a> and <a href="#">another link example</a>.</p>
 			<p>Or another paragraph! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque maiores dolor id voluptatibus iure eum hic similique, cum impedit possimus nesciunt deleniti atque fugiat. Nesciunt in ipsum voluptatem debitis nihil!</p>	
+
+			<blockquote class="quote">
+					<p>The more that you read, the more things you will know. The more that you learn, the more places you'll go.</p>
+					<cite>― Dr. Seuss, I Can Read With My Eyes Shut!</cite>
+			</blockquote>
 		</section>
 
 		<footer>

project/examples/css/exercise5.css

@@ -28,6 +28,11 @@ <h2>Hello!</h2>
 			<p>[Personal summary or life story here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.</p>
 			<p>Links to stuff about you, if needed. <a href="#">Link example</a> and <a href="#">another link example</a>.</p>
 			<p>Or another paragraph! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque maiores dolor id voluptatibus iure eum hic similique, cum impedit possimus nesciunt deleniti atque fugiat. Nesciunt in ipsum voluptatem debitis nihil!</p>	
+
+			<blockquote class="quote">
+					<p>The more that you read, the more things you will know. The more that you learn, the more places you'll go.</p>
+					<cite>― Dr. Seuss, I Can Read With My Eyes Shut!</cite>
+			</blockquote>
 		</section>
 
 		<footer>

project/examples/exercise3-about.html

@@ -7,18 +7,17 @@
 		<link rel="stylesheet" href="css/exercise5.css">
 	</head>
 	<body>
-
-		<nav>
-			<ul>
-				<li><a href="exercise5-home.html">Home</a></li>
-				<li><a href="exercise5-about.html">About</a></li>
-				<li><a href="exercise5-contact.html">Contact</a></li>
-			</ul>
-		</nav>
-
 		<header>
 			<h1>Jane Smith</h1>
 			<h2>Web Developer + City Girl</h2>
+
+			<nav>
+				<ul>
+					<li><a href="exercise5-home.html">Home</a></li>
+					<li><a href="exercise5-about.html">About</a></li>
+					<li><a href="exercise5-contact.html">Contact</a></li>
+				</ul>
+			</nav>
 		</header>
 
 		<footer>