adding screenshots and resources

Author: jen4web

01-review/instructions.txt

@@ -1,10 +1,11 @@
 CHAPTER 1: WARM UP EXERCISE
 
-To get those juices flowing for CSS layouts, look at the attached image: https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png
+To get those juices flowing for CSS layouts, look at the image in this folder or online: https://s3-us-west-2.amazonaws.com/s.cdpn.io/3273620/grid1.png
 
 PART 1: FLEXBOX
 Code this layout using Flexbox. 
-Starting CodePen: https://codepen.io/jen4web/pen/dxqjKG
+
+START: https://codepen.io/jen4web/pen/dxqjKG
 
 RULES: 
 - Do not change the HTML!!! See if you can use selectors to do exactly what you want.

05-home page/ch5-lg.png

@@ -4,6 +4,8 @@ I've given you book.html, an inside page layout for the website. It has its own
 
 Go back to layout.css and see if you can edit this stylesheet to apply to the book.html page.
 
+Screenshots for the book page are included so you know how the page should look.
+
 HINTS:
 
 - Where are the flex containers/parents and the flex items/children?

05-home page/ch5-md.png

@@ -17,3 +17,15 @@ https://blog.prototypr.io/defining-a-modular-type-scale-for-web-ui-51acd5df31aa
 Exploring Responsive Type Scales: Finding your (Appropriate, Multi-Device and Vertical) Rhythm
 https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
 
+Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints
+https://css-tricks.com/responsive-designs-and-css-custom-properties-defining-variables-and-breakpoints/
+
+A More Modern Scale for Web Typography
+http://typecast.com/blog/a-more-modern-scale-for-web-typography
+
+FontPair (help pick fonts that work together)
+https://fontpair.co/
+
+30 Great Font Combinations For Your Next Design Project
+https://digitalsynopsis.com/design/best-font-combinations-typeface-pairings-guide/
+

05-home page/ch5-sm.png

@@ -50,6 +50,7 @@ caption {
     font-weight: bold;
     font-size: var(--h2);
     padding: 0.5rem;
+    display: block;
 }
 /* For wider dimensions, change our layout so the table can take the full width of the screen. */
 /* table MQ's */
@@ -76,13 +77,18 @@ caption {
     table{
         display: table;
     }
+    caption {
+        font-size: var(--font-size);
+    }
+
 }
 
 
 /* basic table styling */
+
 table {
     border-collapse: collapse;
-    border: 1px solid black;
+    border: 1px solid #ccc;
 }
 tbody tr:nth-child(odd) {
     background-color: #f6dcd4;