diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css
index eba1d66..afcec77 100644
--- a/src/003-box-sizing/example/example.css
+++ b/src/003-box-sizing/example/example.css
@@ -3,3 +3,30 @@
  * Version: 1
  * By: xxx
  */
+
+.brd-box{
+    border: 5px solid #D24F2E;
+}
+
+.bx{
+    border: 5px solid #D24F2E;
+}
+
+.cnt-box{
+    box-sizing: content-box;
+    border: 5px solid #D24F2E;
+    max-width: calc(100% - 60px);
+    width: 1000px;
+}
+
+.container{
+    background-color: rgb(233,233,233);
+    padding: 5px 15px 15px 15px;
+    margin: 15px 15px;
+}
+
+
+.bx, .brd-box, .cnt-box{
+    margin: 15px;
+    padding: 15px;
+}
\ No newline at end of file
diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html
index 9c2f4a4..ede0722 100644
--- a/src/003-box-sizing/example/index.html
+++ b/src/003-box-sizing/example/index.html
@@ -35,26 +35,26 @@
 
       <div>
 
-        <div>
+        <div class="container">
           <h3> Box Model </h3>
-          <div>
+          <div class="bx">
             <p>Since the dawn of CSS, the box model has worked like this by default:</p>
             <p>width + padding + border = actual visible/rendered width of an element's box</p>
             <p>height + padding + border = actual visible/rendered height of an element's box</p>
           </div>
         </div>
 
-        <div>
+        <div class="container">
           <h3>Box Sizing : Content Box </h3>
-          <div>
+          <div class="cnt-box">
             <p>Default. The width and height properties (and min/max properties) includes only the content. Border,
               padding, or margin are not included</p>
           </div>
         </div>
 
-        <div class="bs-example">
+        <div class="bs-example container">
           <h3>Box Sizing : border-box </h3>
-          <div>
+          <div class="brd-box">
             <p>The width and height properties (and min/max properties) includes content, padding and border, but not
               the margin</p>
           </div>
diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css
index 08fc34e..dc97b94 100644
--- a/src/004-display/example/example.css
+++ b/src/004-display/example/example.css
@@ -3,3 +3,82 @@
  * Version: 1
  * By: xxx
  */
+.column {
+    display: inline-block;
+    width: 48%;
+    vertical-align: middle;
+}
+
+.division{
+    padding: 15px 10px
+}
+
+header{
+    padding-bottom: 2px;
+}
+
+header,
+.division{
+    background-color: rgb(232,232,232);
+}
+
+header h1{
+    padding-left: 10px;
+}
+
+.navigation {
+    background-color: rgb(220, 220, 220);
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.navigation ul{
+    list-style: none;
+}
+
+.navigation ul li{
+    display: inline;
+}
+
+
+.section{
+    background-color: rgb(232,232,232);
+    display: flex;
+    flex-wrap: wrap;
+    padding: 35px 50px 20px 15px;
+}
+
+.section div{
+    flex-grow: 1;
+    width: 30%;
+    min-width: 100px;
+}
+
+.section div{
+    border: 1px solid red;
+    display: inline-block;
+    height: 200px;
+    margin: 1px;
+   /* width: 300px;*/
+
+}
+
+#table{
+    display: table;
+    border-collapse: separate;
+    border-spacing: 1px;
+}
+
+#table .row{
+    display:table-row;
+}
+
+#table .row div{
+    background-color: rgb(200,200,200);
+    display: table-cell;
+    height: 50px;
+    width: 800px;
+    text-align: center;
+    padding-top: 30px;
+
+}
\ No newline at end of file
diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html
index 3db9b5e..9071d99 100644
--- a/src/004-display/example/index.html
+++ b/src/004-display/example/index.html
@@ -41,7 +41,7 @@ <h1>Lorem ipsum
           </h1>
         </header>
 
-        <div>
+        <div class="navigation">
           <ul>
             <li><a href="">Link 1</a></li>
             <li><a href="">Link 2</a></li>
@@ -50,38 +50,38 @@ <h1>Lorem ipsum
           </ul>
         </div>
 
-        <div>
-          <div>
+        <div class="division">
+          <div class="column">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
             ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
             nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
           </div>
-          <div>
+          <div class="column" style="margin-top:-20px;">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
           </div>
         </div>
 
-        <div>
-          <div>
+        <div id="table">
+          <div class="row">
             <div>Table Header</div>
             <div>Table Header</div>
             <div>Table Header</div>
           </div>
-          <div>
+          <div class="row">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
-          <div>
+          <div class="row">
             <div>Table Cell</div>
             <div>Table Cell</div>
             <div>Table Cell</div>
           </div>
         </div>
 
