diff --git a/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project01.scssc b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project01.scssc
new file mode 100644
index 0000000000000000000000000000000000000000..0cacb755a9553ffa131681dca0843f41df1e564c
Binary files /dev/null and b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project01.scssc differ
diff --git a/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/reset.scssc b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/reset.scssc
new file mode 100644
index 0000000000000000000000000000000000000000..2565af733765c6f540c99e13c457bf9bd6501508
Binary files /dev/null and b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/reset.scssc differ
diff --git a/chapter03/chapter03-project01.html b/chapter03/chapter03-project01.html
index d6e62d3643362ebd0543ef0de75ff7f4fbf3f5de..fcf193ddf18a9065d800f632e1a21c9414cbbeb3 100644
--- a/chapter03/chapter03-project01.html
+++ b/chapter03/chapter03-project01.html
@@ -3,6 +3,9 @@
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
+
+ <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
+ <link rel= "stylesheet" type="text/css" href= "css/chapter03-project01.css" />
</head>
<body>
<header>
diff --git a/chapter03/css/chapter03-project01.css b/chapter03/css/chapter03-project01.css
new file mode 100644
index 0000000000000000000000000000000000000000..93e99d9f7f3b05e36d25a4e785e0dccb53c86909
--- /dev/null
+++ b/chapter03/css/chapter03-project01.css
@@ -0,0 +1,71 @@
+/* CSS for chapter03-project01 */
+/* Declare variables. */
+/* Actual CSS. Organization simplified due to simplicity of project. */
+body {
+ background-color: #203643; }
+
+header, footer {
+ margin: 0em 4em 0.5em 4em;
+ padding: 0.5em;
+ color: white;
+ background-color: #306271; }
+
+header h1, footer h1 {
+ font-size: 1.8em; }
+header h2, footer h2 {
+ font-size: 0.8em; }
+header ul, footer ul {
+ display: flex; }
+header li, footer li {
+ list-style-type: none; }
+header a, footer a {
+ text-decoration: none; }
+header nav, footer nav {
+ margin-top: 0.8%;
+ font-size: 1.4em;
+ background-color: #738b97; }
+header p, footer p {
+ padding-bottom: 0.5em; }
+
+header nav li {
+ margin-right: 1%;
+ margin-left: 1%; }
+
+a, a:link, a:visited {
+ color: #96ccdf; }
+
+article {
+ margin-top: 1em;
+ margin-right: 4em;
+ margin-bottom: 1em;
+ margin-left: 4em;
+ padding: 1em;
+ background-color: #ffffff; }
+
+article h3 {
+ margin-bottom: 0.5em;
+ font-size: 1.3em;
+ border-bottom: solid 1px #b8b8b8; }
+article a {
+ font-weight: bold; }
+article figure a {
+ display: flex;
+ width: 500px;
+ height: 312px;
+ margin-top: 0.5%;
+ margin-bottom: 0.5%;
+ padding: 0.5%;
+ border: solid 1px #b8b8b8; }
+article p:first-of-type {
+ padding-bottom: 0.2em;
+ color: #949ea2;
+ font-style: italic; }
+article p:nth-of-type(3) {
+ max-width: 500px;
+ margin-bottom: 2em;
+ padding: 1em;
+ background: linear-gradient(#ffffff, #b8b8b8);
+ border: solid 1px #b8b8b8;
+ border-radius: 1em; }
+
+/*# sourceMappingURL=chapter03-project01.css.map */
diff --git a/chapter03/css/chapter03-project01.css.map b/chapter03/css/chapter03-project01.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..6e3f30b5bf2e187892f0e48d0f5637f0c807a3ee
--- /dev/null
+++ b/chapter03/css/chapter03-project01.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAUxB,uEAAuE;AAEvE,IAAK;EACD,gBAAgB,EAXH,OAAO;;AAcxB,cAAe;EACX,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,KAAK;EAEd,KAAK,EAAE,KAAK;EAEZ,gBAAgB,EAnBJ,OAAO;;AAwBnB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,SAAS,EAAE,KAAK;AAGpB,oBAAG;EACC,OAAO,EAAE,IAAI;AAGjB,oBAAG;EACC,eAAe,EAAE,IAAI;AAGzB,kBAAE;EACE,eAAe,EAAE,IAAI;AAGzB,sBAAI;EACA,UAAU,EAAE,IAAI;EAEhB,SAAS,EAAE,KAAK;EAEhB,gBAAgB,EAhDN,OAAO;AAmDrB,kBAAE;EACE,cAAc,EAAE,KAAK;;AAQrB,aAAG;EACC,YAAY,EAAE,EAAE;EAChB,WAAW,EAAE,EAAE;;AAK3B,oBAAqB;EACjB,KAAK,EAnES,OAAO;;AAsEzB,OAAQ;EACJ,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,GAAG;EAEZ,gBAAgB,EA3EN,OAAO;;AAgFjB,UAAG;EACC,aAAa,EAAE,KAAK;EAEpB,SAAS,EAAE,KAAK;EAEhB,aAAa,EAAE,iBAAqB;AAGxC,SAAE;EACE,WAAW,EAAE,IAAI;AAKjB,gBAAE;EACE,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EAEb,MAAM,EAAE,iBAAqB;AAIrC,uBAAgB;EACZ,cAAc,EAAE,KAAK;EAErB,KAAK,EA9GK,OAAO;EA+GjB,UAAU,EAAE,MAAM;AAGtB,wBAAiB;EACb,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,GAAG;EAEZ,UAAU,EAAE,iCAA0C;EACtD,MAAM,EAAE,iBAAqB;EAC7B,aAAa,EAAE,GAAG",
+"sources": ["sass/chapter03-project01.scss"],
+"names": [],
+"file": "chapter03-project01.css"
+}
\ No newline at end of file
diff --git a/chapter03/css/reset.css b/chapter03/css/reset.css
new file mode 100644
index 0000000000000000000000000000000000000000..376278b264ee3d2e1399f078874019737cc27b94
--- /dev/null
+++ b/chapter03/css/reset.css
@@ -0,0 +1,10 @@
+/* CSS to reset main HTML element formatting */
+html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
+h1, h2, h3, ul, li, body, div, p, img {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ border: 0; }
+
+/*# sourceMappingURL=reset.css.map */
diff --git a/chapter03/css/reset.css.map b/chapter03/css/reset.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..37776a67f68d64d511c699a0a946ff845010c045
--- /dev/null
+++ b/chapter03/css/reset.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACA,+CAA+C;AAE/C;qCACsC;EAClC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,QAAQ;EACxB,MAAM,EAAE,CAAC",
+"sources": ["sass/reset.scss"],
+"names": [],
+"file": "reset.css"
+}
\ No newline at end of file
diff --git a/chapter03/css/sass/_order_reference.scss b/chapter03/css/sass/_order_reference.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7ef63bedac43d853b21fc7ea3884913e5f872739
--- /dev/null
+++ b/chapter03/css/sass/_order_reference.scss
@@ -0,0 +1,62 @@
+
+//********************************************Positioning*********************************************
+//*********************************************Includes: *********************************************
+//position, top, right, bottom, left, z-index, display, float
+
+//flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-grow,
+//flex-shrink, flex-basis, align-self,
+
+//width, height, max-width, max-height, min-width, min-height, padding, padding-top, padding-right,
+//padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left,
+
+//margin-collapse, margin-top-collapse, margin-right-collapse, margin-bottom-collapse,
+//margin-left-collapse,
+
+//overflow, overflow-x, overflow-y, clip, clear
+//****************************************************************************************************
+
+
+//*********************************************Typography*********************************************
+//*********************************************Includes: *********************************************
+//font, font-family, font-size, font-smoothing, osx-font-smoothing, font-style, font-weight,
+
+//hyphens, src, line-height, letter-spacing, word-spacing, color, text-align, text-decoration,
+//text-indent, text-overflow, text-rendering, text-size-adjust, text-shadow, text-transform,
+//word-break, word-wrap, white-space
+//****************************************************************************************************
+
+
+//***********************************************Visual***********************************************
+//*********************************************Includes: *********************************************
+//vertical-align, list-style, list-style-type, list-style-position, list-style-image, pointer-events,
+//cursor,
+
+//background, background-attatchment, background-color, background-image, background-position,
+//background-repeat, background-size,
+
+//border, border-collapse, border-top, border-right, border-bottom, border-left, border-color,
+//border-image, border-top-color, border-right-color, border-bottom-color, border-left-color,
+//border-spacing, border-style, border-top-style, border-right-style, border-bottom-style,
+//border-left-style, border-width, border-top-width, border-right-width, border-bottom-width,
+//border-left-width,
+
+//border-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
+//border-top-left-radius, border-radius-topright, border-radius-bottomright, border-radius-bottomleft,
+//border-radius-topleft,
+
+//content, quotes, outline, outline-offset, opacity, filter, visibility, size, zoom
+//****************************************************************************************************
+
+
+//***********************************************Other************************************************
+//*********************************************Includes: *********************************************
+//transform, box-align, box-flex, box-orient, box-pack, box-shadow, box-sizing, table-layout,
+
+//animation, animation-delay, animation-duration, animation-iteration-count, animation-name,
+//animation-play-state, animation-timing-function, animation-fill-mode,
+
+//transition, transition-delay, transition-duration, transition-property, transition-timing-function,
+
+//background-clip, backface-visibility, resize, appearance, user-select, interpolation-mode, direction,
+//marks, page, set-link-source, unicode-bidi, speak
+//****************************************************************************************************
diff --git a/chapter03/css/sass/chapter03-project01.scss b/chapter03/css/sass/chapter03-project01.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7e1bf9b7566267130396cf39b56e3aadd4d8b6c4
--- /dev/null
+++ b/chapter03/css/sass/chapter03-project01.scss
@@ -0,0 +1,134 @@
+
+/* CSS for chapter03-project01 */
+
+/* Declare variables. */
+
+$color-aquaDark: #203643;
+$color-aquaMid: #306271;
+$color-aquaLight: #738b97;
+$color-hyperlink: #96ccdf;
+$color-smallText: #949ea2;
+$color-white: #ffffff;
+$color-grey: #b8b8b8;
+
+/* Actual CSS. Organization simplified due to simplicity of project. */
+
+body {
+ background-color: $color-aquaDark;
+}
+
+header, footer {
+ margin: 0em 4em 0.5em 4em;
+ padding: 0.5em;
+
+ color: white;
+
+ background-color: $color-aquaMid;
+}
+
+header, footer {
+
+ h1 {
+ font-size: 1.8em;
+ }
+
+ h2 {
+ font-size: 0.8em;
+ }
+
+ ul {
+ display: flex;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ nav {
+ margin-top: 0.8%;
+
+ font-size: 1.4em;
+
+ background-color: $color-aquaLight;
+ }
+
+ p {
+ padding-bottom: 0.5em;
+ }
+}
+
+header {
+
+ nav {
+
+ li {
+ margin-right: 1%;
+ margin-left: 1%;
+ }
+ }
+}
+
+a, a:link, a:visited {
+ color: $color-hyperlink;
+}
+
+article {
+ margin-top: 1em;
+ margin-right: 4em;
+ margin-bottom: 1em;
+ margin-left: 4em;
+ padding: 1em;
+
+ background-color: $color-white;
+}
+
+article {
+
+ h3 {
+ margin-bottom: 0.5em;
+
+ font-size: 1.3em;
+
+ border-bottom: solid 1px $color-grey;
+ }
+
+ a {
+ font-weight: bold;
+ }
+
+ figure {
+
+ a {
+ display: flex;
+ width: 500px;
+ height: 312px;
+ margin-top: 0.5%;
+ margin-bottom: 0.5%;
+ padding: 0.5%;
+
+ border: solid 1px $color-grey;
+ }
+ }
+
+ p:first-of-type {
+ padding-bottom: 0.2em;
+
+ color: $color-smallText;
+ font-style: italic;
+ }
+
+ p:nth-of-type(3) {
+ max-width: 500px;
+ margin-bottom: 2em;
+ padding: 1em;
+
+ background: linear-gradient($color-white, $color-grey);
+ border: solid 1px $color-grey;
+ border-radius: 1em;
+ }
+
+}
diff --git a/chapter03/css/sass/reset.scss b/chapter03/css/sass/reset.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a9caf897cf2e3269e128365f4f1fb73fd5804d7f
--- /dev/null
+++ b/chapter03/css/sass/reset.scss
@@ -0,0 +1,11 @@
+
+/* CSS to reset main HTML element formatting */
+
+html, body, header, footer, hgroup, nav, article, section, figure, figcaption,
+h1, h2, h3, ul, li, body, div, p, img {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ border: 0;
+}