week5 day1

exercises/2-upgraded-layout/README.md

@@ -0,0 +1,15 @@
+###Upgraded Layout
+
+Move your files from the basic layout folder to this folder - use git to check the status, add and commit. Answer question 1 in questions.md
+
+Link reset.css to your index.html and reload the page. Answer question 2 in questions.md.
+
+Adjust your css to look the way you want again.
+
+Make the link text and h1 text change when your mouse hovers over it. See the CSS resources.
+
+Go to google.com/fonts and link a new font in your index.html. Change the font faces of your text to the new font.
+
+Add some icons to your site using FontAwesome.io - download and check out the "Get Started" page.
+
+Finish the questions in questions.md.

exercises/2-upgraded-layout/questions.md

@@ -0,0 +1,35 @@
+####Question Time
+
+	1. What happened in Git when you moved files to a new folder? How did it view and handle this action in status? Did you try checking the status from both the root directory (/1-basic..) and the new one (/2-upgraded..)? What was different about them?
+
+<!-- Your answer here -->
+
+	2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file?
+
+<!-- Your answer here -->
+
+	3. Using Dev Tools, explain which tabs allow you to do the following: 
+		1. Realtime editing of HTML and CSS
+		2. Javascript Debugging
+		3. Performance Optimization
+
+<!-- Your answer here -->
+
+	4. Go to [http://www.postmachina.com/](http://www.postmachina.com/)
+		1. What is the current background color for the page? (Surprisingly, it's not just black!)
+		2. Tweak the background color to white.
+		3. Tweak the height of the side bar that contains the logo. Shrink it down to 85px.
+		4. Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead.
+
+<!-- Your answer here -->
+
+	5. Why can't you tweak the color of the text "The most important things are not things"? Please explain.
+
+<!-- Your answer here -->
+
+	6. Go to [http://www.seamless.com](Seamless)
+	
+		1. What is the largest image on the site? What is the URL? How long does it take to load?
+		2. How did you figure this out?
+
+<!-- Your answer here -->

exercises/2-upgraded-layout/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+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;
+}