-        <div>
+        <div class="section">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css
index 4dba466..c31dfc3 100644
--- a/src/005-centering/example/example.css
+++ b/src/005-centering/example/example.css
@@ -3,3 +3,134 @@
  * Version: 1
  * By: xxx
  */
+
+.container{
+    background-color: rgb(232,232,232);
+    max-width: 1200px;
+    margin: auto;
+}
+
+.centered-text{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+.centered-box{
+    text-align: center;
+}
+
+.centered-box div{
+    background-color: rgb(211,211,211);
+    display: inline-block;
+    margin: 20px 5px;
+    max-width: 200px;
+    padding: 25px 25px;
+    text-align: left;
+}
+
+.centered-flexbox{
+    display:flex;
+    justify-content: center;
+}
+
+.centered-flexbox div{
+    background-color: rgb(211,211,211);
+    max-width: 200px;
+    margin: 5px 5px;
+    padding: 25px 25px;
+}
+
+
+.centered-line {
+    background-color: rgb(211,211,211);
+    display: inline-block;
+    height: 100px;
+    line-height: 100px;
+    margin-top: 20px;
+    padding-left:10px;
+    text-align: left;
+    vertical-align: middle;
+    width: 500px;
+}
+
+
+.centered-text,
+.center-within-parent,
+.flex-lines,
+.link-list,
+.vertically-center-within-parent,
+.vertical-line{
+    background-color: rgb(211, 211, 211);
+}
+
+
+.center-within-parent {
+    height: 200px;
+    margin-top: 20px;
+    position: relative;
+
+}
+
+.child,
+.child-vertically{
+    background-color: rgb(169,169,169);
+    color: rgb(255,255,255);
+}
+
+.child{
+    position: absolute;
+    top: 50%;
+    height: 100px;
+    margin-top: -50px;
+    width: 90%;
+    padding: 10px 10px;
+    margin-left: 20px;
+}
+
+.flex-lines{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.flex-lines p{
+    padding: 70px 20px;
+}
+
+.link-list{
+    text-align: center;
+}
+
+.link-list div{
+    display: inline-block;
+    margin: 10px;
+
+}
+
+.vertical-line{
+    margin-top: 30px;
+    margin-bottom: 30px;
+    height: 200px;
+    width: 200px;
+}
+
+.vertical-line p{
+    padding: 55px 20px 30px 10px;
+}
+
+.vertically-center-within-parent{
+    margin-top: 40px;
+    position:relative;
+    height: 200px;
+    padding-top: 30px;
+}
+
+.child-vertically{
+    left: 50%;
+    padding: 10px 10px;
+    position: absolute;
+    top: 52%;
+    transform: translate(-50%,-57%);
+    width: 95%;
+}
\ No newline at end of file
diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html
index b6d2e1e..3735ffb 100644
--- a/src/005-centering/example/index.html
+++ b/src/005-centering/example/index.html
@@ -30,13 +30,13 @@
     </div>
   </header>
   <main class="mdl-layout__content">
-    <div class="page-content">
+    <div class="page-content container">
       <!-- Practice Content Goes Here -->
       <div>
-        <h4>This text is centered.</h4>
+        <h4 class="centered-text">This text is centered.</h4>
 
         <div>
-          <div>
+          <div class="link-list">
             <div><a href="">Link 1</a></div>
             <div><a href="">Link 2</a></div>
             <div><a href="">Link 3</a></div>
@@ -44,7 +44,7 @@ <h4>This text is centered.</h4>
           </div>
         </div>
 
-        <div>
+        <div class="centered-box">
           <div>I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
             block-like with my siblings and we're centered in a row.
           </div>
@@ -54,7 +54,7 @@ <h4>This text is centered.</h4>
           <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
+        <div class="centered-flexbox">
           <div> I'm an element that is block-like with my siblings and we're centered in a row.</div>
           <div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
             than my siblings do.
@@ -62,15 +62,15 @@ <h4>This text is centered.</h4>
           <div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
         </div>
 
-        <div>
+        <div class="centered-line">
           I'm a centered line.
         </div>
 
-        <div>
+        <div class="vertical-line">
           <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
         </div>
 
-        <div>
+        <div class="flex-lines">
           <p>I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra
             vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci
             pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed.
@@ -83,12 +83,12 @@ <h4>This text is centered.</h4>
             elementum aliquam vitae.</p>
         </div>
 
-        <div>
-          <div>I'm a block-level element with a fixed height, centered vertically within my parent.</div>
+        <div class="center-within-parent">
+          <div class="child">I'm a block-level element with a fixed height, centered vertically within my parent.</div>
         </div>
 
-        <div>
-          <div>I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
+        <div class="vertically-center-within-parent">
+          <div class="child-vertically">I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
             element with an unknown height, centered vertically within my parent. I'm a block-level element with an
             unknown height, centered vertically within my parent.
           </div>
diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css
index bdfd29e..bb75699 100644
--- a/src/006-basic-layout/example/example.css
+++ b/src/006-basic-layout/example/example.css
@@ -3,3 +3,86 @@
  * Version: 1
  * By: xxx
  */
+
+#bottom-half, #top-half{
+    background-color: rgb(255,207,198);
+}
+
+#bottom-half{
+    display: flex;
+    flex-direction: column;
+}
+
+#footer-top-half{
+    clear:left;
+}
+
+#footer-bottom-half{
+    flex-direction: row;
+}
+
+#footer-bottom-half, #footer-top-half{
+    background-color: rgb(214,77,54);
+}
+
+#header-top-half, #header-bottom-half{
+    background-color: rgb(214,77,54);
+}
+
+#header-top-half ul, #footer-top-half ul, #header-bottom-half ul, #footer-bottom-half ul{
+    list-style: none;
+}
+
+#header-top-half ul li, #footer-top-half ul li, #header-bottom-half ul li, #footer-bottom-half ul li{
+    display: inline;
+    color: rgb(255,255,255);
+    padding-right: 30px;
+}
+
+#header-bottom-half{
+    flex-direction: row;
+}
+
+#main-top-half{
+    border-left: 300px solid rgb(135,208,211);
+    float: left;
+    padding: 10px 15px;
+}
+
+#main-bottom-half {
+    padding: 10px 15px;
+}
+
+.section-bottom{
+    display: inline-flex;
+    flex-direction: row;
+    align-items: stretch;
+
+}
+
+#sidebar-top-half{
+    float: left;
+    margin-right: -300px;
+    position: relative;
+    width: 300px;
+}
+
+#sidebar-bottom-half{
+    width: 300px
+}
+
+#sidebar-top-half, #sidebar-bottom-half{
+    background-color: rgb(135,208,211);
+}
+
+#top-half{
+    height: 50%;
+    margin: 30px auto;
+}
+
+
+#header-top-half,
+#footer-top-half {
+    overflow: hidden;
+    zoom: 1;
+}
diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html
index d21e25f..c1dcb0e 100644
--- a/src/006-basic-layout/example/index.html
+++ b/src/006-basic-layout/example/index.html
@@ -35,8 +35,8 @@
       <div class="container">
 
         <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
