From c40a0721bde0b4f1c5e0b2f82ceb6ebc0c4e55d7 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 18:43:57 -0500
Subject: [PATCH 01/21] Update App.css

---
 src/App.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index c5c6e8a..31eaf38 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,10 @@
-.App {
+.App { 
+/* aligns all text centered */
   text-align: center;
 }
 
 .App-logo {
+  
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }

From f2b6ecff17b94a602a2f116ed3b44034046829ac Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 18:51:47 -0500
Subject: [PATCH 02/21] Update App.css

---
 src/App.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 31eaf38..1be3e05 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,27 +4,35 @@
 }
 
 .App-logo {
-  
+/* logo animation 20 second spin loop  */
   animation: App-logo-spin infinite 20s linear;
+/* logo height of 80px   */
   height: 80px;
 }
 
 .App-header {
+/* header background color   */
   background-color: #222;
+/* header height   */
   height: 150px;
+/* header padding (space between border and element   */
   padding: 20px;
+/* header text color   */
   color: white;
 }
 
 .App-title {
+/* title font size  */
   font-size: 1.5em;
 }
 
 .App-intro {
+/* intro font size   */
   font-size: large;
 }
 
 @keyframes App-logo-spin {
+/* logo animation spin start & end  */
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }

From 9898f923b6a1630d44d80fa783431005f3444842 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 19:22:04 -0500
Subject: [PATCH 03/21] Update index.js

---
 src/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 726c418..8bafe60 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,17 @@
-import React from 'react';
+// file used to render app component
+// import react so we can use methods in this file
+import React from 'react'; 
+// import react-dom, another package we installed, the virtual DOM, important so we can refresh individual elements
 import ReactDOM from 'react-dom';
+// import index.css from src file
 import './index.css';
+// import App.js from src file
 import App from './App';
+// import registerServiceWorker from src file, created during the "npx react-create-app _______" process
+// for functionality during loss of connectivity
 import registerServiceWorker from './registerServiceWorker';
 
-
+// virtual DOM renders the App, root is index.html in public folder
 ReactDOM.render(<App />, document.getElementById('root'));
+// calls registerServiceWorker function
 registerServiceWorker();

From f9ab65fa9d556b7841c8d6b7d37d69132fa3b1a4 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 19:32:39 -0500
Subject: [PATCH 04/21] Update App.js

---
 src/App.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6472345..b51c6af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,21 @@
+// import react for this project
 import React, { Component } from 'react';
+// import app.css file from components folder on line 2
 import './App.css';
+// import Header file from components folder on line 2
 import Header from './Header';
+// import SectionMain file from components folder on line 2
 import SectionMain from './SectionMain';
+// import Aside file from components folder on line 2
 import Aside from './Aside';
+// import Footer file from components folder on line 2
 import Footer from './Footer';
 
