diff --git a/00-HTML-CSS-basics/CSS/index.html b/00-HTML-CSS-basics/CSS/index.html
new file mode 100644
index 000000000..784797217
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>CSS</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="normalize.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="container">
+  <header class="header"><code> &#60;Header&#62;</code></header>
+  <nav class="nav"><code> &#60;Nav&#62;</code></nav>
+  <section class="content"> <code> &#60;Section&#62;</code>
+    <header class="hsection"><code> &#60;Header&#62;</code></header>
+    <article class="asection"><code> &#60;Article&#62;</code></article>
+    <footer class="fsection"><code> &#60;Footer&#62;</code></footer>
+  </section>
+  <aside class="sidebar"><code> &#60;aside&#62;</code></aside>
+  <footer class="footer"><code> &#60;Footer&#62;</code></footer>
+</div>
+  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+  <script>
+    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+  </script>
+  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/CSS/layout.html b/00-HTML-CSS-basics/CSS/layout.html
new file mode 100644
index 000000000..417e0c855
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/layout.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Funciones</title>
+  <style>
+    body {
+      font-family: Arial;
+    }
+    .container {
+      display: grid;
+      /*grid-template-columns: 25% 200px 25%;*/
+      /*grid-template-rows: 300px 150px;*/
+      /*grid-template: filas / columnas ;*/
+      /*fr*/
+      /*grid-template: 300px 100px 100px / repeat(4, 1fr);*/
+      /*grid-template: 300px 100px 100px / repeat(4, minmax(200px, 1fr));*/
+      grid-template: 300px 100px 100px / minmax(200px, 1fr) 1fr 1fr 1fr;
+      grid-column-gap: 30px;
+      grid-row-gap: 50px;
+      /*grid-gap: filas columnas;*/
+      grid-gap: 10px;
+    }
+    .item {
+      background: lightblue;
+      padding: 10px;
+      border: 1px solid red;
+      /*margin-right: 10px;*/
+      /*margin-bottom: 10px;*/
+    }
+    .item:nth-of-type(4) {
+      background: blue;
+      overflow: auto;
+      /*display: subgrid;*/
+      /*display: inline-grid;*/
+      display: grid;
+      grid-template: 50px 50px / 15fr 85fr;
+    }
+    .item .item {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <section class="container">
+    <div class="item">zaraza #1</div>
+    <div class="item">contenido #2</div>
+    <div class="item">contenido #3</div>
+    <div class="item">
+      <div class="item">subitem #1</div>
+      <div class="item">subitem #2</div>
+      <div class="item">subitem #3</div>
+      <div class="item">subitem #4</div>
+      <div class="item">subitem #5</div>
+    </div>
+    <div class="item">contenido #5</div>
+    <div class="item">contenido #6</div>
+    <div class="item">contenido #7</div>
+    <div class="item">contenido #8</div>
+    <div class="item">contenido #9</div>
+    <div class="item">contenido #10</div>
+    <div class="item">contenido #11</div>
+    <div class="item">contenido #12</div>
+  </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/.empty b/00-HTML-CSS-basics/CSS/layoutStyle.css
similarity index 100%
rename from 00-HTML-CSS-basics/.empty
rename to 00-HTML-CSS-basics/CSS/layoutStyle.css
diff --git a/00-HTML-CSS-basics/CSS/normalize.css b/00-HTML-CSS-basics/CSS/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/CSS/showcase/index.html b/00-HTML-CSS-basics/CSS/showcase/index.html
new file mode 100644
index 000000000..bb52d8c40
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/showcase/index.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+    <title>Showcase layout</title>
+</head>
+<body>
+    <main class="container">
+        <header class="header">
+            <div class="header-div-left-1">
+                <p>Incredible Types</p>
+            </div>
+            <div class="header-div-right-1">
+                <p>Show menu</p> 
+            </div>
+            <div class="header-div-left-2">
+                <p>Showcase</p> 
+            </div>
+            <div class="header-div-right-2">
+                <p>Incredible Types is a curated collection and showcase of outstanding typography and design
+                     from around the world. We currently have 426 pieces of inspirational design in our showcase,
+                      from 432 creatives and studios from 51 different countries.
+                </p>
+                <p>Follow us on Twitter, Facebook and Pinterest or subscribe to our RSS Feed</p>
+                    
+            </div>
+        </header>
+        <section class="list-item">
+            <article class="article-1">
+                <a href="" class="media-hover">
+                    <figure>
+                        <img src="media/counter-press-business-cards-01-450x298.jpg" alt="business card" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                 torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                  dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+			    </span>
+            </article>
+            <article class="article-2">
+                <a href="" class="media-hover">
+                    <figure>
+                        <img src="media/the-hour-editorial-design-01-450x301.png" alt="the hour editorial design" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                     torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                      dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+            </article>
+            <article class="article-3">
+                <a href="" class="media-hover">
+                    <figure class="imgs">
+                        <img src="media/neus-ortiz-identity-01-450x318.jpg" alt="neus ortiz" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                         torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                          dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+            </article>
+            <article class="article-1">
+                <a href="" class="media-hover">
+                    <figure>
+                        <img src="media/pablo-and-rustys-brand-id-1-450x300.jpg" alt="rustys brand" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                             torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                              dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+            </article>
+            <article class="article-2">
+                <a href="" class="media-hover">
+                    <figure>
+                        <img src="media/candlefish-identity-01-450x299.jpg" alt="candle fish" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                                 torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                                  dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+            </article>
+            <article class="article-3">
+                <a href="" class="media-hover">
+                    <figure>
+                        <img src="media/try-angle-paper-1-01-450x300.jpg" alt="try angle paper" width="468" height="298">
+                    </figure>
+                    <span class="article-overlay">
+                        <p>
+                            <span class="hover-text">Lorem ipsum dolor sit amet consectetur adipiscing elit porttitor,
+                                                     torquent nisl egestas nascetur porta lectus pulvinar ornare, dis gravida fusce quis
+                                                      dapibus curabitur congue
+                            </span>
+                        </p>
+                    </span>
+                </a>
+            </article>
+        </section>
+        <section class="latest-posts"> 
+            <div class="post-left"> 
+                <h4>Latest posts</h4>
+                <p>The Counter Press Business Cards</p>
+                <p>The Hour</p>
+                <p>Neus Ortiz</p>
+                <p>Candlefish</p>
+                <p>Jupiter Ascending Screen Graphics</p>
+            </div>
+            <div class="post-center-1">
+                <p>Pablo &amp; Rusty’s</p>
+                <p>Absolute New York</p>
+                <p>try angle paper #01</p>
+                <p>Arko</p>
+                <p>Chicago</p>
+            </div>
+            <div class="post-center-2">
+                <p>Cult</p>
+                <p>Her</p>
+                <p>Geometric Love</p>
+                <p>Nike European Flagship Stores</p>
+                <p>Neue Luxury</p>
+            </div>
+            <div class="post-right">
+                <p>VPRO Gids — Dutch Design Week</p>
+                <p>Helsinki Design Week</p>
+                <p>VivaUs Poster Series</p>
+                <p>ThreePoint</p>
+                <p>Swedish Handicraft Societies</p> 
+            </div>
+        </section>
+        <footer class="footer">
+            <div class="footer-business-left">
+                <h4>Disclaimer</h4>
+                <p>Please respect the rights of contents creator(s). All images are copyright of the rights holder</p>
+            </div>
+            <div class="footer-business-center-1">
+               <h4>Contact us</h4> 
+               <p>To contact us or to make a submission please email 
+                    <a href="">info@incredibletypes.com</a>
+                </p>
+            </div>
+            <div class="footer-business-center-2">
+                <h4>Managed by</h4>
+                <p>
+                    Incredible Types is maintained and curated by
+                    <a href="">Nathan Leigh Davis</a>
+                </p>
+            </div>
+            <div class="footer-business-right">
+               <h4>Follow</h4> 
+               <p>
+                    Follow us on 
+                   <a href="">Twitter</a>,
+                   <a href="">Facebook</a> and
+                   <a href="">Pinteres</a> or subcribe to our
+                   <a href=""></a>"RSS Feed"
+               </p>
+            </div>
+            
+        </footer>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/candlefish-identity-01-450x299.jpg b/00-HTML-CSS-basics/CSS/showcase/media/candlefish-identity-01-450x299.jpg
new file mode 100644
index 000000000..dd3aab1f2
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/candlefish-identity-01-450x299.jpg differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/counter-press-business-cards-01-450x298.jpg b/00-HTML-CSS-basics/CSS/showcase/media/counter-press-business-cards-01-450x298.jpg
new file mode 100644
index 000000000..8b6c02dc1
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/counter-press-business-cards-01-450x298.jpg differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/neus-ortiz-identity-01-450x318.jpg b/00-HTML-CSS-basics/CSS/showcase/media/neus-ortiz-identity-01-450x318.jpg
new file mode 100644
index 000000000..9c149a217
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/neus-ortiz-identity-01-450x318.jpg differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/pablo-and-rustys-brand-id-1-450x300.jpg b/00-HTML-CSS-basics/CSS/showcase/media/pablo-and-rustys-brand-id-1-450x300.jpg
new file mode 100644
index 000000000..6deff66ef
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/pablo-and-rustys-brand-id-1-450x300.jpg differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/the-hour-editorial-design-01-450x301.png b/00-HTML-CSS-basics/CSS/showcase/media/the-hour-editorial-design-01-450x301.png
new file mode 100644
index 000000000..523f20dc9
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/the-hour-editorial-design-01-450x301.png differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/media/try-angle-paper-1-01-450x300.jpg b/00-HTML-CSS-basics/CSS/showcase/media/try-angle-paper-1-01-450x300.jpg
new file mode 100644
index 000000000..ada758182
Binary files /dev/null and b/00-HTML-CSS-basics/CSS/showcase/media/try-angle-paper-1-01-450x300.jpg differ
diff --git a/00-HTML-CSS-basics/CSS/showcase/normalize.css b/00-HTML-CSS-basics/CSS/showcase/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/showcase/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/CSS/showcase/style.css b/00-HTML-CSS-basics/CSS/showcase/style.css
new file mode 100644
index 000000000..4bfeba841
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/showcase/style.css
@@ -0,0 +1,195 @@
+body {
+    font-family: arial;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: minmax(auto, 90%);
+    grid-column-gap: 5px;
+    justify-content: center;
+    height: 100vh;
+}
+
+.header {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows:  repeat(2, 1fr);
+    grid-gap: 2px;
+
+}
+
+.header-div-left-1 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    margin: 10px 10px;
+    line-height: 1.5em;
+    padding: 20px;
+    font-size: 1.2em;
+}
+.header-div-left-2 {
+    grid-row-start: 2;
+    grid-row-end: 4;
+    margin-left: 30px;
+    
+}
+
+.header-div-right-1 {
+    grid-column-start: 3;
+    grid-column-end: 6;
+    padding: 35px;
+    
+}
+
+.header-div-right-2 {
+    grid-column-start: 3;
+    grid-column-end: 6;
+    grid-row-start: 2;
+    padding-left: 35px;
+    padding-bottom: 60px;
+    
+    
+}
+
+
+.list-item {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows:  repeat(2, 1fr);
+    grid-gap: 10px;
+}
+
+section article figure {
+    margin: 0;
+}
+
+.article-overlay {
+    background: rgba(0,0,0, .4);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	display: none;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	text-align: center;
+}
+
+.media-hover {
+    cursor: pointer;
+    position: relative;
+    display: block;
+}
+
+.article-overlay {
+    background: rgba(0,0,0, .4);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-align: center;
+
+  }
+
+  .media-hover:hover .article-overlay {
+    display: flex;
+  }
+.article-1 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+.article-2 {
+    grid-column-start: 3;
+    grid-column-end: 5;
+}
+
+.article-3 {
+    grid-column-start: 5;
+    grid-column-end: 7;
+}
+
+.latest-posts {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-gap: 10px;
+}
+
+.post-left {
+    grid-column-start: 3;
+    grid-column-end: 4;
+}
+
+.post-left, .post-center-1, .post-center-2, .post-right {
+    font-size: 10px;
+}
+
+.post-left {
+    margin-top: 50px;
+}
+
+.post-center-1, .post-center-2, .post-right
+{
+    margin-top:75px;
+}
+
+.footer {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows:  1fr 1fr 0.5fr;
+    grid-gap: 10px;
+}
+
+.footer-business-left {
+    grid-column-start: 3;
+    grid-column-end: 4;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+.footer-business-center-1 {
+    grid-column-start: 4;
+    grid-column-end: 5;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+.footer-business-center-2 {
+    grid-column-start: 5;
+    grid-column-end: 6;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+.footer-business-right {
+    grid-column-start: 6;
+    grid-column-end: 7;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+footer a {
+    color: #888888;
+    text-decoration: none;
+
+}
+.footer-business-left, .footer-business-center-1, .footer-business-center-2, .footer-business-right {
+    font-size: 10px;
+    color: #888888;
+}
+
+@media screen and (max-width: 300px) {
+    .header {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    .list-item {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-gap: 5px;
+    }
+    .footer {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+}
+
diff --git a/00-HTML-CSS-basics/CSS/style.css b/00-HTML-CSS-basics/CSS/style.css
new file mode 100644
index 000000000..551503eb0
--- /dev/null
+++ b/00-HTML-CSS-basics/CSS/style.css
@@ -0,0 +1,125 @@
+* {
+  color: white;
+}
+
+body {
+	
+}
+
+.container {
+	width: 800px;
+	height: 510px;
+	background: #333333;
+	margin: auto;
+	margin-top: 10px;
+	border-radius: 6px;
+	border: 10px solid transparent;
+}
+
+.header {
+	text-align: center;
+	font-size: 46px;
+	background: #666666;
+	border-radius: 6px;
+	display: block;
+	padding: 20px;
+}
+
+.nav {
+	text-align: center;
+	font-size: 12px;
+	background: #666666;
+	border-radius: 6px;
+	float: left;
+	height: 340px;
+	width: 150px;
+	margin-top: 15px;
+	text-align: center;
+	padding-top: 10px;
+}
+
+.content {
+	text-align: center;
+	font-size: 14px;
+	background: #666666;
+	border-radius: 6px;	
+	display: inline-block;
+	margin-top: 15px;
+	margin-left: 15px;
+	height: 340px;
+	width: 470px;
+	padding-top: 10px;
+}
+
+.content .hsection {
+	background: #999999;
+	border-radius: 6px;
+	text-align: center;	
+	padding: 10px;
+	margin: 10px;
+}
+
+.content .asection {
+	background: #999999;
+	border-radius: 6px;
+	text-align: center;	
+	margin: 10px;
+	padding: 83px;
+}
+
+.content .fsection {
+	background: #999999;
+	border-radius: 6px;
+	text-align: center;	
+	padding: 10px;
+	margin: 10px;
+}
+
+.sidebar {
+	text-align: center;
+	font-size: 10px;
+	background: #666666;
+	border-radius: 6px;
+	float: right;
+	height: 340px;
+	width: 150px;
+	margin-top: 15px;
+	text-align: center;
+	padding-top: 10px;
+}
+
+.footer {
+	clear: both;
+	text-align: center;
+	font-size: 10px;
+	background: #666666;
+	border-radius: 6px;
+	display: block;
+	margin-top: 15px;
+	padding: 12px;
+}
+
+
+/*
+If the class attribute finishes with r (example header, footer), the background must be magenta.
+If the class attribute contains an a (example nav) but do NOT finish with r, the background must be blue.
+[class$='r']{
+	background-color: #FF00FF !important;
+}
+
+[class*='a']{
+	background-color: #0000FF;
+}
+
+*/
+
+/* example with inline vs !important
+
+
+Imagine there is a declaration like class=”oh-no-inline-styles” style=”background:red” 
+and you need to change the background
+ to green without changing the inline style. How could you accomplish this?
+ 
+footer.footer[style] {
+	background: yellow !important;
+}*/
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/HTML/form.html b/00-HTML-CSS-basics/HTML/form.html
new file mode 100644
index 000000000..88462fa8d
--- /dev/null
+++ b/00-HTML-CSS-basics/HTML/form.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title> Exercise V </title>
+</head>
+<body>
+	<header> 
+		<h1> Contact Form </h1>
+	</header>
+	<div role="main" id="main-content">
+		<form id="cform">
+  		<fieldset>
+  			<legend>Personal Information</legend>
+	  		<label for="fname">First name:</label>
+	  		<input type="text" id="fname" name="fname" placeholder="your first name" required>
+	  		<label for="lname">Last name:</label>
+	  		<input type="text" id="lname" name="lname" placeholder="your last name" required>
+	  		<label for="email">Email:</label>
+	  		<input type="Email" id="email" name="email" placeholder="example@example.com" required>
+	  		<label for="bday">Birthday:</label>
+	  		<input type="date" id="bday" name="bday" min="1900-01-01" max="2018-06-22" required>
+	  		<label for="fsport">Favourite Sport</label>
+	  		<select form="cform" id="fsport" name="fsport">
+				  <option value="football" selected>football</option>
+				  <option value="tennis">tennis</option>
+				  <option value="basketball">basketball</option>
+				  <option value="baseball">baseball</option>
+				</select><br>
+				<label for="bio">Bio:</label><br>
+				<textarea form="cform" id="bio" name="bio" rows="4" cols="50" placeholder="about you" required>
+				</textarea><br>
+	  		<input type="reset" value="Reset">
+	  		<input type="submit" value="Submit">
+  		</fieldset>
+		</form>
+	</div>
+</body>
+</html>
diff --git a/00-HTML-CSS-basics/HTML/img/developer.png b/00-HTML-CSS-basics/HTML/img/developer.png
new file mode 100644
index 000000000..50f533331
Binary files /dev/null and b/00-HTML-CSS-basics/HTML/img/developer.png differ
diff --git a/00-HTML-CSS-basics/HTML/index.html b/00-HTML-CSS-basics/HTML/index.html
new file mode 100644
index 000000000..02d3741e2
--- /dev/null
+++ b/00-HTML-CSS-basics/HTML/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title> Exercise I </title>
+</head>
+<body>
+	<header> 
+		<h1><!--"Hello World"--> "My to do list" </h1>
+	</header>
+	<div>
+		<ul>
+			<li> Make breakfast </li>
+			<li> Clean the house </li>
+			<li> Go to market </li>
+			<li> Prepare the class </li>
+			<li> Go to gym </li>
+		</ul>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/HTML/media.html b/00-HTML-CSS-basics/HTML/media.html
new file mode 100644
index 000000000..601f117de
--- /dev/null
+++ b/00-HTML-CSS-basics/HTML/media.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title> Exercise IV </title>
+</head>
+<body>
+	<header> 
+		<h1> Multimedia Content </h1>
+	</header>
+	<div>
+		<h2> Image </h2>
+		<img src="img/developer.png" alt="developer working" height="300" width="300">
+		<h1> Video </h1>
+		<video width="320" height="240" controls>
+		  <source src="video/views.mp4" type="video/mp4">
+		</video>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/HTML/tableOfExpenses.html b/00-HTML-CSS-basics/HTML/tableOfExpenses.html
new file mode 100644
index 000000000..bd5df091c
--- /dev/null
+++ b/00-HTML-CSS-basics/HTML/tableOfExpenses.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title> Exercise II </title>
+</head>
+<body>
+	<header> 
+		<h1> Table of expenses </h1>
+	</header>
+	<div>
+		<table>
+			<thead>
+				<tr>
+					<th> Description </th>
+					<th> Price </th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td> Internet </td>
+					<td> $1300 </td>
+				</tr>
+				<tr>
+					<td> Food </td>
+					<td> $3000 </td>
+				</tr>
+				<tr>
+					<td> Rental </td>
+					<td> $7000 </td>
+				</tr>
+				<tr>
+				  <td> Gym </td>
+					<td> $700 </td>
+				</tr>
+				<tr>
+				  <td> Fuel </td>
+					<td> $2000 </td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/HTML/video/views.mp4 b/00-HTML-CSS-basics/HTML/video/views.mp4
new file mode 100644
index 000000000..6ea5838ec
Binary files /dev/null and b/00-HTML-CSS-basics/HTML/video/views.mp4 differ
diff --git a/01-JS-DOM-APIs/.empty b/01-JS-DOM-APIs/.empty
deleted file mode 100644
index e69de29bb..000000000
diff --git a/01-JS-DOM-APIs/[1-6]/hideShowSection.html b/01-JS-DOM-APIs/[1-6]/hideShowSection.html
new file mode 100644
index 000000000..49687ef01
--- /dev/null
+++ b/01-JS-DOM-APIs/[1-6]/hideShowSection.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 1</title>
+</head>
+<body onload="showContent()">
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            Hello world!
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+    <script>
+        function showContent()
+        {
+            const section = document.getElementById("section");
+            section.style.visibility = "visible";
+            document.getElementById("section").style.opacity=1;
+            document.getElementById('section').style.WebkitTransition = 'opacity 3s';
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[1-6]/index.html b/01-JS-DOM-APIs/[1-6]/index.html
new file mode 100644
index 000000000..5b1637a03
--- /dev/null
+++ b/01-JS-DOM-APIs/[1-6]/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 1</title>
+</head>
+<body onload="showContent()">
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            Hello world!
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[1-6]/jokeApi.html b/01-JS-DOM-APIs/[1-6]/jokeApi.html
new file mode 100644
index 000000000..ece18d165
--- /dev/null
+++ b/01-JS-DOM-APIs/[1-6]/jokeApi.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 1</title>
+</head>
+<body>
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            <p id="hello" >Hello world!</p> 
+            <input type="button" onclick="getResponse()" value="Get">
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+    <script>
+        function getResponse(){
+
+            const element = document.getElementById("hello");
+            const req = new XMLHttpRequest();
+            req.open("GET", "http://api.icndb.com/jokes/random" ,0);
+            req.send(null);
+            if (req.status == 200){
+                let objeto = JSON.parse(req.responseText);
+                element.innerHTML = formatData(objeto);
+            }
+        }
+
+        //string
+        function formatData(object)
+        {
+            let finalText ="";
+            finalText += object.value.id + " " + object.value.joke;
+            return finalText;
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[1-6]/normalize.css b/01-JS-DOM-APIs/[1-6]/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/01-JS-DOM-APIs/[1-6]/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[1-6]/style.css b/01-JS-DOM-APIs/[1-6]/style.css
new file mode 100644
index 000000000..275513160
--- /dev/null
+++ b/01-JS-DOM-APIs/[1-6]/style.css
@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+   text-align: center;
+}
+
+.header {
+    margin: 10px;
+}
+
+.nav {
+    margin: 10px;
+}
+.section {
+    /*visibility: hidden;*/
+    margin: 10px;
+    /*opacity: 0.1;*/
+}
+
+.footer {
+    margin: 10px;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[10]/index.html b/01-JS-DOM-APIs/[10]/index.html
new file mode 100644
index 000000000..b1bff4a71
--- /dev/null
+++ b/01-JS-DOM-APIs/[10]/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 10</title>
+</head>
+<body>
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            <p id="hello" >Hello world!</p> 
+            <input type="text" name="" id="serchText" placeholder="e.x javascript">
+            <input type="button" onclick="makeUrl(config)" value="Buscar Repos">
+            <li id="list">
+                
+            </li>
+            
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+    <script>
+    
+        let config  = {
+                url:'',
+                method: 'GET',
+                mode: 'cors',
+                redirect: 'follow',
+                headers: new Headers({
+                    'Content-Type': 'application/json'
+                })
+        };
+
+
+        function makeUrl(config)
+        {
+            let urls = 'https://api.github.com/search/repositories?q='
+            let buscar = document.getElementById('serchText').value;
+            let finish = urls + buscar;
+            config.url = finish;
+            getAjaxGit(config);         
+        }
+
+        function getAjaxGit(config)
+        {
+            let ul = document.getElementById("list");
+            let li = document.createElement("li");
+            
+            fetch(config.url)
+                .then(response => response.json())
+                .then((json) => {
+                    let items = json.items;
+                    let contentUl = document.getElementById('list');
+                    if(items)
+                    {
+                        for(let {full_name, html_url} of items) {
+                            let newLi = document.createElement("li");
+                            let newLink = document.createElement("a");
+                            newLink.href = html_url;
+                            newLink.title = full_name;
+                            newLink.innerHTML = full_name;
+                            newLi.appendChild(newLink);
+
+                            contentUl.appendChild(newLi);
+                        };
+                    }
+                    else{
+                        contentUl.innerHTML = "no match";
+                    }
+                })
+                .catch(error => {
+                    section.innerHTML = error;
+                    section.style.background = "red";   
+                });
+        }
+    </script>
+</body>
+</html>
+
+
+
+      
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[10]/normalize.css b/01-JS-DOM-APIs/[10]/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/01-JS-DOM-APIs/[10]/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[10]/style.css b/01-JS-DOM-APIs/[10]/style.css
new file mode 100644
index 000000000..275513160
--- /dev/null
+++ b/01-JS-DOM-APIs/[10]/style.css
@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+   text-align: center;
+}
+
+.header {
+    margin: 10px;
+}
+
+.nav {
+    margin: 10px;
+}
+.section {
+    /*visibility: hidden;*/
+    margin: 10px;
+    /*opacity: 0.1;*/
+}
+
+.footer {
+    margin: 10px;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[12]/index.html b/01-JS-DOM-APIs/[12]/index.html
new file mode 100644
index 000000000..89527ef65
--- /dev/null
+++ b/01-JS-DOM-APIs/[12]/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 12</title>
+</head>
+<body>
+    <div class="container">
+        <header id="header" class="header">
+            Header
+        </header>
+        <nav id="nav" class="nav">
+            Nav 
+        </nav>
+        <section id="section" class="section">
+            <input type="button" onclick="printMatrix()" value="New table">
+        </section>
+        <footer id="footer" class="footer">
+            footer
+        </footer>
+    </div> 
+
+    <script>
+        
+        // bibliography: https://developer.mozilla.org/es/docs/Web/API/Document/createElement
+
+        function newMatrix(matrix)
+        {
+            let table = document.createElement("table");
+            let tblBody = document.createElement("tbody");
+            
+            for (let i = 0; i < matrix.length; i++) {
+                let rows = document.createElement("tr");
+                
+                for (let j = 0; j < matrix[i].length; j++) {
+                    let cell = document.createElement("td");
+                    let cellText = document.createTextNode(matrix[i][j]);
+                    cell.appendChild(cellText);
+                    rows.appendChild(cell);
+                }
+                
+                tblBody.appendChild(rows);
+            }
+            
+            table.appendChild(tblBody);
+            table.setAttribute("border", "2");
+            
+            return table;
+        } 
+        
+        // It's a small test for the function. newMatrix() works for any size.
+
+        function printMatrix()
+        {
+            let i = 0;
+            let j = 0;
+            let matrix = [];
+            matrix[0] = [];
+            matrix[1] = [];
+            matrix[0][0] = 0;
+            matrix[0][1] = 1;
+            matrix[1][0] = 2;
+            matrix[1][1] = 3;
+
+            const table = newMatrix(matrix);
+            document.body.appendChild(table);
+        }
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[12]/normalize.css b/01-JS-DOM-APIs/[12]/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/01-JS-DOM-APIs/[12]/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[12]/style.css b/01-JS-DOM-APIs/[12]/style.css
new file mode 100644
index 000000000..b0d55d745
--- /dev/null
+++ b/01-JS-DOM-APIs/[12]/style.css
@@ -0,0 +1,27 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+   text-align: center;
+}
+
+.header {
+    margin: 10px;
+}
+
+.nav {
+    margin: 10px;
+}
+.section {
+    margin: 10px;
+}
+
+.footer {
+    margin: 10px;
+}
+
+table {
+    text-align:center;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[7-8]/normalize.css b/01-JS-DOM-APIs/[7-8]/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/01-JS-DOM-APIs/[7-8]/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[7-8]/promise.html b/01-JS-DOM-APIs/[7-8]/promise.html
new file mode 100644
index 000000000..8e25814a8
--- /dev/null
+++ b/01-JS-DOM-APIs/[7-8]/promise.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 7</title>
+</head>
+<body>
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            <p id="hello" >Hello world!</p> 
+            <input type="button" onclick="getAjax(config)" value="Joke">
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+    <script>
+    
+
+        let config  = {
+            url: 'http://api.icndb.com/jokes/random',
+            method: 'GET',
+            mode: 'cors',
+            redirect: 'follow',
+            headers: new Headers({
+                'Content-Type': 'application/json'
+                })
+            };
+
+        function getAjax(config)
+        {
+            let section = document.getElementById('hello');
+
+            fetch(config.url)
+                .then(response => response.json())
+                .then(json => section.innerHTML = json.value.joke)
+                .catch(error => {
+                    section.innerHTML = error;
+                    section.style.background = "red";
+                });
+
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[7-8]/style.css b/01-JS-DOM-APIs/[7-8]/style.css
new file mode 100644
index 000000000..275513160
--- /dev/null
+++ b/01-JS-DOM-APIs/[7-8]/style.css
@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+   text-align: center;
+}
+
+.header {
+    margin: 10px;
+}
+
+.nav {
+    margin: 10px;
+}
+.section {
+    /*visibility: hidden;*/
+    margin: 10px;
+    /*opacity: 0.1;*/
+}
+
+.footer {
+    margin: 10px;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[9]/index.html b/01-JS-DOM-APIs/[9]/index.html
new file mode 100644
index 000000000..a4fc6239e
--- /dev/null
+++ b/01-JS-DOM-APIs/[9]/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Javascript exercise 9</title>
+</head>
+<body>
+    <div class="container">
+        <header id="header" class="header">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, culpa.
+        </header>
+        <nav id="nav" class="nav">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        </nav>
+        <section id="section" class="section">
+            <p id="hello" >Hello world!</p> 
+            <input type="button" onclick="getAjaxGit(config)" value="Repos">
+            <li id="list">
+                
+            </li>
+            
+        </section>
+        <footer id="footer" class="footer">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, similique!
+        </footer>
+    </div> 
+    <script>
+    
+
+        let config  = {
+            url: 'https://api.github.com/search/repositories?q=javascript',
+            method: 'GET',
+            mode: 'cors',
+            redirect: 'follow',
+            headers: new Headers({
+                'Content-Type': 'application/json'
+                })
+            };
+
+        function getAjaxGit(config)
+        {
+            let ul = document.getElementById("list");
+            let li = document.createElement("li");
+
+            fetch(config.url)
+                .then(response => response.json())
+                .then((json) => {
+                    let items = json.items;
+                    console.log(items);
+                    let contentUl = document.getElementById('list');
+                    
+                    for(let {full_name, html_url} of items) {
+                        let newLi = document.createElement("li");
+                        let newLink = document.createElement("a");
+                        newLink.href = html_url;
+                        newLink.title = full_name;
+                        newLink.innerHTML = full_name;
+                        newLi.appendChild(newLink);
+
+                        contentUl.appendChild(newLi);
+                    };
+                })
+                .catch(error => {
+                    section.innerHTML = error;
+                    section.style.background = "red";   
+                });
+
+                //list.innerHTML = json.items[0].full_name
+
+        }
+    </script>
+</body>
+</html>
+
+
+
+      
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[9]/normalize.css b/01-JS-DOM-APIs/[9]/normalize.css
new file mode 100644
index 000000000..3d6624cd1
--- /dev/null
+++ b/01-JS-DOM-APIs/[9]/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/[9]/style.css b/01-JS-DOM-APIs/[9]/style.css
new file mode 100644
index 000000000..275513160
--- /dev/null
+++ b/01-JS-DOM-APIs/[9]/style.css
@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+   text-align: center;
+}
+
+.header {
+    margin: 10px;
+}
+
+.nav {
+    margin: 10px;
+}
+.section {
+    /*visibility: hidden;*/
+    margin: 10px;
+    /*opacity: 0.1;*/
+}
+
+.footer {
+    margin: 10px;
+}
\ No newline at end of file