-        <div>
-          <div>
+        <div id="top-half">
+          <div id="header-top-half">
             <ul>
               <li>
                 <span> Home </span>
@@ -51,7 +51,7 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
           </div>
 
           <div>
-            <ul class="mdl-list">
+            <ul class="mdl-list" id="sidebar-top-half">
               <li class="mdl-list__item">
               <span class="mdl-list__item-primary-content">
                 <i class="material-icons mdl-list__item-icon">home</i>
@@ -73,7 +73,7 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
             </ul>
           </div>
 
-          <div class="main">
+          <div id="main-top-half">
             <p>Lorem ipsum...</p>
             <p>Lorem ipsum...</p>
             <p>Lorem ipsum...</p>
@@ -86,7 +86,7 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
             </div>
           </div>
 
-          <div>
+          <div id="footer-top-half">
             <ul>
               <li>
                 <span> Talos Digital </span>
@@ -100,8 +100,8 @@ <h3>1. Without a wrapper <code>div</code>, with border and negative margin</h3>
 
         <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
 
-        <div>
-          <div>
+        <div id="bottom-half">
+          <div id="header-bottom-half">
             <ul>
               <li>
                 <span> Home </span>
@@ -115,8 +115,8 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
             </ul>
           </div>
 
-          <div>
-            <div>
+          <div class="section-bottom">
+            <div id="sidebar-bottom-half">
               <ul class="mdl-list">
                 <li class="mdl-list__item">
                 <span class="mdl-list__item-primary-content">
@@ -139,7 +139,7 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
               </ul>
             </div>
 
-            <div>
+            <div id="main-bottom-half">
               <p>Lorem ipsum...</p>
               <p>Lorem ipsum...</p>
               <p>Lorem ipsum...</p>
@@ -153,7 +153,7 @@ <h3>2. Using flex, flex-direction, and wrapper <code>div</code></h3>
             </div>
           </div>
 
-          <div>
+          <div id="footer-bottom-half">
             <ul>
               <li>
                 <span> Talos Digital </span>
diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css
index 5b008b9..445aa22 100644
--- a/src/007-z-index/example/example.css
+++ b/src/007-z-index/example/example.css
@@ -3,3 +3,177 @@
  * Version: 1
  * By: xxx
  */
