From 9d53d8857eaa1c9405894a88ca75bc4657e42f35 Mon Sep 17 00:00:00 2001
From: msglm <msglm@techchud.xyz>
Date: Sat, 14 Jan 2023 05:31:48 -0600
Subject: Inital Commit

---
 .../Ch10_msglm/10.1.join.html                      |  14 ++
 .../Ch10_msglm/10.2.contact.html                   |  25 +++
 .../Ch10_msglm/10.3.label.html                     |  24 +++
 .../Ch10_msglm/10.4.contactus.html                 |  49 ++++++
 .../Ch10_msglm/10.5.contact2.html                  |  55 +++++++
 .../Ch10_msglm/10.6.mycontact.html                 |  55 +++++++
 .../Ch10_msglm/10.7.comment.html                   |  42 +++++
 .../Ch11_msglm/11.1.podcast/11.1.podcast.html      |  12 ++
 .../Ch11_msglm/11.1.podcast/11.1.podcast.mp3       | Bin 0 -> 965113 bytes
 .../Ch11_msglm/11.1.podcast/11.1.podcast.txt       |  13 ++
 .../Ch11_msglm/11.2.audio/11.2.index.html          |  17 +++
 .../Ch11_msglm/11.2.audio/11.2.podcast.mp3         | Bin 0 -> 965113 bytes
 .../Ch11_msglm/11.2.audio/11.2.podcast.ogg         | Bin 0 -> 571543 bytes
 .../Ch11_msglm/11.2.audio/11.2.podcast.txt         |  13 ++
 .../Ch11_msglm/11.3.video/11.3.index.html          |  27 ++++
 .../Ch11_msglm/11.3.video/11.3.sedona.jpg          | Bin 0 -> 486254 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.m4v          | Bin 0 -> 26059989 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.mov          | Bin 0 -> 6909274 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.ogv          | Bin 0 -> 44467049 bytes
 .../Ch11_msglm/11.4.myiframe.html                  |  13 ++
 .../Ch11_msglm/11.5.transform/11.5.index.html      | 116 ++++++++++++++
 .../Ch11_msglm/11.5.transform/11.5.light.gif       | Bin 0 -> 7550 bytes
 .../Ch11_msglm/11.5.transform/11.5.lighthouse.jpg  | Bin 0 -> 28913 bytes
 .../Ch11_msglm/11.6.transition/11.6.index.html     | 115 ++++++++++++++
 .../Ch11_msglm/11.6.transition/11.6.light.gif      | Bin 0 -> 7550 bytes
 .../Ch11_msglm/11.6.transition/11.6.lighthouse.jpg | Bin 0 -> 28913 bytes
 .../11.7.ch11gallery/11.7.aerie-trail.jpg          | Bin 0 -> 52013 bytes
 .../11.7.ch11gallery/11.7.bear-mountain.jpg        | Bin 0 -> 60492 bytes
 .../11.7.ch11gallery/11.7.broken-arrow-trail.jpg   | Bin 0 -> 44124 bytes
 .../11.7.ch11gallery/11.7.cathedral-rock.jpg       | Bin 0 -> 46197 bytes
 .../Ch11_msglm/11.7.ch11gallery/11.7.index.html    |  91 +++++++++++
 .../Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg | Bin 0 -> 72352 bytes
 .../11.7.ch11gallery/11.7.photo1thumb.jpg          | Bin 0 -> 33988 bytes
 .../11.7.ch11gallery/11.7.photo2thumb.jpg          | Bin 0 -> 24710 bytes
 .../11.7.ch11gallery/11.7.photo3thumb.jpg          | Bin 0 -> 30668 bytes
 .../11.7.ch11gallery/11.7.photo4thumb.jpg          | Bin 0 -> 34634 bytes
 .../11.7.ch11gallery/11.7.photo5thumb.jpg          | Bin 0 -> 28772 bytes
 .../11.7.ch11gallery/11.7.photo6thumb.jpg          | Bin 0 -> 44765 bytes
 .../11.7.ch11gallery/11.7.thunder-mountain.jpg     | Bin 0 -> 39352 bytes
 .../Ch11_msglm/11.8.mybistro/11.8.bistro.css       |  88 +++++++++++
 .../Ch11_msglm/11.8.mybistro/11.8.breakfast.html   |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.coffee.html      |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.contact.html     |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.cuisine.html     |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.dinner.html      |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.directions.html  |  35 +++++
 .../Ch11_msglm/11.8.mybistro/11.8.index.html       |  48 ++++++
 .../11.8.mybistro/11.8.lighthouselogo.jpg          | Bin 0 -> 4616 bytes
 .../Ch11_msglm/11.8.mybistro/11.8.lunch.html       |  35 +++++
 .../Ch11_msglm/11.9.ch11details/11.9.index.html    |  27 ++++
 .../Ch2_msglm/2.1.heading.html                     |  15 ++
 .../Ch. 2 hands-on assignments/Ch2_msglm/2.10.png  | Bin 0 -> 45756 bytes
 .../Ch2_msglm/2.11.structure.html                  |  29 ++++
 .../Ch2_msglm/2.12.casita.html                     |  40 +++++
 .../Ch2_msglm/2.13.blog.html                       |  46 ++++++
 .../Ch2_msglm/2.14.anchor.html                     |  10 ++
 .../Ch2_msglm/2.16/contact.html                    |  34 +++++
 .../Ch2_msglm/2.16/index.html                      |  33 ++++
 .../Ch2_msglm/2.16/services.html                   |  38 +++++
 .../Ch2_msglm/2.2.paragraph.html                   |  22 +++
 .../Ch2_msglm/2.3.linebreak.html                   |  23 +++
 .../Ch2_msglm/2.4.hr.html                          |  24 +++
 .../Ch2_msglm/2.5.blockquote.html                  |  15 ++
 .../Ch2_msglm/2.6.ol.html                          |  16 ++
 .../Ch2_msglm/2.6.ola.html                         |  15 ++
 .../Ch2_msglm/2.7.ul.html                          |  15 ++
 .../Ch2_msglm/2.8.description.html                 |  21 +++
 .../Ch2_msglm/2.9.design.html                      |  26 ++++
 .../Ch2_msglm/block.html                           |  21 +++
 .../Ch. 2 hands-on assignments/Ch2_msglm/em.html   |  15 ++
 .../Ch2_msglm/mypractice/contact.html              |  34 +++++
 .../Ch2_msglm/mypractice/index.html                |  33 ++++
 .../Ch2_msglm/mypractice/services.html             |  38 +++++
 .../Ch2_msglm/starter.html                         |  36 +++++
 .../Ch2_msglm/starter1.html                        |  56 +++++++
 .../Ch2_msglm/target.html                          |  10 ++
 .../Ch2_msglm/template.html                        |   9 ++
 .../Ch4_msglm/4.1.inline.html                      |  12 ++
 .../Ch4_msglm/4.1.inline2.html                     |  13 ++
 .../Ch4_msglm/4.2.embedded.html                    |  53 +++++++
 .../Ch4_msglm/4.4.classid.html                     |  62 ++++++++
 .../Ch4_msglm/4.5.span.html                        |  59 +++++++
 .../Ch4_msglm/4.8.validation.png                   | Bin 0 -> 67021 bytes
 .../Ch4_msglm/CSS/4.3.color.css                    |   6 +
 .../Ch4_msglm/CSS/4.3.external.html                |  12 ++
 .../Ch4_msglm/mycascade/4.7.index.html             |  18 +++
 .../Ch4_msglm/mycascade/4.7.site.css               |   4 +
 .../Ch4_msglm/trillium/4.6.index.html              |  38 +++++
 .../Ch4_msglm/trillium/4.6.services.html           |  35 +++++
 .../Ch4_msglm/trillium/4.6.trillium.css            |  18 +++
 .../Ch5_msglm/ch5practice/5.7.index.html           |  72 +++++++++
 .../Ch5_msglm/ch5practice/background.jpg           | Bin 0 -> 2076 bytes
 .../Ch5_msglm/ch5practice/headerbackblue.jpg       | Bin 0 -> 11868 bytes
 .../Ch5_msglm/ch5practice/hero.jpg                 | Bin 0 -> 44279 bytes
 .../Ch5_msglm/coffee5/5.4.index.html               |  35 +++++
 .../Ch5_msglm/coffee5/5.5.coffeepour.html          |  35 +++++
 .../Ch5_msglm/coffee5/5.8.index.html               |  39 +++++
 .../Ch5_msglm/coffee5/coffee.gif                   | Bin 0 -> 1734 bytes
 .../Ch5_msglm/coffee5/coffeeback.gif               | Bin 0 -> 750 bytes
 .../Ch5_msglm/coffee5/coffeepour.gif               | Bin 0 -> 721222 bytes
 .../Ch5_msglm/coffee5/coffeepour.jpg               | Bin 0 -> 68853 bytes
 .../Ch5_msglm/coffee5/marker.gif                   | Bin 0 -> 663 bytes
 .../Ch5_msglm/figure/5.10.index.html               |  21 +++
 .../Ch5_msglm/figure/myisland.jpg                  | Bin 0 -> 39081 bytes
 .../Ch5_msglm/kayaykch5/5.1.index.html             |  36 +++++
 .../Ch5_msglm/kayaykch5/5.2.index.html             |  45 ++++++
 .../Ch5_msglm/kayaykch5/5.3.index.html             |  49 ++++++
 .../Ch5_msglm/kayaykch5/5.6.index.html             |  58 +++++++
 .../Ch5_msglm/kayaykch5/5.9.index.html             |  50 ++++++
 .../Ch5_msglm/kayaykch5/contact.gif                | Bin 0 -> 1428 bytes
 .../Ch5_msglm/kayaykch5/favicon.ico                | Bin 0 -> 1406 bytes
 .../Ch5_msglm/kayaykch5/hero.jpg                   | Bin 0 -> 44279 bytes
 .../Ch5_msglm/kayaykch5/heroback.jpg               | Bin 0 -> 27618 bytes
 .../Ch5_msglm/kayaykch5/home.gif                   | Bin 0 -> 1252 bytes
 .../Ch5_msglm/kayaykch5/kayakdc.gif                | Bin 0 -> 2635 bytes
 .../Ch5_msglm/kayaykch5/reservations.gif           | Bin 0 -> 2086 bytes
 .../Ch5_msglm/kayaykch5/tours.gif                  | Bin 0 -> 1232 bytes
 .../Ch6_msglm/6.2.boxborder.html                   |  27 ++++
 .../Ch6_msglm/bistroch6/6.3.index.html             |  44 ++++++
 .../Ch6_msglm/bistroch6/background.jpg             | Bin 0 -> 1405 bytes
 .../Ch6_msglm/bistroch6/lighthouselogo.jpg         | Bin 0 -> 7163 bytes
 .../Ch6_msglm/centerch6/6.4.index.html             |  56 +++++++
 .../Ch6_msglm/centerch6/background.jpg             | Bin 0 -> 1405 bytes
 .../Ch6_msglm/centerch6/lighthouselogo.jpg         | Bin 0 -> 7163 bytes
 .../Ch6_msglm/coffeech6/6.1.index.html             |  66 ++++++++
 .../Ch6_msglm/coffeech6/coffeelogo.jpg             | Bin 0 -> 6430 bytes
 .../Ch6_msglm/gradientch6/6.10.index.linear.html   |  23 +++
 .../Ch6_msglm/gradientch6/6.10.index.radial.html   |  23 +++
 .../Ch6_msglm/kayakch6/6.6.index.html              |  87 +++++++++++
 .../Ch6_msglm/kayakch6/headerbackblue.jpg          | Bin 0 -> 11868 bytes
 .../Ch6_msglm/kayakch6/heroback2.jpg               | Bin 0 -> 46452 bytes
 .../Ch6_msglm/opacitych6/6.7.index.html            |  33 ++++
 .../Ch6_msglm/opacitych6/6.8.rgba.html             |  35 +++++
 .../Ch6_msglm/opacitych6/6.9.hsla.html             |  34 +++++
 .../Ch6_msglm/opacitych6/fall.jpg                  | Bin 0 -> 132621 bytes
 .../Ch6_msglm/shadowch6/6.5.index.html             |  59 +++++++
 .../Ch6_msglm/shadowch6/background.jpg             | Bin 0 -> 1405 bytes
 .../Ch6_msglm/shadowch6/lighthouselogo.jpg         | Bin 0 -> 7163 bytes
 .../Ch7_msglm/7.1.box1.html                        |  25 +++
 .../Ch7_msglm/7.1.box2.html                        |  34 +++++
 .../Ch7_msglm/7.3.index.html                       |  63 ++++++++
 .../Ch7_msglm/ch7bistro/7.7.index.html             |  40 +++++
 .../Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg   | Bin 0 -> 28908 bytes
 .../Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg     | Bin 0 -> 4621 bytes
 .../Ch7_msglm/ch7bistro/bistro.css                 |  91 +++++++++++
 .../Ch7_msglm/ch7float/7.2.floatlys.html           |  34 +++++
 .../Ch7_msglm/ch7float/7.2.yls.jpg                 | Bin 0 -> 9028 bytes
 .../Ch7_msglm/ch7hort/7.5.index.html               |  98 ++++++++++++
 .../Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg     | Bin 0 -> 28908 bytes
 .../Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg       | Bin 0 -> 4621 bytes
 .../Ch7_msglm/ch7hover/7.6.index.html              | 102 +++++++++++++
 .../Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg    | Bin 0 -> 28908 bytes
 .../Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg      | Bin 0 -> 4621 bytes
 .../Ch7_msglm/ch7p/README.txt                      |   1 +
 .../Ch7_msglm/ch7p/index.html                      |  66 ++++++++
 .../Ch7_msglm/ch7p/lighthouselogo.jpg              | Bin 0 -> 4621 bytes
 .../Ch7_msglm/ch7p/yls.jpg                         | Bin 0 -> 9028 bytes
 .../Ch7_msglm/ch7p/yogadoor.jpg                    | Bin 0 -> 13626 bytes
 .../Ch7_msglm/ch7spw/README.txt                    |   1 +
 .../Ch7_msglm/ch7vert/7.4.index.html               |  90 +++++++++++
 .../Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg     | Bin 0 -> 28908 bytes
 .../Ch7_msglm/ch7z/7.11.index.html                 | 109 +++++++++++++
 .../Ch7_msglm/ch7z/7.11.lighthouseisland.jpg       | Bin 0 -> 28908 bytes
 .../Ch7_msglm/ch7z/7.11.lighthouselogo.jpg         | Bin 0 -> 4621 bytes
 .../Ch7_msglm/print/7.8.index.html                 |  41 +++++
 .../Ch7_msglm/print/7.8.lighthouseisland.jpg       | Bin 0 -> 28908 bytes
 .../Ch7_msglm/print/7.8.lighthouselogo.jpg         | Bin 0 -> 4621 bytes
 .../Ch7_msglm/print/bistro.css                     |  47 ++++++
 .../Ch7_msglm/print/bistroprint.css                |  55 +++++++
 .../Ch7_msglm/sprites/7.9.index.html               |  41 +++++
 .../Ch7_msglm/sprites/7.9.lighthouseisland.jpg     | Bin 0 -> 28908 bytes
 .../Ch7_msglm/sprites/7.9.lighthouselogo.jpg       | Bin 0 -> 4621 bytes
 .../Ch7_msglm/sprites/7.9.sprites.gif              | Bin 0 -> 2692 bytes
 .../Ch7_msglm/sprites/bistro.css                   |  95 ++++++++++++
 .../Ch8_msglm/ch8center/8.7.2.index.html           |  35 +++++
 .../Ch8_msglm/ch8center/8.7.3.index.html           |  34 +++++
 .../Ch8_msglm/ch8center/8.7.4.a.index.html         |  34 +++++
 .../Ch8_msglm/ch8center/8.7.4.b.index.html         |  34 +++++
 .../Ch8_msglm/ch8center/8.7.lake.jpg               | Bin 0 -> 1183171 bytes
 .../Ch8_msglm/ch8feat/8.6.index.html               | 145 ++++++++++++++++++
 .../Ch8_msglm/ch8feat/8.6.light2.jpg               | Bin 0 -> 4727 bytes
 .../Ch8_msglm/ch8feat/8.6.lighthouse.jpg           | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird1.jpg               | Bin 0 -> 7062 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird2.jpg               | Bin 0 -> 8495 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird3.jpg               | Bin 0 -> 5139 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird4.jpg               | Bin 0 -> 4263 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird5.jpg               | Bin 0 -> 6669 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird6.jpg               | Bin 0 -> 11655 bytes
 .../Ch8_msglm/ch8flex1/8.1.index.html              |  54 +++++++
 .../Ch8_msglm/ch8flex2/8.2.index.html              | 113 ++++++++++++++
 .../Ch8_msglm/ch8flex2/8.2.light.gif               | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8flex2/8.2.lighthouse.jpg          | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird1.jpg               | Bin 0 -> 7062 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird2.jpg               | Bin 0 -> 8495 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird3.jpg               | Bin 0 -> 5139 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird4.jpg               | Bin 0 -> 4263 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird5.jpg               | Bin 0 -> 6669 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird6.jpg               | Bin 0 -> 11655 bytes
 .../Ch8_msglm/ch8grid1/8.3.index.html              |  43 ++++++
 .../Ch8_msglm/ch8grid2/8.4.index.html              | 101 ++++++++++++
 .../Ch8_msglm/ch8grid2/8.4.light2.jpg              | Bin 0 -> 14180 bytes
 .../Ch8_msglm/ch8grid3/8.5.header.jpg              | Bin 0 -> 125611 bytes
 .../Ch8_msglm/ch8grid3/8.5.index.html              | 131 ++++++++++++++++
 .../Ch8_msglm/ch8grid3/8.5.scenery.jpg             | Bin 0 -> 53067 bytes
 .../Ch8_msglm/ch8image/8.12.fallback.jpg           | Bin 0 -> 178497 bytes
 .../Ch8_msglm/ch8image/8.12.index.html             |  14 ++
 .../Ch8_msglm/ch8image/8.12.large.jpg              | Bin 0 -> 176861 bytes
 .../Ch8_msglm/ch8image/8.12.medium.jpg             | Bin 0 -> 86331 bytes
 .../Ch8_msglm/ch8image/8.12.small.jpg              | Bin 0 -> 13565 bytes
 .../Ch8_msglm/ch8picture/8.11.fallback.jpg         | Bin 0 -> 178497 bytes
 .../Ch8_msglm/ch8picture/8.11.index.html           |  18 +++
 .../Ch8_msglm/ch8picture/8.11.large.jpg            | Bin 0 -> 176861 bytes
 .../Ch8_msglm/ch8picture/8.11.large.webp           | Bin 0 -> 123110 bytes
 .../Ch8_msglm/ch8picture/8.11.medium.jpg           | Bin 0 -> 86331 bytes
 .../Ch8_msglm/ch8picture/8.11.medium.webp          | Bin 0 -> 48730 bytes
 .../Ch8_msglm/ch8picture/8.11.small.jpg            | Bin 0 -> 13565 bytes
 .../Ch8_msglm/ch8picture/8.11.small.webp           | Bin 0 -> 9472 bytes
 .../Ch8_msglm/ch8resp/8.8.index.html               | 141 +++++++++++++++++
 .../Ch8_msglm/ch8resp/8.8.light.gif                | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8resp/8.8.lighthouse.jpg           | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8resp2/8.9.index.html              | 170 +++++++++++++++++++++
 .../Ch8_msglm/ch8resp2/8.9.light.gif               | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8resp2/8.9.lighthouse.jpg          | Bin 0 -> 28913 bytes
 .../Ch8_msglm/flexible8/8.10.header.jpg            | Bin 0 -> 125611 bytes
 .../Ch8_msglm/flexible8/8.10.index.html            | 132 ++++++++++++++++
 .../Ch8_msglm/flexible8/8.10.pools.jpg             | Bin 0 -> 57737 bytes
 .../Ch9_msglm/9.1.index.html                       |  32 ++++
 .../Ch9_msglm/9.2.index.html                       |  26 ++++
 .../Ch9_msglm/ch9table/9.3.menu.html               |  61 ++++++++
 .../Ch9_msglm/ch9table/9.4.menu2.html              |  66 ++++++++
 .../chapter1/index.html                            |  19 +++
 231 files changed, 5456 insertions(+)
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html
 create mode 100644 HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html
 create mode 100644 HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html
 create mode 100644 HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif
 create mode 100644 HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg
 create mode 100644 HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif
 create mode 100644 HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg
 create mode 100644 HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html
 create mode 100644 HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html
 create mode 100644 HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html
 create mode 100644 HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html
 create mode 100644 HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html

