talosdigital · ChechoPerezH · Sep 29, 2017 · Oct 6, 2017 · Oct 13, 2017 · Oct 20, 2017
diff --git a/src/004-display/example/css/example.css b/src/004-display/example/css/example.css
@@ -0,0 +1,101 @@
+/* General styles */
+* {
+	box-sizing: border-box;
+}
+html,
+body {
+	color: #787878;
+	font-size: 16px;
+	line-height: 22px;
+}
+
+h1 {
+	font-size: 2.1em;
+	margin: 25px 0px 15px 20px;	
+}
+
+h2 {
+	font-size: 1.8em;
+	font-weight: bold;
+	margin: 5px 0px 15px 0px;
+}
+
+p {
+  line-height: 1.3;
+}
+
+a {
+  text-decoration: none;
+}
+
+.main {
+	background-color: #e8e8e8;
+	margin: 0 20px;
+}
+
+.inline-b {
+	display: inline-block;
+}
+
+/* small text Styles */
+.small {
+	color: #b3b3b3;
+	font-size: 0.7em;
+}
+
+/* horizontal nav menu styles */
+nav {
+	background-color:	#dcdcdc;
+	padding: 15px 15px 15px 20px;
+}
+
+nav li {
+	display: inline;
+	padding-right: 20px;
+	font-size: 1.1em;
+}
+
+/* 2col styles */
+.two-col article {
+	display: table-cell;
+	padding: 20px;
+	vertical-align: middle;
+	width: 50%;
+}
+
+/* table styles */
+.table {
+	display: table;
+	width: 100%
+}
+
+.table-row {
+	display: table-row;
+}
+
+.table-cell {
+	background-color: #c8c8c8; 
+	border: 1px solid #f2f2f2;
+	display: table-cell;
+	padding: 20px 10px;
+	text-align: center;
+	width: 33.33%;
+}
+
+.t-header {
+	font-weight: bold;
+}
+
+/* boxes gallery Styles */
+.gallery-bx {
+	padding: 20px
+}
+
+.gallery-bx .box{
+	border: 3px solid #73ad21;
+	display: inline-block;
+	margin: 0 10px 20px 0;
+	padding: 20px;
+  text-align: center;
+  width: 160px;
+}
diff --git a/src/004-display/example/css/reset.css b/src/004-display/example/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html
@@ -13,7 +13,9 @@
 
     <!-- Import App Css file -->
     <link href="./example.css" rel="stylesheet" type="text/css">
-
+    <!-- Practice css -->
+    <link href="css/reset.css" rel="stylesheet">
+    <link href="css/example.css" rel="stylesheet">
   </head>
   <body>
   	<!-- Always shows a header, even in smaller screens. -->
@@ -32,6 +34,60 @@
       <main class="mdl-layout__content">
         <div class="page-content">
          <!-- Practice Content Goes Here -->
+          <section class="main">
+            <!-- Header with small comment next to it -->
+            <h1 class="inline-b">Lorem ipsum <span class="small"> small text </span> </h1> 
+            <!-- horizontal nav menu -->
+            <nav>
+              <ul>
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+                <li><a href="#">Link 4</a></li>                
+              </ul>
+            </nav>
+            <!-- two columns -->
+            <div class="two-col">
+              <article>
+                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.	
+              </article>
+              <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</article>
+            </div>
+            <!-- table without '<table>' -->
+            <div class="table">
+              <div class="table-row">
+                <div class="table-cell t-header">Table Header</div>
+                <div class="table-cell t-header">Table Header</div>
+                <div class="table-cell t-header">Table Header</div>
+              </div>
+              <div class="table-row">
+                <div class="table-cell">Table cell</div>
+                <div class="table-cell">Table cell</div>
+                <div class="table-cell">Table cell</div>
+              </div>
+              <div class="table-row">
+                <div class="table-cell">Table cell</div>
+                <div class="table-cell">Table cell</div>
+                <div class="table-cell">Table cell</div>
+              </div>
+            </div>
+            <!-- boxes gallery -->
+            <article class="gallery-bx">
+              <div class="box">Box 1</div>
+              <div class="box">Box 2</div>
+              <div class="box">Box 3</div>
+              <div class="box">Box 4</div>
+              <div class="box">Box 5</div>
+              <div class="box">Box 6</div>
+              <div class="box">Box 7</div>
+              <div class="box">Box 8</div>
+              <div class="box">Box 9</div>
+              <div class="box">Box 10</div>
+            </article>
+          </section>
         </div>
       </main>
     </div>