+// create class-based component
 class App extends Component {
-
+// render method
   render() {
+//    return rendered HTML of the individual sections
     return (
       <div className="App">
         <Header backColor="green" width="50%"></Header>
@@ -18,5 +26,5 @@ class App extends Component {
     );
   }
 }
-
+// export App so it can be accessed in index.js
 export default App;

From e8b68fecd4aaf17bbf20116e32285142b28dbe6a Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 20:01:33 -0500
Subject: [PATCH 05/21] Update Header.css

---
 src/Header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Header.css b/src/Header.css
index 68f29e2..54b8d36 100644
--- a/src/Header.css
+++ b/src/Header.css
@@ -1,3 +1,4 @@
+/* create Header-main class, set header height to 300px */
 .Header-main{
   height: 300px;
 }

From 77b141c04a1bd6d535655209d6cedb7ba6684d93 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 20:06:23 -0500
Subject: [PATCH 06/21] Update Header.js

---
 src/Header.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Header.js b/src/Header.js
index 5c9495c..1a5774d 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,9 +1,14 @@
+//  import react and component for use in this file
 import React, { Component } from 'react';
+// import Header.css file
 import './Header.css';
 
+// establish class-based component for Header element
 class Header extends Component {
+//   render style variable and return header with styling
   render() {
     const style = {
+//  grab styling from App.js (defined in return)
       width: this.props.width,
       backgroundColor: this.props.backColor
     }
@@ -15,6 +20,7 @@ class Header extends Component {
   }
 }
 
+// export Header component
 export default Header;
 
 

From f039966f4d0062647c2f7bf6faae1ebe7975fe8c Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Thu, 3 Jun 2021 20:38:46 -0500
Subject: [PATCH 07/21] Update Aside.css

---
 src/Aside.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Aside.css b/src/Aside.css
index d15566c..cd46f89 100644
--- a/src/Aside.css
+++ b/src/Aside.css
@@ -1,4 +1,6 @@
+/* declare class for aside section */
 .Aside{
+/*    */
   height: 300px;
   width: 20%;
   background: lightgreen;

From ec2efd45a050ebb73b3c62c8c292397261a05eb3 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:36:13 -0500
Subject: [PATCH 08/21] Update App.css

---
 src/App.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.css b/src/App.css
index 1be3e05..9dafc0c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,10 @@
+/* create class "App" */
 .App { 
 /* aligns all text centered */
   text-align: center;
 }
 
+/* create class "App-logo */
 .App-logo {
 /* logo animation 20 second spin loop  */
   animation: App-logo-spin infinite 20s linear;
@@ -10,6 +12,7 @@
   height: 80px;
 }
 
+/* create class "App-header */
 .App-header {
 /* header background color   */
   background-color: #222;
@@ -21,11 +24,13 @@
   color: white;
 }
 
+/* create class "App-title */
 .App-title {
 /* title font size  */
   font-size: 1.5em;
 }
 
+/* create class "App-intro */
 .App-intro {
 /* intro font size   */
   font-size: large;

From 3a21f0e37ce35a1eda720175b8c066692a52db04 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:39:31 -0500
Subject: [PATCH 09/21] Update index.html

---
 public/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/index.html b/public/index.html
index cd92541..3594f87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,6 +26,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
+<!-- all files will be rendered into this div  -->
     <div id="root"></div>
     <!--
       This HTML file is a template.

From 73a52d612a8cfc93affa8dc7fe081ab026960f4a Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:43:53 -0500
Subject: [PATCH 10/21] Update index.js

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 8bafe60..2685fd1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,7 @@ import App from './App';
 // for functionality during loss of connectivity
 import registerServiceWorker from './registerServiceWorker';
 
-// virtual DOM renders the App, root is index.html in public folder
+// virtual DOM renders the App component into root (a div in public/index.html)
 ReactDOM.render(<App />, document.getElementById('root'));
 // calls registerServiceWorker function
 registerServiceWorker();

From 17105beb4e40eef3307fb8c88b139a0bc6be1bfa Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:49:44 -0500
Subject: [PATCH 11/21] Update Footer.js

---
 src/Footer.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Footer.js b/src/Footer.js
index c116027..5a2e2a7 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,8 +1,13 @@
+// import react for this project
 import React, { Component } from 'react';
+// import Footer styling file from src
 import './Footer.css';
 
+// create class-based component
 class Footer extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the footer
     return (
         <footer className="Footer">
         </footer>
@@ -11,4 +16,5 @@ class Footer extends Component {
   }
 }
 
+// export Footer so it can be imported to App (parent component)
 export default Footer;

From e52ce177970af44f8273f738b434ad6e22e13aa9 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:53:46 -0500
Subject: [PATCH 12/21] Update Footer.css

---
 src/Footer.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Footer.css b/src/Footer.css
index 1cfcf60..1dd525b 100644
--- a/src/Footer.css
+++ b/src/Footer.css
@@ -1,3 +1,4 @@
+/* create class "Footer", sets section height, background color, and moves footer below any floating elements */
 .Footer{
   height: 200px;
   background: orange;

From 3f31d66e9f7ea2f264060726ab1d2ce745113c25 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Mon, 7 Jun 2021 18:56:10 -0500
Subject: [PATCH 13/21] Update Footer.js

---
 src/Footer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Footer.js b/src/Footer.js
index 5a2e2a7..d4a6fb9 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -9,6 +9,7 @@ class Footer extends Component {
   render() {
     //    return rendered HTML of the footer
     return (
+//   footer has class name so we can apply CSS styling to it, camelCase indicates JSX
         <footer className="Footer">
         </footer>
 

From cb4a9930cb3a45231123959929dc96c380af03cd Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:03:32 -0500
Subject: [PATCH 14/21] Update Aside.js

---
 src/Aside.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/Aside.js b/src/Aside.js
index 0698377..ad7855e 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -1,9 +1,15 @@
+// import react for this project
 import React, { Component } from 'react';
+// import Aside styling file from src
 import './Aside.css';
 
+// create class-based component
 class Aside extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the footer
     return (
+      //   aside has class name so we can apply CSS styling to it, camelCase indicates JSX
         <aside className="Aside">
         </aside>
 
@@ -11,4 +17,5 @@ class Aside extends Component {
   }
 }
 
+// export Aside component so it can be imported to App (parent component)
 export default Aside;

From a5354a7c2877266495a317c85b7aafd445f2451d Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:07:49 -0500
Subject: [PATCH 15/21] Update Aside.css

---
 src/Aside.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Aside.css b/src/Aside.css
index cd46f89..37d6b86 100644
--- a/src/Aside.css
+++ b/src/Aside.css
@@ -1,6 +1,5 @@
-/* declare class for aside section */
+/* declare class for aside section, set height, width, background color, and float it to the left edge of the viewport */
 .Aside{
-/*    */
   height: 300px;
   width: 20%;
   background: lightgreen;

From 6925bbc6a3bab30aebd058522905d28a3dbe62ca Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:14:11 -0500
Subject: [PATCH 16/21] Update Header.js

---
 src/Header.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Header.js b/src/Header.js
index 1a5774d..1ff63f9 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,6 +1,6 @@
 //  import react and component for use in this file
 import React, { Component } from 'react';
-// import Header.css file
+// import Header styling file from src
 import './Header.css';
 
 // establish class-based component for Header element
@@ -8,7 +8,7 @@ class Header extends Component {
 //   render style variable and return header with styling
   render() {
     const style = {
-//  grab styling from App.js (defined in return)
+//  grab styling from App.js (defined in return on line 21)
       width: this.props.width,
       backgroundColor: this.props.backColor
     }
@@ -23,5 +23,5 @@ class Header extends Component {
 // export Header component
 export default Header;
 
-
+// well that's an interesting comment right there...wonder what you were going to do with it?
 //document.querySelector("header").style.backgroundColor = "red"

From ee5204bbf33df14468b80c8e7111f09e3eff630e Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:16:16 -0500
Subject: [PATCH 17/21] Update Aside.css

---
 src/Aside.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Aside.css b/src/Aside.css
index 37d6b86..8feab8c 100644
--- a/src/Aside.css
+++ b/src/Aside.css
@@ -1,4 +1,4 @@
-/* declare class for aside section, set height, width, background color, and float it to the left edge of the viewport */
+/* declare class for aside section, set height, width, background color, and float it to the left edge of the viewport or preceding section */
 .Aside{
   height: 300px;
   width: 20%;

From 29b65d09a63cfccbdf6002e421bddf8755d2d4fd Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:16:48 -0500
Subject: [PATCH 18/21] Update SectionMain.css

---
 src/SectionMain.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/SectionMain.css b/src/SectionMain.css
index 34ea74b..026a04e 100644
--- a/src/SectionMain.css
+++ b/src/SectionMain.css
@@ -1,3 +1,4 @@
+/* declare class for main content section, set height, width, background color, and float it to the left edge of the viewport or preceding section */
 .SectionMain{
   height: 300px;
   width: 80%;

From b7a951b7444eae0bda514d6dd73ce026fc02b216 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:21:00 -0500
Subject: [PATCH 19/21] Update Aside.js

---
 src/Aside.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Aside.js b/src/Aside.js
index ad7855e..3923825 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react';
 // import Aside styling file from src
 import './Aside.css';
 
-// create class-based component
+// create class-based component for the aside section
 class Aside extends Component {
   // render method
   render() {
-    //    return rendered HTML of the footer
+    //    return rendered HTML of the aside section
     return (
       //   aside has class name so we can apply CSS styling to it, camelCase indicates JSX
         <aside className="Aside">

From 0abb6e6433c22e6645b7142ef7a1caf7a4c7a046 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:21:21 -0500
Subject: [PATCH 20/21] Update SectionMain.js

---
 src/SectionMain.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/SectionMain.js b/src/SectionMain.js
index cc07a5e..6e9b821 100644
--- a/src/SectionMain.js
+++ b/src/SectionMain.js
@@ -1,9 +1,15 @@
+// import react for this project
 import React, { Component } from 'react';
+// import SectionMain styling file from src
 import './SectionMain.css';
 
+// create class-based component for main section
 class SectionMain extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the main section
     return (
+      //   section has class name so we can apply CSS styling to it, camelCase indicates JSX
         <section className="SectionMain">
         </section>
 
@@ -11,4 +17,5 @@ class SectionMain extends Component {
   }
 }
 
+// export SectionMain so it can be imported to App (parent component)
 export default SectionMain;

From a64c98f0a7e7e06dd71d06c0970f9e86188b0278 Mon Sep 17 00:00:00 2001
From: JessieTMossa <76855680+JessieTMossa@users.noreply.github.com>
Date: Wed, 9 Jun 2021 18:25:40 -0500
Subject: [PATCH 21/21] Update index.css

---
 src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.css b/src/index.css
index b4cc725..79f339e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+/* declare style rule for body tag, set margin, padding, and base font-family */
 body {
   margin: 0;
   padding: 0;