(limited to 'HTML/Chapter')

diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html
new file mode 100644
index 0000000..d5b7269
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html	
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Form Example</title>
+	</head>
+	<body>
+		<h1>Join Our Newsletter</h1>
+		<form method="get">
+			E-mail: <input type="text" name="email" id="email"><br><br>
+			<input type="submit" value="Sign Me Up!">
+			<input type="reset">
+		</form>
+	</body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html
new file mode 100644
index 0000000..b645165
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Contact Form</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <h1>Contact Us</h1>
+        <form method="get">
+            First Name: <input type="text" name="fname" id="fname">
+            <br>
+            <br>
+            Last Name: <input type="text" name="lname" id="lname">
+            <br>
+            <br>
+            E-mail: <input type="text" name="email" id="email">
+            <br>
+            <br>
+            Comments:<br>
+            <textarea name="comments" id="comments" rows=4 cols=40></textarea><br>
+            <br>
+            <input type="submit" value="Contact"> <input type="reset">
+        </form>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html
new file mode 100644
index 0000000..5c4e64f
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html	
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Contact Form</title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <h1>Contact Us</h1>
+        <form method="get">
+            <label>First Name: <input type="text" name="fname" id="fname"
+                <input type="text" name="fname" id="fname"><br><br>
+            </label>
+                <label>Last Name: <input type="text" name="lname" id="lname"
+                    <input type="text" name="lname" id="lname"><br><br>
+                </label>
+                    <label>E-mail: <input type="text" name="email" id="email"
+                        <input type="text" name="email" id="email"><br><br>
+                    </label>
+                        <label for="comments">Comments:</label><br>
+                        <textarea name="comments" id="comments" rows="4" cols="40"></textarea><br><br>
+                        <input type="submit" value="Contact"> <input type="reset">
+        </form>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html
new file mode 100644
index 0000000..1893bec
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html	
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Contact Form</title>
+        <meta charset="utf-8">
+        <style>
+input[type="submit"] {
+    margin-left: 110px; 
+}
+
+form { 
+    background-color: #EAEAEA;
+    font-family: Arial, sans-serif;
+    width: 350px; 
+    padding: 10px;
+}
+
+    label { 
+        float: left; 
+        clear: left; 
+        display: block;
+        width: 100px; 
+        padding-right: 10px;
+        margin-top: 10px; 
+        text-align: right; 
+    }
+
+    input { 
+        display: block; margin-top: 10px; 
+    }
+
+    textarea { 
+        display: block; margin-top: 10px; 
+    }
+        </style>
+    </head>
+    <body>
+        <h1>Contact Us</h1>
+        <form method="get">
+            <label for="myName">Name:</label>
+            <input type="text" name="myName" id="myName">
+            <label for="myEmail">E-mail:</label>
+            <input type="text" name="myEmail" id="myEmail">
+            <label for="myComments">Comments:</label>
+            <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+            <input id="mySubmit" type="submit" value="Submit">
+        </form>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html
new file mode 100644
index 0000000..6977d05
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html	
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Contact Form</title>
+        <meta charset="utf-8">
+        <style>
+
+
+form { background-color: #EAEAEA;
+    font-family: Arial, sans-serif;
+    width: 350px; padding: 10px;}
+label { float: left; clear: left;
+    display: block; width: 100px; 
+    text-align: right; 
+    padding-right: 10px;
+    margin-top: 10px; }
+input, textarea { margin-top: 10px; 
+    display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+    form { 
+        display: grid;
+        grid-template-rows: auto;
+        grid-template-columns: 6em 1fr;
+        grid-gap: 1em; 
+        gap: 1em;
+        background-color: #EAEAEA;
+        font-family: Arial, sans-serif;
+        width: 60%; 
+        min-width: 20em;
+        padding: 2em; 
+    }
+
+    input[type="submit"] { 
+        grid-column: 2 / 3;
+        width: 10em; margin-left: 0; 
+    }
+}
+        </style>
+    </head>
+    <body>
+        <h1>Contact Us</h1>
+        <form>
+            <label for="myName">Name:</label>
+            <input type="text" name="myName" id="myName">
+            <label for="myEmail">E-mail:</label>
+            <input type="text" name="myEmail" id="myEmail">
+            <label for="myComments">Comments:</label>
+            <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+            <input type="submit" value="Submit">
+        </form>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html
new file mode 100644
index 0000000..a922c22
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html	
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Contact Form</title>
+        <meta charset="utf-8">
+        <style>
+
+
+form { background-color: #EAEAEA;
+    font-family: Arial, sans-serif;
+    width: 350px; padding: 10px;}
+label { float: left; clear: left;
+    display: block; width: 100px; 
+    text-align: right; 
+    padding-right: 10px;
+    margin-top: 10px; }
+input, textarea { margin-top: 10px; 
+    display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+    form { 
+        display: grid;
+        grid-template-rows: auto;
+        grid-template-columns: 6em 1fr;
+        grid-gap: 1em; 
+        gap: 1em;
+        background-color: #EAEAEA;
+        font-family: Arial, sans-serif;
+        width: 60%; 
+        min-width: 20em;
+        padding: 2em; 
+    }
+
+    input[type="submit"] { 
+        grid-column: 2 / 3;
+        width: 10em; margin-left: 0; 
+    }
+}
+        </style>
+    </head>
+    <body>
+        <h1>Contact Us</h1>
+        <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+            <label for="myName">Name:</label>
+            <input type="text" name="myName" id="myName">
+            <label for="myEmail">E-mail:</label>
+            <input type="text" name="myEmail" id="myEmail">
+            <label for="myComments">Comments:</label>
+            <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+            <input type="submit" value="Submit">
+        </form>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html
new file mode 100644
index 0000000..f97c3c3
--- /dev/null
+++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html	
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Comment Form</title>
+        <meta charset="utf-8">
+        <style>
+label { display: block;
+    margin-top: 20px; }
+input { display: block;
+    margin-bottom: 20px; }
+        </style>
+    </head>
+    <body>
+        <h1>Comment Form</h1>
+        <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+            <label for="myFirstName">* First Name</label>
+            <input type="text" name="myFirstName" 
+                               id="myFirstName" required="required" 
+                                                placeholder="your first name">
+            <label for="myLastName">* Last Name</label>
+            <input type="text" name="myLastName"
+                               id="myLastName" required="required"
+                                               placeholder="your last name">
+            <label for="myEmail">* E-mail</label>
+            <input type="email" name="myEmail" id="myEmail"
+                                               required="required"
+                                               placeholder="you@yourdomain.com">
+            <label for="myRating">Rating (1 &mdash; 10)
+            </label>
+            <input type="range" name="myRating"
+                                id="myRating" min="1" max="10">
+            <label for="myComments">* Comments</label>
+            <textarea name="myComments" id="myComments"
+                                        rows="2" cols="40"
+                                                 required="required"
+                                                 placeholder="your comments here">
+            </textarea>
+            <input type="submit" value="Submit">
+        </form>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html
new file mode 100644
index 0000000..cd50e92
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html	
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Podcast</title>
+    </head>
+    <body>
+        <h1>Web Design Podcast</h1>
+        <a href="11.1.podcast.mp3">Podcast Episode 1</a> (MP3)
+        <br>
+        <a href="11.1.podcast.txt">Podcast Transcript</a>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3
new file mode 100644
index 0000000..6190438
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt
new file mode 100644
index 0000000..8ebd91f
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt	
@@ -0,0 +1,13 @@
+Welcome to an example podcast.
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast!
\ No newline at end of file
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html
new file mode 100644
index 0000000..77739e4
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html	
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Podcast</title>
+    </head>
+    <body>
+        <h1>Web Design Podcast</h1>
+        <audio controls>
+            <!--I usually put ogg first because of better compression-->
+            <source src="11.2.podcast.ogg" type="audio/ogg">
+            <source src="11.2.podcast.mp3" type="audio/mpeg">
+            <a href="11.2.podcast.mp3">download the Podcast</a> (MP3)
+        </audio>
+        <br>
+        <a href="11.2.podcast.txt">Podcast Transcript</a>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3
new file mode 100644
index 0000000..6190438
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg
new file mode 100644
index 0000000..ab1c589
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt
new file mode 100644
index 0000000..4c5d526
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt	
@@ -0,0 +1,13 @@
+Welcome to an example podcast. 
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast! 
\ No newline at end of file
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html
new file mode 100644
index 0000000..5263d3e
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html	
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Sedona Scenes</title>
+        <meta charset="utf-8">
+    </head>
+    <style>
+    video { 
+        width: 100%;
+        height: auto;
+        max-width:1280px;
+    }
+    </style>
+    <body>
+        <h1>Sedona Scenes</h1>
+        <video controls poster="11.3.sedona.jpg">
+            <!--
+                I prefer to put free formats first
+                I personally would have chose webm over ogv
+            -->
+            <source src="11.3.sedona.ogv" type="video/ogg">
+            <source src="11.3.sedona.m4v" type="video/mp4"> 
+            <a href="11.3.sedona.mov">Photos of Sedona</a> (.mov)
+        </video>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg
new file mode 100644
index 0000000..33d66f0
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v
new file mode 100644
index 0000000..73744ca
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov
new file mode 100644
index 0000000..87b800c
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv
new file mode 100644
index 0000000..5a26118
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html
new file mode 100644
index 0000000..8ada3f1
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html	
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Iframe Example</title>
+    </head>
+    <body>
+        <h1>iframe example</h1>
+        <iframe src="https://www.youtube.com/embed/2CuOug8KDWI"
+                width="640" height="385">
+            <a href="https://www.youtube.com/embed/2CuOug8KDWI">YouTube Video</a>
+        </iframe>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html
new file mode 100644
index 0000000..2911854
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html	
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+	
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none; 
+         margin: 0;
+         padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none; 
+        display: block;
+		padding: 1em 2em;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover {  color: #000066;
+               background-color: #eaeaea;
+}
+header { background-color: #869DC7;
+        color: #00005D; 
+		background-image: url(11.5.light.gif); 
+		background-repeat: no-repeat;
+		padding: 2em 0 2em 7em;
+        font-size: 120%;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main  { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+         padding: 8px;
+		 width: 265px;
+		 background-color: #FFF;
+		 border: 1px solid #CCC;
+		 box-shadow: 5px 5px 5px #828282;
+         transform: rotate(3deg);
+}
+figcaption { text-align: center;
+		   font-size: .8em;
+		   font-style: italic;
+}
+footer { background-color: #869DC7;
+         font-size:70%;
+         text-align: center;
+         padding: 2em;
+		 clear: both;
+}
+#offer { background-color: #eaeaea;
+         width: 10em;
+		 margin: 2em auto 0 auto;
+		 text-align: center;
+         transform:scale(2);
+}
+#offer a { text-decoration: none;
+            color: #FF0000;		  
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }   
+nav      { flex: none; }
+main     { flex: 6; 
+           min-width: 20em; 
+           background-color: #FFFFFF; }
+aside    { flex: 4; 
+            background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style> 
+</head>
+<body>
+  <header>
+    <h1>Lighthouse Bistro</h1>
+  </header>
+  <div id="content">
+    <nav>
+	<ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+    </nav>
+  <main> 
+     <h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.<br><br></p>
+    <div id="offer">
+    <a href="#">Special Offer</a>
+    </div>
+ </main>
+   <aside>
+       <figure>
+         <img src="11.5.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+         <figcaption>Cana Island Lighthouse</figcaption>
+	   </figure>
+   </aside>
+   </div>
+     <footer>Copyright &copy;     </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html
new file mode 100644
index 0000000..be94ed7
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html	
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+	
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none; 
+         margin: 0;
+         padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none; 
+        display: block;
+		padding: 1em 2em;
+        transition: background-color 2s linear;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover {  color: #000066;
+               background-color: #EAEAEA;
+}
+header { background-color: #869DC7;
+        color: #00005D; 
+		background-image: url(11.6.light.gif); 
+		background-repeat: no-repeat;
+		padding: 2em 0 2em 7em;
+        font-size: 120%;
+}
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+main  { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+         padding: 8px;
+		 width: 265px;
+		 background-color: #FFF;
+		 border: 1px solid #CCC;
+		 box-shadow: 5px 5px 5px #828282;
+}
+figcaption { text-align: center;
+		   font-size: .8em;
+		   font-style: italic;
+}
+footer { background-color: #869DC7;
+         font-size:70%;
+         text-align: center;
+         padding: 2em;
+		 clear: both;
+}
+#offer { background-color: #eaeaea;
+         width: 10em;
+		 margin: 2em auto 0 auto;
+		 text-align: center;
+}
+#offer a { text-decoration: none;
+            color: #FF0000;		  
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }   
+nav      { flex: none; }
+main     { flex: 6; 
+           min-width: 20em; 
+           background-color: #FFFFFF; }
+aside    { flex: 4; 
+            background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style> 
+</head>
+<body>
+  <header>
+    <h1>Lighthouse Bistro</h1>
+  </header>
+  <div id="content">
+    <nav>
+	<ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+    </nav>
+  <main> 
+     <h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.<br><br></p>
+    <div id="offer">
+    <a href="#">Special Offer</a>
+    </div>
+ </main>
+   <aside>
+       <figure>
+         <img src="11.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+         <figcaption>Cana Island Lighthouse</figcaption>
+	   </figure>
+   </aside>
+   </div>
+     <footer>Copyright &copy;     </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg
new file mode 100644
index 0000000..7c079d6
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg
new file mode 100644
index 0000000..daef5a5
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg
new file mode 100644
index 0000000..0ca7e32
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg
new file mode 100644
index 0000000..428399a
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html
new file mode 100644
index 0000000..b062c17
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html	
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>	
+        <title>First HTML Webpage</title>
+        <meta charset="utf-8">
+    </head>
+    <style>    
+
+body { 
+    font-family: Trajan Pro, Verdana, Arial;
+}
+
+h1 { 
+    padding: .5em;
+    height: 2em;
+}
+
+.gallery { 
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 70%;
+    margin: auto;
+}
+
+figure { 
+    position: relative;
+    opacity: .75;
+    transition: all ease-out 3s;
+    margin: 1em;
+    z-index: 1;
+    background-color: #FFF;
+    color: rgba(0,0,0,0);
+    font-size: .5em;
+    text-align: center;
+}
+
+figure:hover { 
+    opacity: 1;
+    transform: scale(3);
+    z-index: 999;
+    box-shadow: 3px 3px 3px #333;
+    color: rgba(0, 0, 0, 1);
+}
+
+    </style>
+    <body>
+        <h1>Image Gallery</h1>
+        <div id=gallery>
+
+            <figure><a href="11.7.broken-arrow-trail.jpg"><img src="11.7.photo1thumb.jpg" width=100 height=100 alt="Broken Arrow Trail, Sedona, Arizona"></a>
+                <figcaption>Broken Arrow</figcaption>
+            </figure>
+
+            <figure>
+                <a href="11.7.thunder-mountain.jpg"><img src="11.7.photo2thumb.jpg" width=100 height=100 alt="Thunder Mountain, Sedona, Arizona"></a>
+                <figcaption>Thunder Mountain</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.bear-mountain.jpg"><img src="11.7.photo3thumb.jpg" width=100 height=100 alt="Bear Mountain, Sedona, Arizona"></a>
+                <figcaption>Bear Mountain</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.aerie-trail.jpg"><img src="11.7.photo4thumb.jpg" width=100 height=100 alt="Aerie Trail, Sedona, Arizona"></a>
+                <figcaption>Aerie Trail</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.cathedral-rock.jpg"><img src="11.7.photo5thumb.jpg" width=100 height=100 alt="Cathedral Rock, Sedona, Arizona"></a>
+                <figcaption>Cathedral Rock</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.oak-creek.jpg"><img src="11.7.photo6thumb.jpg" width=100 height=100 alt="Oak Creek, Sedona, Arizona"></a>
+                <figcaption>Oak Creek</figcaption>
+            </figure>
+
+        </div>
+    </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg
new file mode 100644
index 0000000..202b674
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg
new file mode 100644
index 0000000..4822af2
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg
new file mode 100644
index 0000000..6c318be
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg
new file mode 100644
index 0000000..a14d215
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg
new file mode 100644
index 0000000..9208138
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg
new file mode 100644
index 0000000..cf423e4
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg
new file mode 100644
index 0000000..10bdb89
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg
new file mode 100644
index 0000000..09b5dca
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css
new file mode 100644
index 0000000..f5084fc
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css	
@@ -0,0 +1,88 @@
+* { box-sizing: border-box; }
+body { font-family: Verdana, Arial, sans-serif;
+    background-color: #EAEAEA;
+    margin: 0;
+}
+#wrapper {  
+    color: #000066;
+    background-color: #FFFFFF;
+
+} 
+header { font-family: Georgia, "Times New Roman", serif;
+    color: #00005D; 
+    background-color: #869dc7; 
+    background-image: url(11.8.lighthouselogo.jpg);
+    background-repeat: no-repeat;
+    margin-top: 0;
+    padding-bottom: 1em;
+    min-height: 120px;
+    height: auto;
+}
+header h1 { padding-left: 120px;
+    padding-top: 40px;
+    margin: 0; 	  
+}
+header span { font-style: italic;
+    font-weight: bold;
+    font-size: 95%;
+    color: #FFFFFF;
+    padding-left: 30%;
+}
+nav {  background-color: #00005D; 
+    letter-spacing: 0.1em;
+    font-weight: bold;
+    padding-right: 2em;
+} 
+nav ul { list-style-type: none; 
+    margin: 0;
+}
+
+nav li { padding: 0.5em;
+    display: inline-block;
+}
+nav a { text-decoration: none; 
+    display: block;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover {  color: #D3DBEB;}
+main { background-color: #ffffff;
+    color: #000000;
+    padding: 10px 20px;
+
+} 
+
+h2 { color: #869dc7; 
+    font-family: arial, sans-serif;
+    margin: 5px;
+}
+
+
+footer {font-size:70%;
+    text-align: center;
+    padding: 10px;
+    clear: both;
+}
+header, main, nav, footer, figure, figcaption { display: block; }
+@media (min-width: 600px) {
+    #wrapper { margin: auto; 
+    width: 80%; }
+    header span { padding-left: 25%; }
+}		 
+
+nav ul ul { 
+    position: absolute;
+    background-color: #5564A0;
+    padding: 0;
+    display: none; 
+}
+nav ul ul li { 
+    border: 1px solid #00005D;
+    display: block;
+    width: 8em;
+    padding-left: 1em;
+    margin-left: 0; 
+}
+nav li:hover ul { 
+    display: block; 
+}
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html
new file mode 100644
index 0000000..4464d33
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Breakfast at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Breakfast Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html
new file mode 100644
index 0000000..e387b85
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Coffee</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Coffee Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html
new file mode 100644
index 0000000..c958c16
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Contact Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Contact Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html
new file mode 100644
index 0000000..e597a05
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Cuisine</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Cuisine Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html
new file mode 100644
index 0000000..fd20d0b
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Dinner at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Dinner Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html
new file mode 100644
index 0000000..aaaeb66
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Directions</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Directions Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html
new file mode 100644
index 0000000..cbfd2f1
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="11.8.bistro.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="wrapper">  
+            <nav>
+                <ul>
+                    <li><a href="11.8.index.html">Home</a></li>
+                    <li><a href="11.8.coffee.html">Coffee</a></li>
+                    <li><a href="11.8.cuisine.html">Cuisine</a>
+                        <ul>
+                            <li><a href="11.8.breakfast.html">Breakfast</a></li>
+                            <li><a href="11.8.lunch.html">Lunch</a></li>
+                            <li><a href="11.8.dinner.html">Dinner</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="11.8.directions.html">Directions</a></li>
+                    <li><a href="11.8.contact.html">Contact</a></li>
+                </ul> 
+            </nav>
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+                <span>the best coffee on the coast</span>
+            </header>  
+            <main> 
+                <h2>Locally Roasted Free-Trade Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunch and Light Dinners</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery!</p>
+                <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+            </main> 
+            <footer>Copyright &copy; 2020
+            </footer>
+        </div> 
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg
new file mode 100644
index 0000000..3893f16
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html
new file mode 100644
index 0000000..3e2483e
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lunch at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">  
+  <nav>
+    <ul>
+	 <li><a href="11.8.index.html">Home</a></li>
+	 <li><a href="11.8.coffee.html">Coffee</a></li>
+     <li><a href="11.8.cuisine.html">Cuisine</a></li>
+     <li><a href="11.8.directions.html">Directions</a></li>
+     <li><a href="11.8.contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+  <header>
+      <h1>Lighthouse Island Bistro</h1>
+   <span>the best coffee on the coast</span>
+  </header>  
+   <main> 
+   	<h2>Lunch Page</h2>
+    <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+	</main> 
+   <footer>Copyright &copy; 2020
+   </footer>
+  </div> 
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html
new file mode 100644
index 0000000..e9f8d04
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html	
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Principles of Visual Design</title>
+    </head>
+    <body>
+        <h1>Principles of Visual Design</h1>
+
+        <details>
+            <summary>Repetition</summary>
+            <p>Repeat visual components throughout the design</p>
+        </details>
+        <details>
+            <summary>Contrast</summary>
+            <p>Add visual excitement and draw attention</p>
+        </details>
+        <details>
+            <summary>Proximity</summary>
+            <p>Group related items</p>
+        </details>
+        <details>
+            <summary>Alignment</summary>
+            <p>Align elements to create visual unity</p>
+        </details>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html
new file mode 100644
index 0000000..bf901fa
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html	
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png
new file mode 100644
index 0000000..c0c553f
Binary files /dev/null and b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png differ
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html
new file mode 100644
index 0000000..78d7e90
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>Home &nbsp; Services &nbsp; Contact</b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company&apos;s Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business. </p>
+</main>
+<footer>
+    <i><small>Copyleft &#127279; 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></i>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html
new file mode 100644
index 0000000..a4549b4
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Casita Sedona Bed &amp; Breakfast</h1>
+</header>
+<nav>
+  <b>
+    Home &nbsp; 
+    Rooms &nbsp; 
+    Events &nbsp; 
+    Contact
+  </b>
+</nav>
+<main>
+ <h2>Stay in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed &amp; Breakfast you&apos;ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h3>Luxurious Rooms </h3>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks.</p>
+ <div>
+   <strong>Casita Sedona Bed &amp; Breakfast</strong><br>
+   612 Tortuga Lane<br>
+   Sedona, AZ 86336<br>
+   928-555-5555<br><br>
+ </div>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html
new file mode 100644
index 0000000..497798f
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro Blog</title>
+<meta charset="utf-8">
+</head>
+<body>
+  <header>
+    <h1>Lighthouse Bistro</h1>
+  </header> 
+  <nav>
+    <b>
+    Home &nbsp; 
+    Menu &nbsp; 
+    Blog &nbsp; 
+    Contact
+  </b> 
+   </nav> 
+  <main> 
+   <section>
+    <aside><p><i>Watch for the March Madness Wrap next month!</i></p></aside>
+    <h2>Bistro Blog</h2>
+
+    <article>
+       <header><h3>Valentine Wrap</h3></header>
+       <time datetime="2022-02-01">February 1, 2022</time>
+       <p>The February special sandwich is the Valentine Wrap &mdash;
+        heart-healthy organic chicken with roasted red peppers on a
+        whole wheat wrap.</p>
+    </article>
+    <article>
+       <header><h3>New Coffee of the Day Promotion</h3></header>
+       <time datetime="2022-01-12">January 12, 2022</time>
+       <p>Enjoy the best coffee on the coast in the comfort of your
+       home. We will feature a different flavor of our gourmet,
+       locally roasted coffee each day with free bistro tastings and a
+       discount on one-pound bags.</p>
+    </article>
+   </section>
+  </main> 
+  <footer>Copyleft &#127279; 2022
+  </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html
new file mode 100644
index 0000000..815ca8c
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html	
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html
new file mode 100644
index 0000000..8ca9ab7
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+   <li>E-mail: <a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a></li>
+   <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html
new file mode 100644
index 0000000..a933d75
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company&apos;s Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html
new file mode 100644
index 0000000..68cc664
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+  <dl>
+   <dt><strong>Website Design</strong></dt>
+   <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+    <dt><strong>E-Commerce Solutions</strong></dt>
+   <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+   <dt><strong>Search Engine Optimization</strong></dt>
+   <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html
new file mode 100644
index 0000000..60e1fd3
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html	
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Paragraph Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>Sample Test Paragraph. </p>
+<h2>Test 2</h2> 
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html
new file mode 100644
index 0000000..c7098a7
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Line Break Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>This is a sample paragraph. <br /> This is a linebreak test. 
+</p>
+<h2>Test 2</h2> 
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html
new file mode 100644
index 0000000..8c95b56
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html	
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Horizontal Rule Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Heading Level 1</h1>
+<p>This is a sample paragraph. <br> Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content. 
+</p>
+<hr>
+<h2>Heading Level 2</h2> 
+<h3>Heading Level 3</h3>
+<h4>Heading Level 4</h4>
+<h5>Heading Level 5</h5>
+<h6>Heading Level 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html
new file mode 100644
index 0000000..fa5ce63
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html	
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Richard Stallman, the inventor of the GNU Operating system and founder of the Free Software Foundation, from the <a href=https://www.gnu.org/gnu/manifesto.en.html>GNU Manifesto</a>:
+</p>
+<blockquote>
+The idea of copyright did not exist in ancient times, when authors frequently copied other authors at length in works of non-fiction. This practice was useful, and is the only way many authors' works have survived even in part.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html
new file mode 100644
index 0000000..541373b
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html	
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol>
+    <li>Blue</li>
+    <li>Green</li>
+    <li>Teal</li>
+
+</ol>	
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html
new file mode 100644
index 0000000..e5eaead
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html	
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol type="A">
+    <li>Blue</li>
+    <li>Green</li>
+    <li>Teal</li>
+</ol>	
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html
new file mode 100644
index 0000000..87004b2
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html	
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ul>
+    <li>Blue</li>
+    <li>Teal</li>
+    <li>Red</li>
+</ul>	
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html
new file mode 100644
index 0000000..e0900e8
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Description List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Sample Description List</h1>
+<dl>
+  <dt>TCP</dt>
+    <dd>Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of message units, called packets, between computers over the Internet.</dd>
+  <dt>IP</dt>
+    <dd>Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address.</dd>
+  <dt>FTP</dt>
+    <dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet. </dd>
+  <dt>HTTP</dt>
+    <dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.</dd>
+</dl>
+</body>
+</html>
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html
new file mode 100644
index 0000000..140d5cc
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html	
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Creative Commons</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Web Design Steps</h1>
+    <ul>
+  <li><strong>Determine the Intended Audience</strong><br>
+    The colors, images, fonts, and layout should be tailored to the
+    <em>preferences of your audience.</em> The type of site content (reading level, amount of  animation, etc.) should be appropriate for your chosen audience.</li>
+  <li><strong>Determine the Goals of the Site</strong><br>
+    Some common goals of web sites are: to be informative, to create a personal home page, to establish a corporate web presence, and to do business in e-commerce.</li>
+  <li><strong>Determine the General Content and Create a Site Map</strong><br>
+    The site map is sometimes called a Storyboard. Common organizational structures for Web sites are: hierarchical, linear,  and random.</li>
+  <li><strong>Sketch a Tentative Page Layout</strong><br>
+    <em>Be consistent</em> in your overall layout &mdash; color, typefaces, logo location,
+    navigation bar, etc. Plan your Home Page Layout to avoid scrolling.
+    Plan your Content Page Layout to be consistent, with easy navigation.</li>
+</ul>
+
+
+<p><small>Copyleft &#127279; 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html
new file mode 100644
index 0000000..073816e
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Block Anchor</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+<a href="http://www.w3.org/TR/html-markup">
+<h1>HTML5 Reference</h1>
+<p>Bookmark this site for a handy HTML5 reference.</p>
+</a>
+</header>
+<main>
+<p>
+Website content goes here
+</p>
+</main>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html
new file mode 100644
index 0000000..7213b6f
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html	
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Tim Berners-Lee, the inventor of the World Wide Web, at https://www.w3.org/Press/IPO-announce:
+</p>
+<blockquote>
+The power of the Web is in its universality. <em>Access by everyone</em> regardless of disability is an essential aspect.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html
new file mode 100644
index 0000000..a89283d
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+   <li>E-mail: contact@trilliummediadesign.com</li>
+   <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html
new file mode 100644
index 0000000..a933d75
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company&apos;s Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html
new file mode 100644
index 0000000..68cc664
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+  <h1>Trillium Media Design</h1>
+</header>
+<nav>
+  <b>
+     <a href="index.html">Home</a> &nbsp; 
+     <a href="services.html">Services</a> &nbsp; 
+	 <a href="contact.html">Contact</a>
+  </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+  <dl>
+   <dt><strong>Website Design</strong></dt>
+   <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+    <dt><strong>E-Commerce Solutions</strong></dt>
+   <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+   <dt><strong>Search Engine Optimization</strong></dt>
+   <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+  <small><i>Copyleft &#127279; 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html
new file mode 100644
index 0000000..9e7949d
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+</head>
+<body>
+  <header>
+    <h1>Lighthouse Bistro</h1>
+  </header> 
+  <nav>
+    <b>
+    Home &nbsp; 
+    Menu &nbsp; 
+    Blog &nbsp; 
+    Contact
+  </b> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+    <h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> 
+   <footer>Copyright &copy; 2022
+   </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html
new file mode 100644
index 0000000..1e45a3d
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html	
@@ -0,0 +1,56 @@
+<!DOCTYPE html> 
+<html lang="en">
+<head>
+<title>Favorite Sites</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Favorite Sites</h1>
+<ul>
+  <li>Hobbies</li>
+  <li>HTML5</li>
+  <li>CSS</li>
+</ul>
+<h2>Hobbies</h2>
+     <dl>
+       <dt>Running</dt>
+         <dd><a href="http://www.runningnetwork.com">http://www.runningnetwork.com</a></dd>
+       <dt>Cooking</dt>
+         <dd><a href="http://www.cooking.com">http://www.cooking.com</a></dd>
+     </dl>
+<h2>HTML5</h2>
+     <dl>
+       <dt>Elements</dt>
+          <dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
+       <dt>Tutorials</dt>
+          <dd><a href="http://www.w3schools.com/html5">http://www.w3schools.com/html5</a></dd>
+       </dl>
+<h2>CSS</h2>
+     <dl>
+       <dt>W3C Cascading Style Sheets</dt>
+          <dd><a href="http://www.w3.org/Style/CSS">http://www.w3.org/Style/CSS</a></dd>
+       <dt>Tutorials</dt>
+          <dd><a href="http://www.w3schools.com/css3">http://www.w3schools.com/css3</a></dd>
+     </dl>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<h2>Back to Top</h2>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html
new file mode 100644
index 0000000..b91aef0
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html	
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net" target="_blank">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html
new file mode 100644
index 0000000..6a48229
--- /dev/null
+++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html	
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html
new file mode 100644
index 0000000..4de4e5f
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html	
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Inline CSS Example</title>
+</head>
+<meta charset="utf-8">
+<body style="background-color:#F5F5F5;color:#008080;">
+    <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1>
+    <p>This paragraph inherits the styles applied to the body tag.</p>
+    <!--This is exactly what the book requests, it's so simple that no differentiation or style could really be done-->
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html
new file mode 100644
index 0000000..bef46cd
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html	
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Inline CSS Example</title>
+</head>
+<meta charset="utf-8">
+<body>
+    <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1>
+    <p>This paragraph inherits the styles applied to the body tag.</p>
+    <p style="color:#333333">This paragraph overrides the text color style applied to the body tag.</p> 
+<!--This is so simple that any deviation would result in penalties. Please do not consider this copied-->
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html
new file mode 100644
index 0000000..cb14841
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html	
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body { 
+    background-color: #F9F0FE;
+    color: #5B3256;
+}
+h1 { 
+    background-color: #833B83;
+    color: #F9F0FE;
+}
+h2 { 
+    background-color: #AD77C3;
+    color: #F9F0FE;
+}
+<!--This is exactly what was asked, please do not consider this copied.-->
+</style>  
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a> &nbsp;
+     <a href="services.html">Services</a> &nbsp;
+	 <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services:</p>
+  <ul>
+    <li>Website Design</li>
+    <li>Interactive Animation</li>
+    <li>E-Commerce Solutions</li>  	
+    <li>Usability Studies</li>
+    <li>Search Engine Optimization</li>
+  </ul>
+  <h2>Meeting Your Business Needs</h2>
+    <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  Copyright &copy; Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html
new file mode 100644
index 0000000..b959488
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html	
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+<!--The Book requests this exactly! This is not copied!-->
+body { 
+    background-color: #F9F0FE;
+    color: #5B3256;
+}
+h1 { 
+    background-color: #833B83;
+    color: #F9F0FE;
+}
+h2 { 
+    background-color: #AD77C3;
+    color: #F9F0FE;
+}
+
+.feature {
+    color: #B33939;
+}
+
+#new {
+    color: #227093;
+}
+<!--Comment for differentiation purposes-->
+</style>  
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a> &nbsp;
+     <a href="services.html">Services</a> &nbsp;
+	 <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services:</p>
+  <ul>
+    <li>Website Design</li>
+    <li>Interactive Animation</li>
+    <li>E-Commerce Solutions</li>  	
+    <li class="feature">Usability Studies</li>
+    <li class="feature">Search Engine Optimization</li>
+  </ul>
+  <h2>Meeting Your Business Needs</h2>
+    <p id="new">Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  Copyright &copy; Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html
new file mode 100644
index 0000000..6896758
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html	
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body { 
+    background-color: #F9F0FE;
+    color: #5B3256;
+}
+h1 { 
+    background-color: #833B83;
+    color: #F9F0FE;
+}
+h2 { 
+    background-color: #AD77C3;
+    color: #F9F0FE;
+}
+span {
+    background-color: black;
+}
+span h1 {
+    color: yellow;
+}
+<!--Comment for differentiation purposes-->
+</style>  
+
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="index.html">Home</a> &nbsp;
+     <a href="services.html">Services</a> &nbsp;
+	 <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company&rsquo;s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+  <ul>
+    <li>Website Design</li>
+    <li>Interactive Animation</li>
+    <li>E-Commerce Solutions</li>  	
+    <li>Usability Studies</li>
+    <li>Search Engine Optimization</li>
+  </ul>
+  <h2>Meeting Your Business Needs</h2>
+    <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  Copyright &copy; Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png
new file mode 100644
index 0000000..eff3802
Binary files /dev/null and b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png differ
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css
new file mode 100644
index 0000000..0e4f9ac
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css	
@@ -0,0 +1,6 @@
+/* Ideally these colors shouldn't be as eye-bleachingly bright. Also, since these colors are the "purest form" of colors, css aliases like "blue" and "white" should be used.*/
+
+body { 
+    background-color: #0000FF;
+    color: #FFFFFF; 
+} 
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html
new file mode 100644
index 0000000..9f7df07
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html	
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>External Styles</title>
+<meta charset="utf-8">
+<!--Changing CSS name is a requirement for this to function given the new naming scheme-->
+<link rel="stylesheet" href="4.3.color.css"> 
+</head>
+<body>
+    <p>This web page uses an external style sheet.</p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html
new file mode 100644
index 0000000..6be2f7f
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html	
@@ -0,0 +1,18 @@
+<!--I just discovered my editor has an auto-indentor for html. Never realized it supported HTML/XML as well. I guess everything I make will have proper indentations too.-->
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>The Cascade in Action</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="4.7.site.css">
+        <style>
+body { 
+    color: #0000FF; 
+}
+        </style>
+    </head>
+    <body>
+        <p>this paragraph applies the external and embedded styles &mdash; note hwo the blue text color that is configured in the embedded styles takes precedence over the black text color configured in the external stylesheet.</p>
+        <p style="color: #FF0000">inline styles configure this paragraph to have red text and take precedence over the embedded and external styles.</p>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css
new file mode 100644
index 0000000..b9f18c5
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css	
@@ -0,0 +1,4 @@
+body { 
+    background-color: #FFFFCC; /*Now this is a good looking color!*/
+    color: #000000; 
+}
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html
new file mode 100644
index 0000000..6c6f4f4
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="4.6.index.html">Home</a> &nbsp;
+     <a href="4.6.services.html">Services</a> &nbsp;
+	 <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company&rsquo;s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+  <ul>
+    <li>Website Design</li>
+    <li>Interactive Animation</li>
+    <li>E-Commerce Solutions</li>  	
+    <li>Usability Studies</li>
+    <li>Search Engine Optimization</li>
+  </ul>
+  <h2>Meeting Your Business Needs</h2>
+    <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+  Copyright &copy; Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html
new file mode 100644
index 0000000..d9d1804
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html> 
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+ <header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a> &nbsp;
+     <a href="services.html">Services</a> &nbsp;
+	 <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+   <dt><strong>Website Design</strong></dt>
+   <dd>Whether your needs are large or small, Trillium can get your company on the Web!</dd>
+   <dt><strong>Interactive Animation</strong></dt>
+   <dd>Multimedia training and marketing animations are our specialty.</dd>
+   <dt><strong>E-Commerce Solutions</strong></dt>
+   <dd>Trillium offers quick and easy entry into the e-commerce marketplace.</dd>
+   <dt><strong>Usability Studies</strong></dt>
+   <dd>Trillium can assess the usability of your current site and suggest improvements.</dd>
+   <dt><strong>Search Engine Optimization</strong></dt>
+   <dd>Most people find websites using search engines. Trillium can help you get your site noticed.</dd>
+  </dl>
+</main>
+<footer>
+  Copyright &copy; Your Name Here
+</footer>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css
new file mode 100644
index 0000000..c260a61
--- /dev/null
+++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css	
@@ -0,0 +1,18 @@
+body { 
+    background-color: #F9F0FE;
+    color: #5B3256;
+}
+h1 { 
+    background-color: #833B83;
+    color: #F9F0FE;
+}
+h2 { 
+    background-color: #AD77C3;
+    color: #F9F0FE;
+}
+span {
+    background-color: black;
+}
+span h1 {
+    color: yellow;
+}
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html
new file mode 100644
index 0000000..a8826b3
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html	
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+body {
+    background-image: url(background.jpg);
+    font-family: Verdana, Arial, sans-serif;
+}
+
+header {
+    background-color: #000033;
+    background-image: url(headerbackblue.jpg);
+    background-position: right;
+    background-repeat: no-repeat;
+    color: #FFFF99;
+    line-height: 400%;
+    text-indent: 1em;
+}
+
+h1, h2, h3 {
+    font-family:Georgia, 'Times New Roman', serif;
+}
+
+nav {
+    font-weight: bold;
+    font-size: 1.5em;
+}
+
+nav a {
+    text-decoration:: none;
+}
+
+p {
+    text-indent: 2em;
+}
+
+footer {
+    text-align: center;
+    font-style: italic;
+    font-size: .80em;
+}
+        </style>
+    </head>
+    <body>
+        <header> 
+            <h1>KayakDoorCounty.net</h1>
+        </header>
+        <nav>
+            <a href="index.html">Home</a> &nbsp;
+            <a href="tours.html">Tours</a> &nbsp;
+            <a href="reservations.html">Reservations</a> &nbsp;
+            <a href="contact.html">Contact</a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+            <img src="hero.jpg" alt="tour guide paddling a kayak" width="500" height="350">
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            Copyright &copy; KayakDoorCounty.net
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg
new file mode 100644
index 0000000..5d33e9e
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg
new file mode 100644
index 0000000..6ae2660
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg
new file mode 100644
index 0000000..363e638
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html
new file mode 100644
index 0000000..b37bbcf
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Coffee House</title>
+        <meta charset="utf-8">
+        <style>
+body { font-size: 150%;
+    font-family: Arial; 
+    color: #992435; 
+    background-image: url(coffeepour.jpg); 
+    background-repeat: no-repeat;
+    background: url(coffee.gif) no-repeat left bottom, 
+    url(coffeepour.jpg) no-repeat;
+}
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Coffee House</h1>
+        </header>
+        <main>
+            <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+            <ul>
+                <li>Specialty Coffee and Tea</li>
+                <li>Gluten-free Pastries</li>
+                <li>Organic Salads</li>
+            </ul>
+        </main>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p> 
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html
new file mode 100644
index 0000000..4de880a
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Coffee House</title>
+        <meta charset="utf-8">
+        <style>
+body { font-size: 150%;
+    font-family: Arial; 
+    color: #992435; 
+    background-image: url(coffeepour.gif);
+    background: url(coffee.gif) no-repeat left bottom,
+    url(coffeeback.gif) no-repeat,
+    url(coffeepour.gif) no-repeat;
+}
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Coffee House</h1>
+        </header>
+        <main>
+            <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+            <ul>
+                <li>Specialty Coffee and Tea</li>
+                <li>Gluten-free Pastries</li>
+                <li>Organic Salads</li>
+            </ul>
+        </main>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p> 
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html
new file mode 100644
index 0000000..0257d60
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Coffee House</title>
+        <meta charset="utf-8">
+        <style>
+body { font-size: 150%;
+    font-family: Arial; 
+    color: #992435; 
+    background-image: url(coffeepour.jpg); 
+    background-repeat: no-repeat;
+    background: url(coffee.gif) no-repeat left bottom, 
+    url(coffeepour.jpg) no-repeat;
+}
+ul {
+    list-style-image: url(marker.gif);
+}
+
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Coffee House</h1>
+        </header>
+        <main>
+            <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+            <ul>
+                <li>Specialty Coffee and Tea</li>
+                <li>Gluten-free Pastries</li>
+                <li>Organic Salads</li>
+            </ul>
+        </main>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p> 
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif
new file mode 100644
index 0000000..de749d0
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif
new file mode 100644
index 0000000..8026552
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif
new file mode 100644
index 0000000..2981542
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg
new file mode 100644
index 0000000..4b031f0
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif
new file mode 100644
index 0000000..7031505
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html
new file mode 100644
index 0000000..c7a8a2f
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Tropical Island</title>
+        <meta charset="utf-8">
+        <style>
+figcaption { 
+    font-weight: bold;
+    font-style: italic;
+    font-family: Papyrus, fantasy;
+    font-size: 1.5em;
+}
+        </style>
+    </head>
+    <body>
+        <figure>
+            <img src=myisland.jpg alt="Tropical Island" height=480 width=640>
+            <figcaption>Tropical Island Getaway</figcaption> 
+        </figure>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg
new file mode 100644
index 0000000..5d90394
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html
new file mode 100644
index 0000000..9070c7d
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html	
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+
+        </style>
+    </head>
+    <body>
+        <header> 
+            <img src=kayakdc.gif>
+        </header>
+        <nav>
+            <a href="index.html">Home</a> &nbsp;
+            <a href="tours.html">Tours</a> &nbsp;
+            <a href="reservations.html">Reservations</a> &nbsp;
+            <a href="contact.html">Contact</a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+            <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html
new file mode 100644
index 0000000..26cf162
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+#bar{
+    background-color:#152420;
+}
+        </style>
+    </head>
+    <body>
+        <header> 
+            <img src=kayakdc.gif>
+        </header>
+        <nav id=bar>
+            <a href="index.html"><img src=home.gif alt=home width=90 height=35></a> &nbsp;
+            <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a> &nbsp;
+            <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a> &nbsp;
+            <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+            <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            <nav>
+                <a href="index.html">Home</a> &nbsp;
+                <a href="tours.html">Tours</a> &nbsp;
+                <a href="reservations.html">Reservations</a> &nbsp;
+                <a href="contact.html">Contact</a> &nbsp;
+            </nav>
+
+            <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html
new file mode 100644
index 0000000..e7bae4d
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html	
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+#bar{
+    background-color:#152420;
+}
+main {
+    background-image: url(heroback.jpg);
+    background-repeat: no-repeat;
+}
+
+        </style>
+    </head>
+    <body>
+        <header> 
+            <img src=kayakdc.gif>
+        </header>
+        <nav id=bar>
+            <a href="index.html"><img src=home.gif alt=home width=90 height=35></a> &nbsp;
+            <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a> &nbsp;
+            <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a> &nbsp;
+            <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            <nav>
+                <a href="index.html">Home</a> &nbsp;
+                <a href="tours.html">Tours</a> &nbsp;
+                <a href="reservations.html">Reservations</a> &nbsp;
+                <a href="contact.html">Contact</a> &nbsp;
+            </nav>
+
+            <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html
new file mode 100644
index 0000000..e57c2ad
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html	
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+#bar{
+    background-color:#152420;
+}
+
+body {
+    font-family: Verdana, Arial, sans-serif;
+} 
+
+h2, h3 {
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+main {
+    background-image: url(heroback.jpg);
+    background-repeat: no-repeat;
+}
+
+        </style>
+    </head>
+    <body>
+        <header> 
+            <img src=kayakdc.gif>
+        </header>
+        <nav id=bar>
+            <a href="index.html"><img src=home.gif alt=home width=90 height=35></a> &nbsp;
+            <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a> &nbsp;
+            <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a> &nbsp;
+            <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            <nav>
+                <a href="index.html">Home</a> &nbsp;
+                <a href="tours.html">Tours</a> &nbsp;
+                <a href="reservations.html">Reservations</a> &nbsp;
+                <a href="contact.html">Contact</a> &nbsp;
+            </nav>
+
+            <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html
new file mode 100644
index 0000000..4806c6c
--- /dev/null
+++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html	
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <link rel=icon href=favicon.ico type="image/x-icon">
+        <style>
+#bar{
+    background-color:#152420;
+}
+main {
+    background-image: url(heroback.jpg);
+    background-repeat: no-repeat;
+}
+
+        </style>
+    </head>
+    <body>
+        <header> 
+            <img src=kayakdc.gif>
+        </header>
+        <nav id=bar>
+            <a href="index.html"><img src=home.gif alt=home width=90 height=35></a> &nbsp;
+            <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a> &nbsp;
+            <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a> &nbsp;
+            <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a> &nbsp;
+        </nav>
+        <main>
+            <h2>Your next adventure is only a paddle away ....</h2>
+
+            <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+            <h3>Featured tours this week:</h3>
+            <ul>
+                <li>Cana Island</li>
+                <li>Mink River</li>
+                <li>Europe Lake</li>
+            </ul>
+        </main>
+        <footer>
+            <nav>
+                <a href="index.html">Home</a> &nbsp;
+                <a href="tours.html">Tours</a> &nbsp;
+                <a href="reservations.html">Reservations</a> &nbsp;
+                <a href="contact.html">Contact</a> &nbsp;
+            </nav>
+
+            <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif
new file mode 100644
index 0000000..e620a5b
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico
new file mode 100644
index 0000000..c22c6bb
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg
new file mode 100644
index 0000000..363e638
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg
new file mode 100644
index 0000000..a72a7a0
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif
new file mode 100644
index 0000000..7e0eab6
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif
new file mode 100644
index 0000000..8fd7564
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif
new file mode 100644
index 0000000..c2189a2
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif differ
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif
new file mode 100644
index 0000000..807e4e8
Binary files /dev/null and b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html
new file mode 100644
index 0000000..5adac06
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html	
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Examples of the Box Model</title>
+        <meta charset="utf-8">
+        <style>
+body { background-color: #FFFFFF;
+}
+h1 { background-color: #D1ECFF; 
+    padding-left: 60px;
+    border-bottom: 3px ridge #330000;
+}
+#box { background-color: #74C0FF;
+    margin-left: 60px;
+    padding: 5px 10px;
+    border: 1px solid #000000;
+}
+        </style>
+    </head>
+    <body>
+        <h1>Examples of the Box Model</h1>
+        <div id="box">HTML elements display as boxes on web pages. This div element is configured to have a blue background.</div>
+
+
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html
new file mode 100644
index 0000000..b9005c1
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html	
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <style>
+body { background-image: url(background.jpg);
+    font-family: Arial, Verdana, sans-serif;
+}
+h1 { 
+    background-image: url(lighthouselogo.jpg);
+    background-repeat: no-repeat;
+    height: 100px; 
+    width: 700px; 
+    font-size: 3em;
+    padding-left: 150px; 
+    padding-top: 30px;
+    border-radius: 15px; 
+}
+h2 { color: #000033; 
+    font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+    font-style: italic;
+}
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Lighthouse Bistro</h1>
+        </header>
+        <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;<a href="directions.html">Directions</a> &nbsp;<a href="contact.html">Contact</a>
+        </nav>
+        <h2>Locally Roasted Free-Trade Coffee</h2>
+        <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+        <h2>Specialty Pastries</h2>
+        <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+        <h2>Lunchtime is Anytime</h2>
+        <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+        <footer>
+            Copyright &copy; Your Name Here
+        </footer>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg
new file mode 100644
index 0000000..bd76938
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg
new file mode 100644
index 0000000..4db3869
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html
new file mode 100644
index 0000000..007aad5
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html	
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <style>
+body { background-image: url(background.jpg);
+    font-family: Arial, Verdana, sans-serif;
+}
+h1 { 
+    background-image: url(lighthouselogo.jpg);
+    background-repeat: no-repeat;
+    height: 100px; 
+    font-size: 3em;
+    background-color: #9DB3DC;
+    margin-top: 0;
+    padding-left: 150px; 
+    padding-top: 30px;
+    border-radius: 15px; 
+}
+h2 { color: #000033; 
+    font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+    font-style: italic;
+}
+
+#container { 
+    background-color: #FFFFFF;
+    padding: 2em;
+    margin-left: auto; margin-right: auto;
+    width: 80%;
+    min-width: 800px; 
+}
+
+        </style>
+    </head>
+    <body>
+        <div id=container>
+        <header>
+            <h1>Lighthouse Bistro</h1>
+        </header>
+        <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;<a href="directions.html">Directions</a> &nbsp;<a href="contact.html">Contact</a>
+        </nav>
+        <h2>Locally Roasted Free-Trade Coffee</h2>
+        <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+        <h2>Specialty Pastries</h2>
+        <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+        <h2>Lunchtime is Anytime</h2>
+        <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+        <footer>
+            Copyright &copy; Your Name Here
+        </footer>
+        </div>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg
new file mode 100644
index 0000000..bd76938
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg
new file mode 100644
index 0000000..4db3869
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html
new file mode 100644
index 0000000..06143b7
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html	
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Coffee House</title>
+<meta charset="utf-8">
+<style>
+body { color: #221811;
+      font-family: Verdana, Arial, sans-serif;
+      width: 80%;
+      min-width: 750px;
+
+}
+header { background-color: #D2B48C;
+         background-image: url(coffeelogo.jpg);
+         background-repeat: no-repeat;		
+}
+
+h1 { text-indent: 4em;
+    font-size: 4em;
+    height: 150px;
+    line-height: 220%;
+ 
+}
+
+nav { font-weight: bold; 
+	 text-indent: 1em;
+	 font-size: 2em; 
+}
+nav a {  color: #804D33; text-decoration: none; }
+
+#wrapper { background-color: #FCEBB6; }
+</style>
+</head>
+<body>
+<div id="wrapper">
+<header>
+<h1>Coffee House</h1>
+</header>
+<nav>
+<a href="index.html">Home</a> &nbsp; 
+<a href="menu.html">Menu</a> &nbsp; 
+<a href="music.html">Music</a> &nbsp; 
+<a href="jobs.html">Jobs</a>
+</nav>
+<main>
+<h2>Follow the Winding Road to Coffee House</h2>
+<h3>Coffee House features:</h3>
+<ul>
+  <li>Specialty Coffee and Tea</li>
+  <li>Bagels, Muffins, and Gluten-free Pastries</li>
+  <li>Organic Salads</li>
+  <li>Music and Poetry Readings</li>
+  <li>Open Mic Night</li>
+</ul>
+<div>
+12010 Garrett Bay Road<br>
+Ellison Bay, WI 54210<br>
+888-555-5555<br><br>
+</div>
+</main>
+<footer>
+Copyright &copy; Coffee House<br>
+</footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg
new file mode 100644
index 0000000..3c302c7
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html
new file mode 100644
index 0000000..18f2ec5
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Practice with Gradients</title>
+        <meta charset="utf-8">
+        <style>
+body { 
+    background-color: #DA70D6;
+    background-image: linear-gradient(to bottom, #FFFFFF, #DA70D6);
+    background-repeat: no-repeat; 
+}
+        </style>
+    </head>
+    <body>
+        <h1>Linear Gradient</h1>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+        <h2>Heading 2</h2>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+        <h2>Heading 2</h2>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html
new file mode 100644
index 0000000..6cd5e767
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Practice with Gradients</title>
+        <meta charset="utf-8">
+        <style>
+body { 
+    background-color: #DA70D6; 
+    background-image: radial-gradient(#FFFFFF, #DA70D6);
+    background-repeat: no-repeat; 
+}
+        </style>
+    </head>
+    <body>
+        <h1>Linear Gradient</h1>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+        <h2>Heading 2</h2>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+        <h2>Heading 2</h2>
+        <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html
new file mode 100644
index 0000000..c25804b
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html	
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>KayakDoorCounty.net</title>
+        <style>
+body { background-color: #FFFFDD;
+    font-family: Verdana, Arial, sans-serif; 
+}
+header { background-color: #000033;
+    color: #FFFFB9;
+    background-image: url(headerbackblue.jpg);
+    background-position: right;
+    background-repeat: no-repeat; 
+    height: 80px;
+    padding-top: 5px; 
+    padding-left: 2em;
+    text-shadow: 1px 1px 1px #FFF; 
+}
+
+h1, h2, h3 { 
+    font-family: Georgia, "Times New Roman", serif; 
+}
+h1 {
+    margin-bottom: 0;
+} 
+nav { 
+    font-weight: bold;
+    font-size: 1.25em; 
+    background-color: #FFFFCC;
+    text-align: center;
+}
+nav a { text-decoration: none; }
+main { 
+    background-color: #004D99;
+    background-image: url(heroback2.jpg); 
+    color: #FFFFFF; padding: 2em;
+}
+
+footer { 
+    font-style: italic; 
+    text-align: center;
+    background-color: #000033;
+    color: #FFFFCC;
+    padding: 0.5em;
+}
+
+#container { 
+    margin-left: auto; 
+    margin-right: auto;
+    width: 80%; 
+    min-width: 650px;
+    max-width: 1280px;
+    background-color: #FFFFFF;
+    box-shadow: 10px 10px 10px #333333;
+    border: 1px solid #000033;
+}
+        </style>
+    </head>
+    <body>
+        <div id=container>
+            <header> 
+                <h1>KayakDoorCounty.net</h1>
+            </header>
+            <nav>
+                <a href="index.html">Home</a> &nbsp;
+                <a href="tours.html">Tours</a> &nbsp;
+                <a href="reservations.html">Reservations</a> &nbsp;
+                <a href="contact.html">Contact</a> &nbsp;
+            </nav>
+            <main>
+                <h2>Your next adventure is only a paddle away ....</h2>
+
+                <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+                <h3>Featured tours this week:</h3>
+                <ul>
+                    <li>Cana Island</li>
+                    <li>Mink River</li>
+                    <li>Europe Lake</li>
+                </ul>
+            </main>
+            <footer>
+                <small><i>Copyright &copy; KayakDoorCounty.net</i></small>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg
new file mode 100644
index 0000000..6ae2660
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg
new file mode 100644
index 0000000..b2d66e1
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html
new file mode 100644
index 0000000..f1a9fa1
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+#content { background-image: url(fall.jpg);
+    background-repeat: no-repeat;
+    margin: auto;
+    width: 640px;
+    height: 480px;
+    padding-top: 20px; 
+}
+
+h1 { 
+    background-color: #FFFFFF;
+    opacity: 0.6;
+    font-size: 4em;
+    padding: 10px;
+    margin-left: 40px; 
+}
+
+        </style>
+    </head>
+    <body>
+
+        <div id="content">
+            <h1> Fall Nature Hikes</h1>
+        </div>
+
+
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html
new file mode 100644
index 0000000..c6ca7ce
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+#content { background-image: url(fall.jpg);
+    background-repeat: no-repeat;
+    margin: auto;
+    width: 640px;
+    height: 480px;
+    padding-top: 20px; 
+}
+
+h1 { 
+    color: #ffffff;
+    color: rgba(255, 255, 255, 0.8);
+    font-family: Verdana, Helvetica, sans-serif;
+    font-size: 5em;
+    padding-right: 10px;
+    text-align: right; 
+}
+
+
+        </style>
+    </head>
+    <body>
+
+        <div id="content">
+            <h1> Fall Nature Hikes</h1>
+        </div>
+
+
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html
new file mode 100644
index 0000000..d74632e
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+#content { background-image: url(fall.jpg);
+    background-repeat: no-repeat;
+    margin: auto;
+    width: 640px;
+    height: 480px;
+    padding-top: 20px; 
+}
+
+h1 { 
+    color: #ffcccc;
+    color: hsla(60, 100%, 90%, 0.8);
+    font-family: Georgia, "Times New Roman", serif;
+    font-size: 6em;
+    padding: 20px; 
+}
+
+
+        </style>
+    </head>
+    <body>
+
+        <div id="content">
+            <h1> Fall Nature Hikes</h1>
+        </div>
+
+
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg
new file mode 100644
index 0000000..b95e481
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html
new file mode 100644
index 0000000..2329bd8
--- /dev/null
+++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html	
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <style>
+body { background-image: url(background.jpg);
+    font-family: Arial, Verdana, sans-serif;
+}
+h1 { 
+    background-image: url(lighthouselogo.jpg);
+    background-repeat: no-repeat;
+    height: 100px; 
+    font-size: 3em;
+    background-color: #9DB3DC;
+    margin-top: 0;
+    padding-left: 150px; 
+    padding-top: 30px;
+    border-radius: 15px; 
+}
+h2 { color: #000033; 
+    font-family: arial, sans-serif;
+    text-shadow: 1px 1px 0 #CCC;
+}
+footer { font-size: .80em;
+    font-style: italic;
+}
+
+#container { 
+    background-color: #FFFFFF;
+    padding: 2em;
+    margin-left: auto; margin-right: auto;
+    width: 80%;
+    min-width: 800px; 
+    box-shadow: 5px 5px 5px #1E1E1E;
+    text-shadow: 3px 3px 3px #676767;
+}
+
+        </style>
+    </head>
+    <body>
+        <div id=container>
+        <header>
+            <h1>Lighthouse Bistro</h1>
+        </header>
+        <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;<a href="directions.html">Directions</a> &nbsp;<a href="contact.html">Contact</a>
+        </nav>
+        <h2>Locally Roasted Free-Trade Coffee</h2>
+        <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+        <h2>Specialty Pastries</h2>
+        <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+        <h2>Lunchtime is Anytime</h2>
+        <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+        <footer>
+            Copyright &copy; Your Name Here
+        </footer>
+        </div>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg
new file mode 100644
index 0000000..bd76938
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg differ
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg
new file mode 100644
index 0000000..4db3869
Binary files /dev/null and b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html
new file mode 100644
index 0000000..318d34c
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html	
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS</title>
+        <meta charset="utf-8">
+        <style>
+.div1 { 
+    width: 200px;
+    height: 200px;
+    background-color: #D1ECFF;
+    border: 3px dashed #000000;
+    padding: 5px; 
+}
+        </style>
+    </head>
+    <body>
+        <div class="div1">
+            This is the first box.
+        </div>
+        <div class="div2">
+            This is the second box.
+        </div>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html
new file mode 100644
index 0000000..6bcaf53
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>CSS</title>
+        <meta charset="utf-8">
+        <style>
+.div1 { 
+    width: 200px;
+    height: 200px;
+    background-color: #D1ECFF;
+    border: 3px dashed #000000;
+    padding: 5px; 
+}
+
+.div2 { 
+    width: 100px;
+    height: 100px;
+    background-color: #ffffff;
+    border: 3px ridge #000000;
+    padding: 5px;
+    margin: 10px; 
+}
+
+        </style>
+    </head>
+    <body>
+        <div class="div1">
+            This is the outer box.
+            <div class="div2">
+                This is the inner box.
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html
new file mode 100644
index 0000000..3805264
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html	
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Layout Example</title>
+        <meta charset="utf-8">
+        <style>
+nav { 
+    float: left;
+    width: 150px; 
+}
+main { 
+    margin-left: 160px; 
+}
+body { 
+    background-color: #000066; 
+}
+#wrapper { 
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #EAEAEA; 
+}
+h1 { 
+    margin: 0;
+    padding: 10px; 
+}
+nav {
+    float: left;
+    width: 150px;
+    padding: 10px;
+}
+main { 
+    margin-left: 160px;
+    padding: 10px;
+    background-color: #FFFFFF;  
+}
+footer { 
+    text-align: center;
+    font-style: italic;
+    background-color: #CCCCFF;
+    clear: both; 
+}
+        </style>
+    </head>
+    <body>
+        <div id="wrapper">
+            <header><h1>Layout Example</h1></header>
+            <nav>
+                <a href="index.html">Home</a>
+                <a href="page1.html">Page 1</a>
+                <a href="page2.html">Page 2</a>
+            </nav>
+            <main>
+                <h2>Page Heading</h2>
+                <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+            </main>
+            <footer>Copyright &copy; </footer>
+        </div>
+    </body>
+</html>
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html
new file mode 100644
index 0000000..a9575b3
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="7.7.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css
new file mode 100644
index 0000000..e32be27
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css	
@@ -0,0 +1,91 @@
+*{ 
+    box-sizing: border-box; 
+}
+
+body { 
+    background-color: #00005D;
+    font-family: Verdana, Arial, sans-serif; 
+}
+
+#wrapper { 
+    margin: 0 auto; 
+    width: 80%; 
+    min-width: 940px;
+    background-color: #B3C7E6; 
+    color: #000066; 
+}
+
+header { 
+    background-color: #869DC7; 
+    color: #00005D;
+    font-size: 150%; 
+    padding: 10px 10px 10px 155px;
+    height: 150px;
+    background-repeat: no-repeat;
+    background-image: url(7.7.lighthouselogo.jpg); 
+}
+
+nav { 
+    float: right; 
+    width: 150px; 
+    font-weight: bold;
+    letter-spacing: 0.1em; 
+}
+
+main { 
+    background-color: #FFFFFF; 
+    color: #000000;
+    padding: 10px 20px; 
+    display: block;
+    overflow: auto; 
+}
+
+h2 { 
+    color: #869DC7; 
+    font-family: Arial, sans-serif; 
+}
+
+#floatright { 
+    float: right; 
+    margin: 10px; 
+}
+
+
+nav ul { 
+    list-style-type: none;
+    margin: 0; 
+    padding: 0; 
+}
+
+nav a { 
+    text-decoration: none; 
+    padding: 20px; 
+    display: block;
+    background-color: #B3C7E6;
+    border-bottom: 1px solid #FFFFFF; 
+}
+
+nav a:link {
+    color: #FFFFFF; 
+}
+
+nav a:visited { 
+    color: #EAEAEA; 
+}
+
+nav a:hover { 
+    color: #869DC7;
+    background-color: #EAEAEA; 
+} 
+
+footer { 
+    font-size: 70%; 
+    text-align: center;
+    padding: 10px;
+    background-color: #869DC7; 
+    clear: both;
+}
+
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html
new file mode 100644
index 0000000..e2c4866
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body { width:500px;
+       background-color:#FFFFFF;
+       color:#000000;
+}
+div {  background-color:#F3F1BF;
+}
+h1 {   background-color:#658B42;
+       padding:10px;	
+       color: #E1DB5F;
+}
+p {    font-family:Arial,sans-serif;  
+ }
+float, margin, and border properties:
+.float { float: left;
+         margin-right: 10px;
+         border: 3px ridge #000000; }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+  <img class=float src="7.2.yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+  <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways &mdash; support organizations dedicated to preserving their habitat. </p> 
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html
new file mode 100644
index 0000000..14226a7
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html	
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+body {
+    font-family:Verdana, Arial, sans-serif;
+    background-color: #00005D;
+}
+#wrapper { 
+    background-color: #b3c7e6; 
+    color: #000066;
+    width: 80%;
+    margin: auto;
+    min-width:940px;
+}  
+header { 
+    background-color: #869dc7;
+    color: #00005D; 
+    font-size: 150%; 
+    padding: 10px 10px 10px 155px;
+    background-image: url(7.5.lighthouselogo.jpg); 
+    background-repeat: no-repeat;
+    height: 130px;
+}
+
+h2 { 
+    color: #869dc7; 
+    font-family: arial, sans-serif;
+}
+main { 
+    padding: 20px 20px 0 20px; 
+    background-color: #ffffff;
+    color: #000000;
+    display: block;
+} 
+main img { 
+    margin: 10px;
+    float: right;
+}
+
+footer {
+    font-size:70%;
+    text-align: center;
+    clear: right;
+    padding-bottom:20px;
+}
+
+nav li { 
+    display: inline; 
+}
+
+nav ul { 
+    list-style-type: none;
+    text-align: center;
+    font-size: 1.5em;
+    margin: 5px; 
+}
+nav a { 
+    text-decoration: none;
+    padding-left: 10px;
+    padding-right: 10px; 
+}
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main> 
+                <img src="7.5.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                <h2>Locally Roasted Free-Trade Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+            </main>
+            <footer>Copyright &copy;
+            </footer>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html
new file mode 100644
index 0000000..3d69728
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html	
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+    background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+    color: #000066;
+    width: 80%;
+    margin: auto;
+    min-width:940px;
+} 
+nav { float: left;
+    width: 150px;
+} 
+main { margin-left: 155px;
+    background-color: #ffffff;
+    color: #000000;
+} 
+header { background-color: #869dc7;
+    color: #00005D; 
+    font-size: 150%; 
+    padding: 10px 10px 10px 155px;
+    background-image: url(7.6.lighthouselogo.jpg); 
+    background-repeat: no-repeat;
+    height: 130px;
+}
+
+h2 { color: #869dc7; 
+    font-family: arial, sans-serif;
+}
+.content {
+    padding: 20px 20px 0 20px; 
+} 
+main { display: block; }
+#floatright { margin: 10px;
+    float: right;
+}
+
+footer { font-size:70%;
+    text-align: center;
+    clear: right;
+    padding-bottom:20px;
+}
+nav ul { 
+    list-style-type: none; padding: 10px; 
+}
+nav a { 
+    text-decoration: none; padding: 10px;
+    font-weight: bold; 
+}
+
+nav a:link { 
+    color: #ffffff; 
+}
+nav a:visited { 
+    color: #EAEAEA; 
+}
+nav a:hover { 
+    color: #000066; 
+}
+
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="menu.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main>
+                <div class="content"> 
+                    <img src="7.6.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                    <h2>Locally Roasted Free-Trade Coffee</h2>
+                    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                    <h2>Specialty Pastries</h2>
+                    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                    fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                    <h2>Lunchtime is Anytime</h2>
+                    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                    <h2>Panoramic View</h2>
+                    <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+                </div>
+                <footer>Copyright &copy;
+                </footer>
+            </main>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt
new file mode 100644
index 0000000..9be3095
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt	
@@ -0,0 +1 @@
+I am using an older version of the book, so this assignment doesn't match up with the student files. I got the older version as a hand-me-down due to budgeting constraints. So please do understand that this section being different isn't out of laze, mistake, or plagarism, but rather the unaffordability of textbooks, but a willingness to still practice.
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html
new file mode 100644
index 0000000..bce1e3b
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html	
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>	
+        <title>First HTML Webpage</title>
+        <meta charset="utf-8">
+        <style>
+* { 
+    box-sizing: border-box; 
+}
+
+#gallery { 
+    position: relative; 
+}
+
+#gallery ul { 
+    width: 280px; 
+    list-style-type: none; 
+}
+
+#gallery li { 
+    display: inline; 
+    float: left; 
+    padding: 10px; 
+}
+
+#gallery img { 
+    border-style: none; 
+}
+
+
+#gallery a { 
+    text-decoration: none; color: #333; font-style: italic; 
+}
+
+#gallery span { 
+    display: none; 
+}
+
+#gallery a:hover span { 
+    display: block; 
+    position: absolute;
+    top: 10px; 
+    left: 300px; 
+    text-align: center; 
+}
+        </style>
+    </head>
+    <body>
+        <div id=gallery>
+            <ul>
+                <li><a href="yls.jpg"><img src="yls.jpg" width="100" height="75" alt="YLS"><span><img src="yls.jpg" width="250" height="150" alt="YLS"><br>YLS</span></li>
+                <li><a href="yogadoor.jpg"><img src="yogadoor.jpg" width="100" height="75" alt="yogadoor"><span><img src="yogadoor.jpg" width="250" height="150" alt="yogadoor"><br>yogadoor</span></li>
+                <li><a href="lighthouselogo.jpg"><img src="lighthouselogo.jpg" width="100" height="75" alt="lighthouselogo"><span><img src="lighthouselogo.jpg" width="250" height="150" alt="lighthouselogo"><br>lighthouselogo</span></li>
+            </ul>
+        </div>
+    </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg
new file mode 100644
index 0000000..7dd9982
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg
new file mode 100644
index 0000000..fe0de96
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt
new file mode 100644
index 0000000..db84d5f
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt	
@@ -0,0 +1 @@
+Similar to ch7p, this part of the book is missing for me. Textbooks are expensive and all I request is a bit of mercy due to this.
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html
new file mode 100644
index 0000000..f4a045e
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html	
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+    background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6; 
+    color: #000066;
+    width: 80%;
+    margin: auto;
+    min-width:940px;
+} 
+nav a { text-decoration: none;
+    padding: 10px;
+    font-weight: bold; 
+}
+nav ul { list-style-type: none;
+    padding: 10px; 
+}
+nav { float: left;
+    width: 150px;
+} 
+main { margin-left: 155px;
+    background-color: #ffffff;
+    color: #000000;
+} 
+header { background-color: #869dc7;
+    color: #00005D; 
+    font-size: 150%; 
+    padding: 10px 10px 10px 155px;
+    background-image: url(lighthouselogo.jpg); 
+    background-repeat: no-repeat;
+    height: 130px;
+}
+
+h2 { color: #869dc7; 
+    font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px; 
+} 
+main { display: block; }
+#floatright { margin: 10px;
+    float: right;
+}
+
+footer { font-size:70%;
+    text-align: center;
+    clear: right;
+    padding-bottom:20px;
+}
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+            </header>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="menu.html">Menu</a></li>
+                <li><a href="directions.html">Directions</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+            </nav>
+            </nav>
+            <main>
+                <div class="content"> 
+                    <img src="7.4.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                    <h2>Locally Roasted Free-Trade Coffee</h2>
+                    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                    <h2>Specialty Pastries</h2>
+                    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                    fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                    <h2>Lunchtime is Anytime</h2>
+                    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                    <h2>Panoramic View</h2>
+                    <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+                </div>
+                <footer>Copyright &copy;
+                </footer>
+            </main>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html
new file mode 100644
index 0000000..7c7e1e2
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html	
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+body {
+    font-family:Verdana, Arial, sans-serif;
+    background-color: #00005D;
+}
+#wrapper { 
+    background-color: #b3c7e6; 
+    color: #000066;
+    width: 80%;
+    margin: auto;
+    min-width:940px;
+}  
+header { 
+ background-color: #869DC7; 
+ color: #00005D;
+ font-size: 150%; 
+ padding: 10px 10px 10px 155px;
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat; 
+ height: 130px;
+ margin-top: 40px; 
+}
+h2 { 
+    color: #869dc7; 
+    font-family: arial, sans-serif;
+}
+main { 
+    padding: 20px 20px 0 20px; 
+    background-color: #ffffff;
+    color: #000000;
+    display: block;
+} 
+main img { 
+    margin: 10px;
+    float: right;
+}
+
+footer {
+    font-size:70%;
+    text-align: center;
+    clear: right;
+    padding-bottom:20px;
+}
+
+nav { 
+      position: fixed; 
+      top: 0; 
+      left: 0;
+      height: 40px; width: 100%; 
+      min-width: 40em;
+      background-color: #B3C7E6;
+      z-index: 9999; 
+}
+
+nav li { 
+    display: inline; 
+}
+
+nav ul { 
+    list-style-type: none;
+    text-align: center;
+    font-size: 1.5em;
+    margin: 5px; 
+    padding-right: 10%;
+}
+nav a { 
+    text-decoration: none;
+    padding-left: 10px;
+    padding-right: 10px; 
+}
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main> 
+                <img src="7.11.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                <h2>Locally Roasted Free-Trade Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+            </main>
+            <footer>Copyright &copy;
+            </footer>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html
new file mode 100644
index 0000000..ecd29f3
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html	
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link media="screen" href="bistro.css" rel="stylesheet">
+<link media="print" href="bistroprint.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="7.8.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+   </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css
new file mode 100644
index 0000000..f47a52d
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css	
@@ -0,0 +1,47 @@
+* { box-sizing: border-box; }
+body { background-color: #00005D;
+	   font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+           width: 80%; 
+		   min-width: 940px;
+		   background-color: #B3C7E6; 
+		   color: #000066; }
+header { background-color: #869DC7; 
+         color: #00005D;
+         font-size: 150%; 
+		 padding: 10px 10px 10px 155px;
+         height: 150px;
+         background-repeat: no-repeat;
+         background-image: url(7.8.lighthouselogo.jpg); }
+nav { float: right; 
+      width: 150px; 
+	  font-weight: bold;
+      letter-spacing: 0.1em; }
+main { background-color: #FFFFFF; 
+       color: #000000;
+	   padding: 10px 20px; 
+	   display: block;
+	   overflow: auto; }
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+         margin: 0; 
+		 padding: 0; }
+nav a { text-decoration: none; 
+        padding: 20px; 
+		display: block;
+        background-color: #B3C7E6;
+        border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link    { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover   { color: #869DC7;
+                background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+         text-align: center;
+	     padding: 10px;
+	    background-color: #869DC7; 
+	    clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css
new file mode 100644
index 0000000..e165b24
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css	
@@ -0,0 +1,55 @@
+* { 
+     box-sizing: border-box; 
+}
+
+body { background-color: #00005D;
+font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto; 
+    width: 80%; 
+    min-width: 940px;
+    background-color: #B3C7E6; 
+color: #000066; }
+header { background-color: #869DC7; 
+    color: #000000;
+    font-size: 20pt;
+    padding: 10px 10px 10px 155px;
+    height: 150px;
+    background-repeat: no-repeat;
+background-image: url(7.8.lighthouselogo.jpg); }
+
+nav{ 
+display:none; 
+}
+
+main { 
+    background-color: #FFFFFF; 
+    color: #000000;
+    padding: 10px 20px; 
+    display: block;
+    overflow: auto;
+    font-family: "Times New Roman", serif; 
+    font-size: 12pt;
+}
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+    margin: 0; 
+padding: 0; }
+nav a { text-decoration: none; 
+    padding: 20px; 
+    display: block;
+    background-color: #B3C7E6;
+    border-bottom: 1px solid #FFFFFF; 
+}
+nav a:link    { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover   { color: #869DC7;
+background-color: #EAEAEA; } 
+footer { font-size: 70%; 
+    text-align: center;
+    padding: 10px;
+    background-color: #869DC7; 
+    clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html
new file mode 100644
index 0000000..60471e6
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html	
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--The Chapter 7 folder didn't come with any template for this. So I opted to use the 7.7 work as a a base-->
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Lighthouse Island Bistro</h1>
+  </header>
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Menu</a></li>
+     <li><a href="directions.html">Directions</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav> 
+  <main> 
+   	<h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+     <img src="7.9.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery!</p>
+	<p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+  </main> <!-- end of main content -->
+   <footer>Copyright &copy;
+   </footer>
+  </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg
new file mode 100644
index 0000000..bf09b59
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg
new file mode 100644
index 0000000..b6dfc6c
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif
new file mode 100644
index 0000000..832901a
Binary files /dev/null and b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif differ
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css
new file mode 100644
index 0000000..b8a0b9d
--- /dev/null
+++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css	
@@ -0,0 +1,95 @@
+*{ 
+    box-sizing: border-box; 
+}
+
+body { 
+    background-color: #00005D;
+    font-family: Verdana, Arial, sans-serif; 
+}
+
+#wrapper { 
+    margin: 0 auto; 
+    width: 80%; 
+    min-width: 940px;
+    background-color: #B3C7E6; 
+    color: #000066; 
+}
+
+header { 
+    background-color: #869DC7; 
+    color: #00005D;
+    font-size: 150%; 
+    padding: 10px 10px 10px 155px;
+    height: 150px;
+    background-repeat: no-repeat;
+    background-image: url(7.9.lighthouselogo.jpg); 
+}
+
+nav { 
+    float: right; 
+    width: 150px; 
+    font-weight: bold;
+    letter-spacing: 0.1em; 
+}
+
+main { 
+    background-color: #FFFFFF; 
+    color: #000000;
+    padding: 10px 20px; 
+    display: block;
+    overflow: auto; 
+}
+
+h2 { 
+    color: #869DC7; 
+    font-family: Arial, sans-serif; 
+}
+
+#floatright { 
+    float: right; 
+    margin: 10px; 
+}
+
+
+nav ul { 
+    list-style-type: none;
+    margin: 0; 
+    padding: 0; 
+}
+
+nav a { 
+    text-decoration: none; 
+    padding: 20px; 
+    display: block;
+    background-color: #B3C7E6;
+    border-bottom: 1px solid #FFFFFF;
+    background-image: url(7.9.sprites.gif);
+    background-repeat: no-repeat;
+    background-position: right 0;  
+}
+
+nav a:link {
+    color: #FFFFFF; 
+}
+
+nav a:visited { 
+    color: #EAEAEA; 
+}
+
+nav a:hover { 
+    color: #869DC7;
+    background-color: #EAEAEA; 
+    background-position: right -100px;
+} 
+
+footer { 
+    font-size: 70%; 
+    text-align: center;
+    padding: 10px;
+    background-color: #869DC7; 
+    clear: both;
+}
+
+
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html
new file mode 100644
index 0000000..c8bd7af
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html	
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+
+body { 
+    margin: 0; 
+}
+
+header { 
+    display: flex; 
+    min-height: 100vh;
+    justify-content: center; 
+    align-items: center;
+    background-color: #227093; 
+}
+
+h1 { 
+       color: #FFFFFF; 
+       font-family: Arial, sans-serif; 
+}
+
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Centered Heading</h1>
+        </header>
+        <main>
+            Additional page content and navigation go here
+        </main>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html
new file mode 100644
index 0000000..d338ba2
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+
+body { 
+    margin: 0; 
+}
+
+header { 
+    display: flex; min-height: 100vh;
+    justify-content: center; align-items: center;
+    background-image: url(8.7.lake.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat; 
+}
+
+h1 { 
+    color: #FFFFFF; font-family: Arial, sans-serif; 
+}
+
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Centered Heading</h1>
+        </header>
+        <main>
+            Additional page content and navigation go here
+        </main>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html
new file mode 100644
index 0000000..8ac938e
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+
+body { 
+    margin: 0; 
+}
+
+header { 
+    display: flex; min-height: 100vh;
+    background-image: url(8.7.lake.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat; 
+}
+
+h1 { 
+    color: #FFFFFF; font-family: Arial, sans-serif; 
+    margin: auto;
+}
+
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Centered Heading</h1>
+        </header>
+        <main>
+            Additional page content and navigation go here
+        </main>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html
new file mode 100644
index 0000000..5cb35ee
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html	
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Page Title Goes Here</title>
+        <style>
+
+body { 
+    margin: 0; 
+}
+
+header { 
+    display: grid; min-height: 100vh;
+    justify-content: center; align-items: center;
+    background-image: url(8.7.lake.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat; 
+}
+
+h1 { 
+    color: #FFFFFF; font-family: Arial, sans-serif; 
+}
+
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>Centered Heading</h1>
+        </header>
+        <main>
+            Additional page content and navigation go here
+        </main>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg
new file mode 100644
index 0000000..014d773
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html
new file mode 100644
index 0000000..2c4b9c1
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html	
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <!--Similar situation here to my problem with 8.5, my book didn't actually have instructions on how to do this, so I have to try my best to reverse engineer and figure out the example. I hope this is satisfactory!-->
+        <style>
+
+* { 
+    box-sizing: border-box; 
+    margin: 0; 
+}
+
+body {
+    font-family: Verdana, Arial, sans-serif; 
+}
+
+#wrapper { 
+    padding: 0;
+    min-width: 900px; 
+}
+nav { 
+    float: left; 
+    width: 150px; 
+}
+
+nav ul { 
+    list-style-type: none;
+    padding: 1em; 
+}
+nav a { 
+    text-decoration: none;
+    padding: 1em;
+    font-weight: bold; 
+}
+header { 
+    background-color: #869dc7;
+    color: #00005D; 
+    background-image: url(8.6.light2.jpg); 
+    padding: 1em 0 1em 190px;
+    font-size: 130%;
+    min-width: 600px;
+    background-repeat: no-repeat;
+    font-family: "Times New Roman", serif; 
+}
+
+main { 
+    float: left; 
+    width: 50%;
+    padding: 1em; 
+}      
+
+h2 { 
+    color: #869dc7; 
+    font-family: arial, sans-serif; 
+}
+
+aside { 
+    float: right;
+    width: 300px;
+    background-color: #EAEAEA;
+    padding-left: 1em;
+    margin: 0; 
+}
+
+figcaption { 
+    font-style: italic; padding-left: 2em; 
+}
+
+footer { 
+    background-color: #869dc7;
+    font-size:70%;
+    text-align: center;
+    padding: 2em;
+    clear: both; 
+}
+
+header { 
+    grid-area: header; 
+}
+
+nav { 
+    grid-area: nav; 
+}
+
+main { 
+    grid-area: main; width: 100%;
+}
+
+aside { 
+    grid-area: aside; 
+}
+
+footer {
+    grid-area: footer; 
+}
+
+    @supports (display: grid) {
+        #wrapper { 
+            display: grid;
+            grid-template: 
+                "header header   header" 100px
+                "nav    main      aside"  auto
+                "footer footer    footer" 50px
+                / 150px     1fr   300px;      
+        }
+    }
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Island Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main> 
+                <h2>Locally Roasted Free-Trade Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+            </main>
+            <aside>
+                <figure>
+                    <img src="8.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                    <figcaption>Lighthouse Island Bistro</figcaption>
+                </figure>
+            </aside>
+            <footer>Copyright &copy;</footer> 
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg
new file mode 100644
index 0000000..4d5d07b
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg
new file mode 100644
index 0000000..db35321
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg
new file mode 100644
index 0000000..816f817
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg
new file mode 100644
index 0000000..3a37f44
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg
new file mode 100644
index 0000000..a19a586
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg
new file mode 100644
index 0000000..c5bd806
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg
new file mode 100644
index 0000000..09b35e8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html
new file mode 100644
index 0000000..b0bf600
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html	
@@ -0,0 +1,54 @@
+<!DOCTYPE html> 
+<html lang="en">
+    <head>
+        <title>Flexbox Gallery</title>
+        <meta charset="utf-8">
+        <style>
+
+* { 
+    box-sizing: border-box; 
+}
+
+body { 
+    background-color: #FEFEFE; 
+}
+
+header { 
+    text-align: center; 
+}
+
+#gallery { 
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around; 
+}
+
+img { 
+    margin: 1em;
+    box-shadow: 10px 10px 10px #777; 
+}
+
+
+
+        </style> 
+    </head>
+    <body>
+        <header>
+            <h1>Flexbox Gallery</h1>
+        </header>
+        <main> 
+            <div id="gallery">
+                <img src="8.1.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+                <img src="8.1.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+                <img src="8.1.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+                <img src="8.1.bird4.jpg" width="200" height="150" alt="Rock Wren">
+                <img src="8.1.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+                <img src="8.1.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+            </div>
+
+        </main>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html
new file mode 100644
index 0000000..4669030
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html	
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <style>
+
+
+
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+    padding: 1em; }
+nav a { text-decoration: none;
+    padding: 1em;
+    font-weight: bold;
+}
+header { background-color: #869DC7;
+    color: #00005D; 
+    background-image: url(8.2.light.gif); 
+    background-repeat: no-repeat;
+    padding: 2em 0 2em 10em;
+    font-size: 120%;
+}
+h2 { color: #869dc7; 
+    font-family: arial, sans-serif;
+}
+nav { float: left; }
+main{ padding: 1em; }
+aside { float: right; padding: 1em; }
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869DC7;
+    font-size:70%;
+    text-align: center;
+    padding: 2em;
+    clear: both;
+}
+
+#content { 
+    display: flex; 
+}
+nav { 
+    flex: none;       
+    background-color: #B3C7E6; 
+}
+
+main { 
+    flex: 6;
+    min-width: 20em;
+    background-color: #FFFFFF; 
+}
+
+aside {
+    flex: 4;
+    background-color: #EAEAEA; 
+}
+
+header, main, nav, figure, footer { 
+    display: block; 
+}
+
+nav   { 
+    order: 1; 
+}
+
+main  { 
+    order: 2; 
+}
+
+aside { 
+    order: 3; 
+}
+        </style> 
+    </head>
+    <body>
+        <header>
+            <h1>Lighthouse Bistro</h1>
+        </header>
+        <div id="content">
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <aside>
+                <figure>
+                    <img src="8.2.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+                    <figcaption>Cana Island Lighthouse</figcaption>
+                </figure>
+            </aside>
+            <main> 
+                <h2>Locally Roasted Free-Trade Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+            </main>
+
+        </div>
+        <footer>Copyright &copy;     </footer>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg
new file mode 100644
index 0000000..db35321
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg
new file mode 100644
index 0000000..816f817
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg
new file mode 100644
index 0000000..3a37f44
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg
new file mode 100644
index 0000000..a19a586
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg
new file mode 100644
index 0000000..c5bd806
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg
new file mode 100644
index 0000000..09b35e8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html
new file mode 100644
index 0000000..195a419
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Grid Gallery</title>
+        <meta charset="utf-8">
+        <style>
+*      { box-sizing: border-box; }
+body   { background-color: #FEFEFE; }
+header { text-align: center; } 
+
+#gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 200px);
+    grid-template-rows: auto;
+    grid-gap: 2em; gap: 2em; 
+} 
+
+
+
+
+
+
+
+        </style> 
+    </head>
+    <body>
+        <header>
+            <h1>Grid Gallery</h1>
+        </header>
+        <main> 
+            <div id="gallery">
+                <img src="8.3.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+                <img src="8.3.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+                <img src="8.3.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+                <img src="8.3.bird4.jpg" width="200" height="150" alt="Rock Wren"> 
+                <img src="8.3.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+                <img src="8.3.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle"> 
+            </div>
+        </main>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html
new file mode 100644
index 0000000..17854a8
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html	
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+    <!--I checked my work and compared 
+    it to the work provided by the student files
+    My book had some extra stuff in it that I had to remove.
+    Following is what it had:
+    @supports (display: grid) {
+      #wrapper  { display: grid;
+                  grid-template-columns: 150px 1fr;
+                  grid-template-rows: 160px auto auto; }
+      header    { grid-row: 1 / 2; grid-column: 1 / 3; }
+      nav       { grid-row: 2 / 3; grid-column: 1 / 2; }
+      main      { grid-row: 2 / 3; grid-column: 2 / 3; }
+      footer    { grid-row: 3 / 4; grid-column: 1 / 3; }
+      }
+    I'd love to use the most up to date version, but, 
+    as stated, textbooks are incredibly expensive
+    and even renting is taxing.-->
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family: Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+         padding: 1em; }
+nav a { text-decoration: none;
+        padding: 1em;
+		font-weight: bold;
+}
+
+
+header { background-color: #869dc7;
+        color: #00005D; 
+		background-image: url(8.4.light2.jpg); 
+		padding: 1em 0 1em 190px;
+		font-size: 130%;
+		min-width: 700px;
+		background-repeat: no-repeat;
+		font-family: "Times New Roman", serif;
+}
+nav { float: left; }
+main { padding: 1em; }
+h2 { color: #869dc7; 
+     font-family: arial, sans-serif;
+}
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869dc7;
+         font-size:70%;
+         text-align: center;
+		 padding: 2em;
+
+}
+
+
+#wrapper { 
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    grid-template-rows: 100px auto 50px; 
+}
+
+header { grid-row: 1 / 2; grid-column: 1 / 3; }
+nav    { grid-row: 2 / 3; grid-column: 1 / 2; }
+main   { grid-row: 2 / 3; grid-column: 2 / 3; }
+footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+
+	
+</style> 
+</head>
+<body>
+  <div id="wrapper">
+  <header>
+  <h1>Lighthouse Island Bistro</h1>
+  </header>
+    <nav>
+	<ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="rooms.html">Menu</a></li>
+      <li><a href="directions.html">Directions</a></li>
+      <li><a href="contact.html">Contact</a></li>
+	 </ul>
+    </nav>
+  <main> 
+     <h2>Locally Roasted Free-Trade Coffee</h2>
+    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+    <h2>Specialty Pastries</h2>
+    <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+  fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+  	<h2>Lunchtime is Anytime</h2>
+    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+    <h2>Panoramic View</h2>
+	<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+     <footer>Copyright &copy;     </footer> 
+  </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg
new file mode 100644
index 0000000..ae6551b
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg
new file mode 100644
index 0000000..cb611ce
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html
new file mode 100644
index 0000000..43a27a8
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html	
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<!--
+    This assignment was completely missing from my book
+    I tried my best to research how to do it via the internet
+    so if this, well, sucks, do bare in mind that's the case.
+    
+    these newer textbooks are just too expensive! 
+    they cost more than my gas money for my gas guzzling SUV!
+-->
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Arial, sans-serif;
+      margin: 0;
+}
+
+header { background-image: url(8.5.header.jpg);
+         background-size: cover;
+         background-repeat: no-repeat;   
+}
+
+header { 
+    grid-area: header; 
+}
+
+nav    { 
+    grid-area: nav; 
+}
+
+main   { 
+    grid-area: main; 
+}
+
+aside  { 
+    grid-area: aside; 
+}
+
+footer { 
+    grid-area: footer; 
+}
+
+
+#wrapper {
+    display: grid;
+    grid-template:
+        "header header header" 100px 
+        "nav main aside" auto
+        "footer footer footer" 50px
+    / 150px 1fr 30%;
+}
+
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+     color: #F7F1E3;
+	 font-size: 300%;
+     text-shadow: 10px 10px 10px #000000;
+}
+nav {   font-size: 120%; }
+
+nav ul { padding-left: 0;
+         display: flex; 
+	     flex-direction: row; 
+	     flex-wrap: wrap; 
+	     justify-content: space-around; }	  
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+		 min-width: 6em;
+	     font-size: 110%;
+		 text-align: center;
+		 background-color: #003C58; 
+		 margin: .5em;
+		 padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+aside {  padding: 1em;}
+
+main {   padding: 0 1em 1em;    }
+
+footer { background-color: #CCCCCC;
+        text-align: center;
+		 font-style: italic;
+		 padding: 1em; }
+
+      
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Casita Sedona</h1>
+  </header>  
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Rooms</a></li>
+     <li><a href="specials.html">Specials</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+    <main>   
+	<h2>Located in the Heart of Sedona</h2>
+    <p>At Casita Sedona Bed &amp; Breakfast you&rsquo;ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+    <h2>Luxurious Rooms </h2>
+    <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms &mdash; each is unique and sure to be a high point of your vacation experience.</p>
+  	<h2>Hearty Breakfast</h2>
+    <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+	<h2>About Your Hosts</h2>
+	<p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+   </main> 
+      <aside>
+       <img src="8.5.scenery.jpg" alt="Owl Clover wildflowers with red rock mountain">
+	 <h2>Guided Hikes</h2>
+	 <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+   </aside>
+   <footer>Copyright &copy; 
+   </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg
new file mode 100644
index 0000000..25eab07
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg
new file mode 100644
index 0000000..e703c63
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html
new file mode 100644
index 0000000..4155306
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html	
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+    <h1>Image Element</h1>
+    <img src="8.12.fallback.jpg"
+  sizes="100vw"
+  srcset="8.12.large.jpg 1200w, 8.12.medium.jpg 800w, 8.12.small.jpg 320w"
+  alt="waterwheel">
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg
new file mode 100644
index 0000000..a79996a
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg
new file mode 100644
index 0000000..4478ad8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg
new file mode 100644
index 0000000..946c71f
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg
new file mode 100644
index 0000000..e703c63
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html
new file mode 100644
index 0000000..480b464
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html	
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+    <!--The student files had a header, adding just in case my book is missing it.-->
+    <h1>Picture element<h1>
+    <!--Opted to try out the webp images here.  I'm a big fan of them and wanted to see if they'd work with this set up as well. -->
+    <picture>
+    <source media="(min-width: 1200px)" srcset="8.11.large.webp">
+    <source media="(min-width: 800px)" srcset="8.11.medium.webp">
+    <source media="(min-width: 320px)" srcset="8.11.small.webp">
+    <img src="8.11.fallback.jpg" alt="waterwheel">
+</picture>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg
new file mode 100644
index 0000000..a79996a
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp
new file mode 100644
index 0000000..ca3bf54
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg
new file mode 100644
index 0000000..4478ad8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp
new file mode 100644
index 0000000..b90e766
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg
new file mode 100644
index 0000000..946c71f
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp
new file mode 100644
index 0000000..5051869
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html
new file mode 100644
index 0000000..b1e9bd4
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html	
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+* { box-sizing: border-box;
+    margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color:  #B3C7E6; 
+}
+
+header { color: #00005D; 
+    background-color: #869DC7;
+    background-image: url(8.8.light.gif);
+    background-repeat: no-repeat;		
+    background-size: auto 100%;
+    padding: .5em 0 .5em 5.5em;
+}
+main {   background-color: #FFFFFF;
+    color: #000000;
+    padding: 1em; 
+}
+aside { text-align: center; }
+
+footer {  background-color: #869DC7;
+    font-size:70%;
+    text-align: center;
+    padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+    padding-left: 0; 
+    border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;  
+    text-align: center;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+    font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+    color: #FEFEFE; }
+
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+    nav li {
+        display: inline-block;
+        width: 7em;
+        padding: 0.5em;
+        border: none; 
+    }
+    nav ul  {
+        text-align: center; 
+    }
+    main    {
+        float: left;
+        width: 55%; 
+    }
+    aside   {
+        margin-left: 55%; 
+    }
+    footer  {
+        clear: both; 
+    }
+
+}
+
+ @media (min-width: 1024px) {
+     nav li {
+         display: block; 
+     }
+     nav ul {
+         text-align: left; 
+     }
+     nav {
+         float: left; 
+     }
+     #wrapper {
+         width: 80%; margin: auto; max-width: 1200px; 
+     }
+     body {
+         background-color: #000066; }
+ }
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li id="page">Home</li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main>
+                <h2>Locally Roasted Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p> 
+            </main>
+            <aside>
+                <figure>
+                    <img src="8.8.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+                </figure>
+            </aside> 
+            <footer>
+                Copyright &copy;
+            </footer>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html
new file mode 100644
index 0000000..c0b856b
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html	
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Lighthouse Bistro</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+* { box-sizing: border-box;
+    margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color:  #B3C7E6; 
+}
+
+header { color: #00005D; 
+    background-color: #869DC7;
+    background-image: url(8.9.light.gif);
+    background-repeat: no-repeat;		
+    background-size: auto 100%;
+    padding: .5em 0 .5em 5.5em;
+}
+main {   background-color: #FFFFFF;
+    color: #000000;
+    padding: 1em; 
+}
+aside { text-align: center; }
+
+footer {  background-color: #869DC7;
+    font-size:70%;
+    text-align: center;
+    padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+    padding-left: 0; 
+    border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;  
+    text-align: center;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+    font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+    color: #FEFEFE; }
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+    nav ul { 
+        display: flex; flex-flow: row nowrap;
+        justify-content: space-around; 
+    }
+    nav ul li { 
+        border-bottom: none; 
+    }
+
+    #wrapper { 
+        display: grid;
+        grid-template-columns: 55% auto;
+        grid-template-rows: auto auto auto auto; 
+    }
+    header  { 
+        grid-row: 1 / 2;
+        grid-column: 1 / 3; 
+    }
+    nav     { 
+        grid-row: 2 / 3;
+        grid-column: 1 / 3; 
+    }
+    main    { 
+        grid-row: 3 / 4;
+        grid-column: 1 / 2; 
+    }
+    aside   { 
+        grid-row: 3 / 4;
+        grid-column: 2 / 3; 
+    }
+    footer  { 
+        grid-row: 4 / 5;
+        grid-column: 1 / 3; 
+    }
+}
+
+    @media (min-width: 1024px) {
+            body {
+                background-color: #000066; 
+            }
+            nav ul {
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap; 
+            }
+            #wrapper {
+                width: 80%;
+                margin: auto; max-width: 1200px;
+                display: grid;
+                grid-template-columns: 150px auto auto;
+                grid-template-rows: auto auto auto ; 
+            }
+            header  {
+                grid-row: 1 / 2; grid-column: 1 / 4; 
+            }
+            nav     {
+                grid-row: 2 / 3; grid-column: 1 / 2; 
+            }
+            main    {
+                grid-row: 2 / 3; grid-column: 2 / 3; 
+            }
+            aside   {
+                grid-row: 2 / 3; grid-column: 3 / 4; 
+            }
+            footer  {
+                grid-row: 3 / 4; grid-column: 1 / 4; 
+            }
+        }
+
+        </style> 
+    </head>
+    <body>
+        <div id="wrapper">
+            <header>
+                <h1>Lighthouse Bistro</h1>
+            </header>
+            <nav>
+                <ul>
+                    <li id="page">Home</li>
+                    <li><a href="rooms.html">Menu</a></li>
+                    <li><a href="directions.html">Directions</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <main>
+                <h2>Locally Roasted Coffee</h2>
+                <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+                <h2>Specialty Pastries</h2>
+                <p>Enjoy a selection of our fresh-baked, organic pastries, including 
+                fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+                <h2>Lunchtime is Anytime</h2>
+                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+                <h2>Panoramic View</h2>
+                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p> 
+            </main>
+            <aside>
+                <figure>
+                    <img src="8.9.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+                </figure>
+            </aside> 
+            <footer>
+                Copyright &copy;
+            </footer>
+        </div>
+    </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg
new file mode 100644
index 0000000..cb611ce
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg differ
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html
new file mode 100644
index 0000000..5eb0f22
--- /dev/null
+++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html	
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+      margin: 0;
+}
+
+header { background-image: url(8.10.header.jpg);
+         background-repeat: no-repeat;   
+         background-size: cover;
+}
+
+img { max-width: 100%;
+      height: auto; }
+
+/* Name Grid Areas */
+header { grid-area: h; }
+nav    { grid-area: n; }
+main   { grid-area: m; }
+aside  { grid-area: a; }
+footer { grid-area: f; }
+#wrapper {  background-color: #F7F1E3; 
+            color: #0B8781;
+            display: grid;
+            grid-template: 
+		    "h "
+			"n "
+			"m"
+			"f" ; }
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+     color: #F7F1E3;
+	 font-size: 300%;
+     text-shadow: 10px 10px 10px #000000;
+     font-size: 300%;
+}
+nav {   font-size: 120%; }
+
+nav ul { padding-left: 0;
+         display: flex; 
+	     flex-direction: row; 
+	     flex-wrap: wrap; 
+	     justify-content: space-around; }	  
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+		 min-width: 6em;
+	     font-size: 110%;
+		 text-align: center;
+		 background-color: #003C58; 
+		 margin: .5em;
+		 padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+
+aside {  display: none;  padding: 1em;}
+
+main {   padding: 0 1em 1em;    }
+
+footer { text-align: center;
+		 font-style: italic;
+		 padding: 1em; }
+
+@media (min-width: 38em) {
+        #wrapper { grid-template:
+		            " h   h "
+					" n   n "
+					" m   a "
+					" f   f "
+					/ 60% 40% ; }
+   			aside { display: block; }
+}
+@media (min-width: 65em) {
+		  nav ul { display: flex; 
+	           flex-direction: column; 
+	           flex-wrap: nowrap; }
+          #wrapper { grid-template: 
+		             " h   h   h"
+					 " n   m   a"
+					 " f   f   f" 
+			        / 150px 1fr 30%; }
+}
+
+        
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+  <header>
+    <h1>Casita Sedona</h1>
+  </header>  
+  <nav>
+    <ul>
+	 <li><a href="index.html">Home</a></li>
+     <li><a href="rooms.html">Rooms</a></li>
+     <li><a href="specials.html">Specials</a></li>
+     <li><a href="contact.html">Contact</a></li>
+	</ul> 
+   </nav>
+    <main>   
+	<h2>Located in the Heart of Sedona</h2>
+    <p>At Casita Sedona Bed &amp; Breakfast you&rsquo;ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+    <h2>Luxurious Rooms </h2>
+    <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms &mdash; each is unique and sure to be a high point of your vacation experience.</p>
+  	<h2>Hearty Breakfast</h2>
+    <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+	<h2>About Your Hosts</h2>
+	<p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+   </main> 
+      <aside>
+     <img src="8.10.pools.jpg" alt="Pools of water in the rock">
+	 <h2>Guided Hikes</h2>
+	 <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+   </aside>
+   <footer>Copyright &copy; 
+   </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg
new file mode 100644
index 0000000..b738448
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg differ
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html
new file mode 100644
index 0000000..ce51ed7
--- /dev/null
+++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+    <table border=1>
+        <caption>School History</caption>
+        <tr>
+            <td><b>School Attended</b></td>
+            <td><b>Years</b></td>
+            <td><b>Degree Awarded</b></td>
+        </tr>
+        <tr>
+            <td>Anonymized High School Name</td>
+            <td>2018-2020</td>
+            <td>High School Diploma</td>
+        </tr>
+        <tr>
+            <td>Artkansas Tech University</td>
+            <td>2020-Present</td>
+            <td>In-Progress Bachelors Degree in Information Technology</td>
+        </tr>
+    </table>
+
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html
new file mode 100644
index 0000000..98c4b70
--- /dev/null
+++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html	
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+
+<table border=1>
+    <tr>
+        <td rowspan=3>Cana Island Lighthouse</td>
+        <td>Built: 1869.</td>
+    </tr>
+    <tr>
+        <td>Automated: 1944.</td>
+    </tr>
+    <tr>
+        <td>Tower Height: 65 Feet.</td>
+    </tr>
+</table>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html
new file mode 100644
index 0000000..0a11470
--- /dev/null
+++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html	
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en"> 
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+table { 
+    margin: auto;
+    border: 5px solid #000066;
+    width: 600px;
+    border-spacing: 0;
+}
+
+caption { 
+    font-family: Verdana, sans-serif;
+    font-weight: bold;
+    font-size: 1.2em;
+    padding-bottom: 5px;
+}
+
+
+td, th { 
+    padding: 5px;
+    font-family: Arial, sans-serif;
+    border-style: none;
+}
+
+.altrow { 
+    background-color: #eaeaea;
+}
+
+
+        </style>
+    </head>
+    <body>
+        <table> 
+            <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+            <tr>
+                <th>Specialty Coffee</th>
+                <th>Description</th>
+                <th>Price</th>
+            </tr>
+            <tr class=altrow>
+                <td>Lite Latte</td>
+                <td>Indulge in a shot of espresso with steamed, skim milk</td>
+                <td>$3.50</td>
+            </tr>
+            <tr>
+                <td>Mocha Latte</td>
+                <td>Choose dark or milk chocolate with steamed milk</td>
+                <td>$4.00</td>
+            </tr>
+            <tr class=altrow>
+                <td>MCP Latte</td>
+                <td>A luscious mocha latte with caramel and pecan syrup</td>
+                <td>$4.50</td>
+            </tr>
+        </table>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html
new file mode 100644
index 0000000..db73610
--- /dev/null
+++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html	
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en"> 
+    <head>
+        <title>Lighthouse Island Bistro</title>
+        <meta charset="utf-8">
+        <style>
+table { 
+    margin: auto;
+    border: 5px solid #000066;
+    width: 600px;
+    border-spacing: 0;
+}
+
+caption { 
+    font-family: Verdana, sans-serif;
+    font-weight: bold;
+    font-size: 1.2em;
+    padding-bottom: 5px;
+}
+
+
+td, th { 
+    padding: 5px;
+    font-family: Arial, sans-serif;
+    border-style: none;
+}
+
+tr:nth-of-type(even) { 
+    background-color: #eaeaea;
+}
+
+tr:first-of-type { 
+    background-color: #006;
+    color: #eaeaea; 
+}
+
+
+        </style>
+    </head>
+    <body>
+        <table> 
+            <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+            <tr>
+                <th>Specialty Coffee</th>
+                <th>Description</th>
+                <th>Price</th>
+            </tr>
+            <tr>
+                <td>Lite Latte</td>
+                <td>Indulge in a shot of espresso with steamed, skim milk</td>
+                <td>$3.50</td>
+            </tr>
+            <tr>
+                <td>Mocha Latte</td>
+                <td>Choose dark or milk chocolate with steamed milk</td>
+                <td>$4.00</td>
+            </tr>
+            <tr>
+                <td>MCP Latte</td>
+                <td>A luscious mocha latte with caramel and pecan syrup</td>
+                <td>$4.50</td>
+            </tr>
+        </table>
+
+    </body>
+</html>
diff --git a/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html
new file mode 100644
index 0000000..3d1acf5
--- /dev/null
+++ b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>	
+<title>First HTML Webpage</title>
+<meta charset="utf-8">
+</head>
+<body>
+Test
+</body>
+</html>
+
+
+
+
+
+
+
+
+
-- 
cgit v1.2.3