+
+ #background{
+    background-color: rgb(212,234,224);
+    height: 100%;
+    padding-bottom: 100px;
+}
+
+
+.blue-container{
+    background-color: rgb(120,196,207);
+    position: relative;
+    padding-right: 40%;
+    padding-bottom: 20px;
+    overflow: auto;
+    width: 55%;
+}
+
+
+.blue-container h1{
+    color: white;
+}
+
+.blue-container div{
+    padding-top: 20px;
+    padding-left: 30px;
+}
+
+.blue-container-content{
+    padding-left: 10px;
+}
+
+.blue-container-content p{
+    color: white;
+}
+
+.blue-container-child{
+    background-color: rgb(227,243,245);
+    padding: 20px 30px;
+    width: 95%;   
+}
+
+#main-container{
+    position:relative;
+}
+
+#container-right{
+    background-color: rgba(46, 78, 82, 0.6);
+    height:100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 30%;
+    z-index: 2;
+}
+
+.container-yellow{
+    background-color: rgb(223, 224, 148);
+    height: 95%;
+    padding:20px;
+    position: absolute;
+    right: 7%;
+    width: 25%;
+    top: 7%;
+    z-index: 2;
+    color: rgb(140, 140, 98);
+}
+
+.container-yellow h1{
+    font-size: 25px;
+    padding-left: 30px;
+    padding-right: 70px;
+}
+
+.container-yellow ul{
+    list-style: none;
+}
+
+
+hr{
+    border-color: red;
+    margin-left: 30px;
+    width: 90%;
+}
+
+#first::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(234, 38, 70);
+    top: 40%;
+    left: 16%;
+    transform:rotate(35deg);
+        
+}
+
+#second::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(234, 117, 59);
+    top: 45%;
+    left: 25%;
+    transform:rotate(35deg);
+    
+}
+
+#third::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(187, 230, 131);
+    top: 50%;
+    left: 34%;
+    transform:rotate(35deg);
+    
+}
+
+#fourth::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(85, 231, 199);
+    top: 55%;
+    left: 43%;
+    transform:rotate(35deg);
+    
+}
+
+#fifth::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(57, 124, 219);
+    top: 60%;
+    left: 44%;
+    transform:rotate(35deg);
+    
+}
+
+#sixth::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(234, 48, 197);
+    top: 63%;
+    left: 33%;
+    transform:rotate(35deg);
+    
+}
+
+#seventh::after{ 
+    content:'';
+    position:absolute;
+    display:block;
+    height: 100px;
+    width:100px;
+    background-color:rgb(215, 226, 230);
+    top: 64%;
+    left: 26%;
+    transform:rotate(35deg);
+    
+}
\ No newline at end of file
diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html
index c82d66a..d5989ec 100644
--- a/src/007-z-index/example/index.html
+++ b/src/007-z-index/example/index.html
@@ -29,17 +29,17 @@
       <div class="mdl-layout-spacer"></div>
     </div>
   </header>
-  <main class="mdl-layout__content">
-    <div class="page-content">
+  <main class="mdl-layout__content" id="background">
+    <div class="page-content" id="main-container">
       <!-- Practice Content Goes Here -->
       <div>
         <div>
-          <div>
+          <div class="blue-container">
             <div>
               <h1>Lorem ipsum dolor sit amet</h1>
             </div>
 
-            <div>
+            <div class="blue-container-content">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
                 scelerisque neque id velit varius, quis consequat mauris semper.</p>
               <hr>
@@ -47,7 +47,7 @@ <h1>Lorem ipsum dolor sit amet</h1>
                 scelerisque neque id velit varius, quis consequat mauris semper.</p>
             </div>
 
-            <div>
+            <div class="blue-container-child">
               <h2 class="title">Lorem ipsum dolor sit amet</h2>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
@@ -65,19 +65,18 @@ <h2 class="title">Lorem ipsum dolor sit amet</h2>
             </div>
           </div>
         </div>
-
-        <div></div>
-
-        <div>
+        <div id="container-right"></div>
+          
+        <div class="container-yellow">
           <h1 class="title-list">Lorem ipsum dolor sit amet</h1>
           <ul>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Lorem ipsum dolor sit amet</li>
+            <li id="first">Lorem ipsum dolor sit amet</li>
+            <li id="second">Lorem ipsum dolor sit amet</li>
+            <li id="third">Lorem ipsum dolor sit amet</li>
+            <li id="fourth">Lorem ipsum dolor sit amet</li>
+            <li id="fifth">Lorem ipsum dolor sit amet</li>
+            <li id="sixth">Lorem ipsum dolor sit amet</li>
+            <li id="seventh">Lorem ipsum dolor sit amet</li>
           </ul>