#7 Updates for HTML/CSS Lesson 2 for the Glasgow class (#41)

* #7 Don't ask them to work independently on a media queries exercise

* #7 Syntax updates on HTML/CSS Lesson 2 homework

* #7 Remove unnecessary images

* #5, #7 Add mentor guides for HTML/CSS lessons 1 and 2

html-css/lesson2.md

@@ -35,7 +35,7 @@ Finally, we wrap all of our styles for this media query in brackets (`{` and `}`
 
 > **Exercise:** Working in pairs, reduce the size of the "Bikes for Refugees" text so that it fits on a small screen (`320px`). But make sure it increases in size on larger screens.
 
-> **Exercise:** The two buttons in the jumbotron don't fit on the same line on small screens around `320px` wide. Working independently, can you adjust their size so that they fit on the same line?
+> **Exercise:** The two buttons in the jumbotron don't fit on the same line on small screens around `320px` wide. Can you adjust their size so that they fit on the same line?
 
 ## Content Layout: Flexbox
 Flexbox is a name for a set of CSS layout rules which are supported in newer browsers. They allow you to apply rules to elements to place them side-by-side and re-arrange them.
@@ -59,8 +59,8 @@ Now, back to Flexbox. Read this short article on the [align-items](https://css-t
 ## Homework
 1. (Est. 1-2 hours) Complete the "Common Responsive Patterns" lesson of the [Responsive Web Design Fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) course.
 2. (Est. 1-2 hours) Complete as many levels of the [Flexbox Froggy](http://flexboxfroggy.com/) game as you can. This will stretch your knowledge of Flexbox and you may need to do some research. It's ok if you can't complete all levels. Do as many as you can.
-2. Go back to your fork of the Project repo - https://github.com/Code-Your-Future/html-css-project - Revisit the webpage you created in last week's homework assignment. Add a sidebar to your site and move the site description into it. This should appear below the articles on small screens, then switch to a two-column layout with the articles and sidebar sitting side-by-side. Add at least three more articles and then convert them to a grid, so that you show 3 articles per row in a box layout.
-3. (Est. 1-2 hours) Flexbox is relatively new and is not supported in older browsers. In most of your work, you'll use Flexbox. But an employer might want you to use one of the older layout strategies. Read this article to learn about [positioning content in CSS](http://learn.shayhowe.com/html-css/positioning-content/) using floats and absolute positioning.
+3. (Est. 2-3 hours) Continue working on the webpage you created in last week's homework assignment. Add a sidebar to your site and move the site description into it. When viewing on a small screen, this should appear below the articles. On a larger screen, it should switch to a two-column layout with the articles and sidebar sitting side-by-side. Add at least three more articles and then convert them to a grid, so that you show 3 articles per row in a box layout.
+4. (Est. 1-2 hours) Flexbox is relatively new and is not supported in older browsers. In most of your work, you'll use Flexbox. But an employer might want you to use one of the older layout strategies. Read this article to learn about [positioning content in CSS](http://learn.shayhowe.com/html-css/positioning-content/) using floats and absolute positioning.
 
 ## Prepare for the next class
 1. (Est. 1 hour) You may remember Bootstrap from your application process. Look at the documentation for [Bootstrap 4](https://v4-alpha.getbootstrap.com/) and look at their examples to see how they are building components.

html-css/mentor-guide-lesson-1.md

@@ -0,0 +1,86 @@
+# HTML/CSS 1 - Mentor's Outline
+
+This outline provides tips to help mentors guide students to the best answers or outcomes for the lesson topics and exercises.
+
+## HTML Syntax
+
+This is an opportunity for any students who are struggling to get another pass at the basics. Even if it seems like some students get it quickly, try not to rush through this section.
+
+When conducting the parent/child tags exercise, don't forget to point out that the first `<p>` tag is both a parent _and_ a child.
+
+## Code Walkthrough
+
+**Why don't we put everything in one file?**
+
+Discuss:
+- Keeping data separate from display
+- Keeping code organised into manageable parts
+- Syntax highlighting in code editors
+- Linting Tools
+- Working in large teams with narrow skill-sets
+
+## Semantic HTML
+
+HTML elements with the following classes should receive the following semantic tags/attributes:
+
+- `.site-header` -> `<header>`
+- `.navbar` -> `<nav>`
+- `.primary-content` -> `role="main"`
+- `.article` -> `<article>` (check in primary column and sidebar)
+- `.sidebar-content` -> `<aside role="complementary">`
+- `.site-footer` -> `<footer>`
+
+**Who benefits when we write "semantic" HTML?**
+
+Search engines, anyone with a visual impairment who uses a screen reader. Reinforce the distinction between data and display. Data should be meaningful regardless of display.
+
+## CSS Selectors
+
+Students may need more or less review depending on how much they remember from their application process. If students are struggling with the basics, have them go through this [CSS Introduction course](https://www.codecademy.com/courses/web-beginner-en-TlhFi/resume?curriculum_id=50579fb998b470000202dc8b), starting with the CSS Syntax lesson. Mentors should help guide them through and identify where they're struggling.
+
+Students should set the button background color using the `.btn-primary` selector, and adjust the white button using the `.btn-secondary` selector. If they use the `.btn` selector, they'll effect both buttons. When they do that, use it as a lesson in how Object-Oriented CSS works and how to choose the right selector.
+
+## CSS Inheritance
+
+MDN just [says](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Inheritance), "Which properties are inherited by default and which aren't is largely down to common sense." That's kind of true and it's not easy to set out a clear rule.
+
+Use any questions or discussion to reinforce the parent-child relationship. A child element will sit "within" a parent element, so text in a child element will appear on the background of a parent element. That kind of gets at why backgrounds don't inherit but text color does.
+
+## Psuedo Classes
+
+If the students use `.btn:hover` they'll effect the red and white buttons. Make sure they're using the `.btn-primary` and `.btn-secondary` selectors to prevent conflicts.
+
+## The Cascade
+
+See if the students can figure out the first exercise for themselves. But it's likely that some will need help. If there are enough mentors, do this one-on-one. Otherwise, bring it to the group and have one of the students who understands explain to the others.
+
+In the second exercise, students should use the `.active` class that's assigned to that `.nav-item` element. Like this:
+
+```css
+.active .nav-link:hover,
+.active .nav-link:focus {
+	border-color: blue;
+}
+.nav-link:hover,
+.nav-link:focus {
+	border: 1px solid #ce5f31;
+}
+```
+
+## Box Model
+
+For the second exercise, the answer will look something like this:
+
+```css
+.nav-link {
+	border: 1px solid transparent;
+}
+.nav-link:hover,
+.nav-link:focus {
+	border-color: #ce5f31;
+}
+```
+
+## Homework
+
+Make sure they know that the Responsive Web Design Fundamentals course will take up the majority of their homework time, even though it's really preparation for the next class.

html-css/mentor-guide-lesson-2.md

@@ -0,0 +1,53 @@
+# HTML/CSS 2 - Mentor's Outline
+
+This outline provides tips to help mentors guide students to the best answers or outcomes for the lesson topics and exercises.
+
+## Responsive Web Design
+
+Devices to brainstorm together:
+- Phones
+- Tablets
+- Laptops
+- Desktop computers
+- Gaming consoles (Playstation/Xbox)
+- [Apple Watch](https://www.youtube.com/watch?v=wmyth7Bpyyo)
+- Smart devices (fridges, washing machines, TVs)
+- Screen readers
+- Crawlers (search engines)
+
+Use this list to illustrate the range of device sizes we build for. Reinforce the separation between data and display.
+
+## Media Queries
+
+When completing the exercises, make sure they use a "mobile-first" technique. They shouldn't shrink the text on small screens, but enlarge it on bigger screens.
+
+```css
+/* Don't */
+@media (max-width: 480px) {
+	.jumbotron .display-3 {
+		font-size: 3rem;
+	}
+}
+
+/* Do */
+.jumbotron .display-3 {
+	font-size: 3rem;
+}
+@media (min-width: 480px) {
+	.jumbotron .display-3 {
+		font-size: 4.5rem;
+	}
+}
+```
+
+When completing the second exercise, make sure they're only modifying the buttons in the jumbotron. The button in the header shouldn't be effected.
+
+## Content Layout: Flexbox
+
+This lesson is really just intended to get them a bit familiar with flexbox, media queries and thinking about different viewports when doing their layouts. Make sure that students are not relying on Bootstrap's grid when completing these exercises. Make sure they're only using flexbox in `min-width` media queries, and that they're applying sensible class naming patterns and wrapping elements where necessary.
+
+When they add a background and border to the "Learn More" articles, make sure they're adding padding so the text doesn't go right up to the edge. If they are using `px` units, nudge them towards `em` and explain that `em` is often preferred because it scales well when you need to change font size for different viewports.
+
+## Homework
+
+When checking their use of flexbox in their webpage, make sure they're using gutters where appropriate and that they're using the kinds of design patterns you would expect to see on a website (ie - items line up, text is proportionate, etc).