diff --git a/src/005-centering/example/css/example.css b/src/005-centering/example/css/example.css
@@ -0,0 +1,174 @@
+/* General styles */
+* {
+	box-sizing: border-box;
+}
+html,
+body {
+	color: #787878;
+	font-size: 16px;
+	line-height: 22px;
+}
+
+h1 {
+	font-size: 2.1em;
+	margin: 25px 0px 15px 20px;	
+}
+
+h2 {
+	font-size: 1.8em;
+	font-weight: bold;
+	margin: 5px 0px 15px 0px;
+}
+
+p {
+  line-height: 1.3;
+}
+
+a {
+  text-decoration: none;
+}
+
+div {
+	margin-bottom: 20px;
+}
+
+.main {
+	background-color: #e8e8e8;
+	margin: auto;
+	max-width: 1200px;
+	padding: 20px;
+}
+
+/* center text Styles */
+.center-h {
+	text-align: center;
+}
+
+.center-h p {
+	background-color: #d2d2d2;
+	padding: 10px;
+}
+
+/* bar nav Styles */
+nav {
+	background-color: #d2d2d2;
+	margin-bottom: 20px;
+	padding: 10px;
+	text-align: center;
+}
+
+nav li {
+	display: inline;
+	margin-right: 15px;
+}
+
+/* block elements centered Styles */
+.block-center {
+	text-align: center;
+}
+
+.block {
+	background-color: #d2d2d2;	
+	margin-right: 5px;
+	padding: 30px;
+	width: 280px;
+}
+
+.block-center p {
+	display: inline-block;
+}
+
+/* Centered with flexbox Styles */
+.flex-center {
+	display: flex;
+	justify-content: center;
+
+}
+
+/* Centered text block Styles */
+.center-v {
+	background-color: #d2d2d2;		
+	height: 100px;
+	line-height: 100px;
+	padding: 20px;
+	width: 500px;
+	white-space: nowrap;
+	box-sizing: content-box;
+}
+
+/* centered 'table' Styles */
+.center-table {
+  background-color: #d2d2d2;
+  display: table;
+  height: 250px;
+  width: 240px;
+}
+
+.center-table p {
+  display: table-cell;
+  margin: 0;
+  padding: 20px;
+  vertical-align: middle;
+}
+
+/*Center with flexbox Styles */
+.center-flex {
+  background-color: #d2d2d2;
+	display: flex;
+	flex-direction: column;
+	height: 400px;
+	justify-content: center;
+	overflow: auto;
+}
+
+.center-flex p{
+  padding: 20px;
+}
+
+/* 
+ *  center block within parent Styles 
+ */
+
+ /* with fixed height */
+.block-fixed-h {
+  background-color: #d2d2d2;
+  height: 300px;
+  position: relative;
+  resize: vertical;
+  overflow: auto;
+}
+
+.block-fixed-h p {
+	background-color: #a8a8a8;
+	color: #fff;
+	height: 100px;
+	left: 25px;
+	margin-top: -50px;
+	padding: 25px;
+	position: absolute;
+	right: 25px;
+	top: 50%;
+}
+
+/* With unknown height */
+.block-unknown-h {
+  background-color: #d2d2d2;
+  height: 300px;
+  overflow: auto;
+  position: relative;
+  resize: vertical;
+}
+
+.block-unknown-h p {
+	background-color: #a8a8a8;
+	color: #fff;
+	left: 25px;
+	min-height: 100px;
+  overflow: auto;
+	padding: 25px;
+	position: absolute;
+	resize: vertical;
+	right: 25px;
+	top: 50%;
+	transform: translateY(-50%);
+}