Last major revision before Glasgow Class 3

- Fix #17 Review from @LucyMac
-- Add hint about attributes to semantic tags exercise
-- Add missing <link> in exercise 5
-- Change box model exercise to use pagination component
-- Ask students to remember git command in branching exercise
- Fix #14 Add exercise on child selectors
- Fix #15 Add a real-life flexbox exercise on header/nav
- Resequence exercises
- Fix dead link in project readme
- Add viewport meta tag so examples work in Chromium's responsive mode
- Fix whitespace issues

Author: NateWr

css/week1-conflicting-styles.css

@@ -0,0 +1,4 @@
+/** Conflicting styles that require advanced CSS selectors to override */
+p {
+	color: #000;
+}

css/week1-pagination.css

@@ -0,0 +1,27 @@
+.countries {
+	margin: 0;
+	padding: 1rem;
+	list-style: none;
+	border-bottom: 1px solid #bbb;
+}
+
+.country {
+	margin: 1px 0;
+	padding: 0.5rem;
+	background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+}
+
+.pages {
+	margin-left: 0.5rem;
+}
+
+.pages__page {
+	text-decoration: none;
+}
+
+.pages__showing {
+	display: inline-block;
+	padding: 1rem;
+	float: right;
+}

css/week1.css

@@ -32,14 +32,14 @@ html {
 /* Site title and top navigation */
 .site-header {
 	padding: 0.5rem 1rem;
-	color: rgba(255,255,255,0.9);
 	background: #4491db;
 	border-top-left-radius: 3px;
 	border-top-right-radius: 3px;
 }
 
 .site-header__title {
 	margin: 0;
+	color: rgba(255,255,255,0.9);
 	font-size: 18px;
 	font-weight: 700;
 }
@@ -72,3 +72,8 @@ html {
 	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
 	background: #fff;
 }
+
+/* Site footer area */
+.site-footer {
+	padding: 0.5rem 1rem;
+}

css/week2-nav-menu.css

@@ -0,0 +1,78 @@
+body,
+html {
+	background: #25262f;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-size: 16px;
+	line-height: 1.5em;
+}
+
+.site-wrapper {
+	max-width: 1200px;
+	width: 90%;
+	margin-top: 2vh;
+	margin-left: auto;
+	margin-right: auto;
+	background: #fff;
+	border-radius: 3px;
+	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+}
+
+.site-header {
+	position: relative;
+	top: -1px;
+	padding-top: 1px;
+}
+
+.site-header__logo {
+	display: block;
+	margin: 1rem;
+	width: 50px;
+	height: auto;
+}
+
+.site-header__nav {
+	margin: 1rem 0.5rem;
+}
+
+.site-header__navItem {
+	display: block;
+	padding: 0.25em 0.5em;
+	font-weight: bold;
+	text-decoration: none;
+	text-transform: uppercase;
+	color: #007ab2;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.site-header__navItem:focus,
+.site-header__navItem:hover {
+	border: 1px solid #007ab2;
+	outline: 0;
+}
+
+.site-header__navItem--highlighted {
+	color: #d00a6c;
+}
+
+.site-header__navItem--highlighted:hover,
+.site-header__navItem--highlighted:focus {
+	border-color: #d00a6c;
+}
+
+.site-header__checkout {
+	display: inline-block;
+	margin: 0.5rem;
+	padding: 0.5em 1em;
+	border: 1px solid #007ab2;
+	border-radius: 3px;
+	background: #007ab2;
+	color: #fff;
+	text-decoration: none;
+}
+
+.site-header__checkout:focus,
+.site-header__checkout:hover {
+	background: #009cd4;
+	outline: 0;
+}

images/10/solution-1.png

@@ -12,25 +12,26 @@
     "5": "live-server --open=week-1/5-css-selectors",
     "6": "live-server --open=week-1/6-css-properties",
     "7": "live-server --open=week-1/7-css-box",
-    "8": "live-server --open=week-1/8-git-branch",
-    "9": "live-server --open=week-2/9-media-queries",
-    "10": "live-server --open=week-2/10-flexbox",
-    "11": "live-server --open=week-2/11-justify-content",
-    "12": "live-server --open=week-2/12-align-items",
-    "13": "live-server --open=week-2/13-order",
-    "14": "live-server --open=week-2/14-align-self",
-    "15": "live-server --open=week-2/15-more-flexbox",
-    "16": "live-server --open=week-2/16-git-merge",
-    "17": "live-server --open=week-3/17-search",
-    "18": "live-server --open=week-3/18-labels",
-    "19": "live-server --open=week-3/19-buttons",
-    "20": "live-server --open=week-3/20-checkout",
-    "21": "live-server --open=week-3/21-comments",
-    "22": "live-server --open=week-3/22-dietary",
-    "23": "live-server --open=week-3/23-shirt-size",
-    "24": "live-server --open=week-3/24-checkout-groups",
-    "25": "live-server --open=week-3/25-attributes",
-    "27": "live-server --open=week-3/27-user-experience",
+    "8": "live-server --open=week-1/8-advanced-selectors",
+    "9": "live-server --open=week-1/9-git-branch",
+    "10": "live-server --open=week-2/10-media-queries",
+    "11": "live-server --open=week-2/11-flexbox",
+    "12": "live-server --open=week-2/12-justify-content",
+    "13": "live-server --open=week-2/13-align-items",
+    "14": "live-server --open=week-2/14-order",
+    "15": "live-server --open=week-2/15-align-self",
+    "16": "live-server --open=week-2/16-more-flexbox",
+    "17": "live-server --open=week-2/17-nav-menu",
+    "18": "live-server --open=week-2/18-git-merge",
+    "19": "live-server --open=week-3/19-search",
+    "20": "live-server --open=week-3/20-labels",
+    "21": "live-server --open=week-3/21-buttons",
+    "22": "live-server --open=week-3/22-checkout",
+    "23": "live-server --open=week-3/23-comments",
+    "24": "live-server --open=week-3/24-dietary",
+    "25": "live-server --open=week-3/25-shirt-size",
+    "26": "live-server --open=week-3/26-checkout-groups",
+    "27": "live-server --open=week-3/27-attributes",
     "28": "live-server --open=week-3/28-git-conflict",
     "29": "live-server --open=week-3/29-combined-skills",
     "serve": "live-server"

images/10/solution-2.png

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>1. Parent-Child Relationships - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
 	<link rel="stylesheet" href="/css/message-child-selectors.css">

images/10/solution-3.png

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>2. HTML Attributes - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
 	<link rel="stylesheet" href="/css/message.css">

images/10/example-column.png renamed to images/11/example-column.png

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>3. Semantic HTML - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
 	<link rel="stylesheet" href="/css/message.css">

images/10/example-row.png renamed to images/11/example-row.png

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
 <body>

images/11/solution-1.png

@@ -4,10 +4,12 @@
 <head>
   <meta charset="utf-8">
   <title>5. CSS Selectors - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
 	<link rel="stylesheet" href="/css/message.css">
   <link rel="stylesheet" href="/css/message-css-selectors.css">
+  <link rel="stylesheet" href="message-backgrounds.css">
 </head>
 
 <body>

images/11/solution-2.png

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>6. CSS Properties - HTML, CSS and Git Exercises</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
   <link rel="stylesheet" href="/css/message.css">

images/11/solution-3.png

@@ -2,53 +2,35 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>7. CSS Box Model - HTML, CSS and Git Exercises</title>
-  <link rel="stylesheet" href="/css/normalize.css">
+	<meta charset="utf-8">
+	<title>7. CSS Box Model - HTML, CSS and Git Exercises</title>
+	<link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/week1.css">
-  <link rel="stylesheet" href="/css/message.css">
+	<link rel="stylesheet" href="/css/week1-pagination.css">
 	<link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-  <div class="site-wrapper">
-    <div class="site-header">
-      <div class="site-header__title">Messages</div>
-    </div>
-    <div class="numbers">
-      <div class="number">1</div>
-      <div class="number">2</div>
-      <div class="number">3</div>
-      <div class="number">4</div>
-    </div>
-    <div class="messages">
-			<div class="message">
-				<div class="message__author">Won</div>
-				<p class="message__content">
-					Where should we meet tomorrrow?
-				</p>
-				<time class="message__time message__time--old">Yesterday, 7:25pm</time>
-			</div>
-			<div class="message">
-				<div class="message__author">Luke</div>
-				<p class="message__content">
-					Let's meet at the iCafe in Merchant City.
-					<a href="https://goo.gl/maps/aza4h9nUBhn" class="link link--map">
-						https://goo.gl/maps/aza4h9nUBhn
-					</a>
-				</p>
-				<time class="message__time">7:35pm</time>
-			</div>
-			<div class="message message--unread">
-				<div class="message__author">Won</div>
-				<p class="message__content">
-					Ok!
-					<a href="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" class="link link--gif">https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif</a>
-				</p>
-				<time class="message__time">7:38pm</time>
-			</div>
+	<div class="site-wrapper">
+		<div class="site-header">
+			<div class="site-header__title">Countries</div>
 		</div>
-  </div>
+		<ul class="countries">
+			<li class="country">Afghanistan</li>
+			<li class="country">Albania</li>
+			<li class="country">Algeria</li>
+			<li class="country">Andorra</li>
+			<li class="country">Angola</li>
+		</ul>
+		<div class="pages">
+			<a href="#" class="pages__page">1</a>
+			<a href="#" class="pages__page">2</a>
+			<a href="#" class="pages__page">3</a>
+			<span class="pages__separator">...</span>
+			<a href="#" class="pages__page">38</a>
+			<span class="pages__showing">Showing 5 of 190</span>
+		</div>
+	</divc>
 </body>
 
 </html>