diff --git a/00-HTML-CSS-basics/.empty b/00-HTML-CSS-basics/.empty
deleted file mode 100644
index e69de29bb..000000000
diff --git a/00-HTML-CSS-basics/css/normalize.css b/00-HTML-CSS-basics/css/normalize.css
new file mode 100644
index 000000000..6e51e579a
--- /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/style.css b/00-HTML-CSS-basics/css/style.css
new file mode 100644
index 000000000..74805f93c
--- /dev/null
+++ b/00-HTML-CSS-basics/css/style.css
@@ -0,0 +1,343 @@
+.header {
+  font-size: 46px;
+}
+.footer {
+  grid-column: span 5;
+  grid-row: 3;
+  font-size: 10px;
+}
+.content {
+  font-size: 14px;
+}
+.navigation {
+  font-size: 12px;
+}
+.sidebar {
+  font-size: 10px;
+}
+[class*="a"] {
+	background-color: blue;
+}
+[class$="r"] {
+	background-color: magenta;
+}
+
+
+
+
+/* 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;
+}
+
+.wpp {
+	text-align: center;
+    display: grid;
+    grid-gap: 10px;
+	height: 100vh;
+    grid-template-rows: repeat(2, [row] auto);
+    background-color: #fff;
+    color: #444;
+}
+
+.box {
+    background-color: #444;
+    color: #fff;
+    border-radius: 5px;
+    padding: 20px;
+
+}
+
+.box .box {
+    background-color: #ccc;
+    color: #444;
+}
+
+.header {
+    grid-column: span 5;
+    grid-row: row;
+    font-size: 46px;
+}
+
+.sidebar {
+	font-size: 10px;
+    grid-column: col 4/span 1;
+    grid-row: row 2;
+}
+
+.navegation {
+	font-size: 12px;
+    grid-column: span 1;
+    grid-row: row 2;
+}
+
+.content {
+	font-size: 14px;
+    grid-column: col 1 / span 3;
+    grid-row: row 2;
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+}
+
+.e {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+
+.f {
+    grid-column: 1 / 3;
+    grid-row: 3;
+    padding-top: 50px;
+    padding-bottom: 50px;
+}
+
+.g {
+    grid-column: 1 / 3;
+    grid-row: 4;
+}
+.content-section {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+.footer {
+    grid-column: span 5;
+    grid-row: 3;
+    font-size: 10px;
+}
+
+html *
+{
+   font-size: 14px ;
+   font-family: Arial;
+   font-weight:bold;
+}
+
+
+[class*="a"] {
+	background-color: blue;
+}
+[class$="r"] {
+	background-color: magenta;
+}
+
+/*
+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?
+crearia un selector al elemento de la clase oh-no-inline-styles y le colocaria background:green !important*/
+
+
+
+* {
+    box-sizing: border-box;
+}
+
+.row::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+[class*="col-"] {
+    float: left;
+    padding: 15px;
+}
+.col-1 {width: 8.33%;}
+.col-2 {width: 16.66%;}
+.col-3 {width: 25%;}
+.col-4 {width: 33.33%;}
+.col-5 {width: 41.66%;}
+.col-6 {width: 50%;}
+.col-7 {width: 58.33%;}
+.col-8 {width: 66.66%;}
+.col-9 {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
+.zf {
+    background-color: black;
+    position: relative;
+    height: 265px;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: .5s ease;
+  background-color: rgba(0,0,0,0.5);
+}
+
+.zf:hover .overlay {
+  opacity: 1;
+}
+
+.text {
+  color: white;
+  font-size: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+}
+.image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@media only screen and (max-width: 500px) {
+  .col-4 {
+    width: 50%;
+  }
+  .zf {
+    background-color: black;
+    position: relative;
+    height: 112px;
+  }
+  .txt-mobile {
+    width: 100%;
+  }
+}
+
+
diff --git a/00-HTML-CSS-basics/form.html b/00-HTML-CSS-basics/form.html
new file mode 100644
index 000000000..5816e5193
--- /dev/null
+++ b/00-HTML-CSS-basics/form.html
@@ -0,0 +1,57 @@
+<!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>Sign up</title>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title">Sign up</h1>
+  </div>
+  <div class="content">
+    <div class="signup-form">
+      <form>
+        <div>
+          <label>First name: </label>
+          <input type="text" name="name" id="firstName" required>
+        </div>
+        <br>
+        <div>
+          <label>Last name: </label>
+          <input type="text" name="lastname" id="lastName" required>
+        </div>
+        <br>
+        <div>
+          <label>E-Mail: </label>
+          <input type="email" name="email" id="e-mail" required>
+        </div>
+        <br>
+        <div>
+          <label>Birthday: </label>
+          <input type="date" name="birth" id="birthDay">
+        </div>
+        <br>
+        <div>
+          <label>Sport: </label>
+          <select name="sports" id="favoriteSport">
+            <option selected disabled>Select your favorite sport</option>
+            <option>Soccer</option>
+            <option>Basketball</option>
+            <option>Golf</option>
+          </select>
+        </div>
+        <br>
+        <div>
+          <textarea name="bio" id="userBio" cols="30" rows="10" placeholder="Write a small bio of you"></textarea>
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+          <button type="reset">Clear</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/img/donatello.jpg b/00-HTML-CSS-basics/img/donatello.jpg
new file mode 100644
index 000000000..24b62f7fc
Binary files /dev/null and b/00-HTML-CSS-basics/img/donatello.jpg differ
diff --git a/00-HTML-CSS-basics/img/edvard.jpg b/00-HTML-CSS-basics/img/edvard.jpg
new file mode 100644
index 000000000..6a0dfa0f3
Binary files /dev/null and b/00-HTML-CSS-basics/img/edvard.jpg differ
diff --git a/00-HTML-CSS-basics/img/picasso.jpg b/00-HTML-CSS-basics/img/picasso.jpg
new file mode 100644
index 000000000..c807b0cb5
Binary files /dev/null and b/00-HTML-CSS-basics/img/picasso.jpg differ
diff --git a/00-HTML-CSS-basics/img/rafael.jpg b/00-HTML-CSS-basics/img/rafael.jpg
new file mode 100644
index 000000000..227fcf7b4
Binary files /dev/null and b/00-HTML-CSS-basics/img/rafael.jpg differ
diff --git a/00-HTML-CSS-basics/img/van.jpg b/00-HTML-CSS-basics/img/van.jpg
new file mode 100644
index 000000000..2b04398bd
Binary files /dev/null and b/00-HTML-CSS-basics/img/van.jpg differ
diff --git a/00-HTML-CSS-basics/img/vinci.jpg b/00-HTML-CSS-basics/img/vinci.jpg
new file mode 100644
index 000000000..d99fc66ca
Binary files /dev/null and b/00-HTML-CSS-basics/img/vinci.jpg differ
diff --git a/00-HTML-CSS-basics/index.html b/00-HTML-CSS-basics/index.html
new file mode 100644
index 000000000..1023d869e
--- /dev/null
+++ b/00-HTML-CSS-basics/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Style</title>
+</head>
+
+<body>
+  <div class="wpp">
+    <div class="box header">< header ></div>
+    <div class="box navegation">< nav ></div>
+    <div class="box content">
+      <div class="content-section">< section ></div>
+        <div class="box e">< header ></div>
+        <div class="box f">< article ></div>
+        <div class="box g">< footer ></div>
+    </div>
+    <div class="box sidebar">< aside ></div>
+    <div class="box footer">< footer ></div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/layout.html b/00-HTML-CSS-basics/layout.html
new file mode 100644
index 000000000..33a5fe14a
--- /dev/null
+++ b/00-HTML-CSS-basics/layout.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="Free Web tutorials">
+  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
+  <meta name="author" content="John Doe">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Layout</title>
+</head>
+
+<body>
+  <div class="row">
+    <div class="txt col-6">
+      <p>Lorem ipsum.</p>
+    </div>
+    <div class="txt-mobile col-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum lacus et urna eleifend, et consequat magna
+        fringilla. Sed ullamcorper nibh ipsum, a rhoncus turpis convallis ac. Sed interdum quis dolor sed sollicitudin. Proin
+        pretium semper leo vel mattis. Nunc rutrum elit eu convallis iaculis. Mauris et nisl a nibh venenatis maximus. Sed
+        eleifend nunc pretium, ornare nunc sed, cursus neque. Vestibulum ac orci pulvinar, feugiat nunc quis, tincidunt tortor.
+        Donec efficitur felis sit amet quam malesuada dapibus. Phasellus lacus nulla, convallis id ultricies sit amet, bibendum
+        id sem.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-4 zf">
+      <img src="img/van.jpg" alt="Van Gogh" class="image">
+      <div class="overlay">
+        <div class="text">Van Gogh</div>
+      </div>
+    </div>
+    <div class="col-4 zf">
+      <img src="img/vinci.jpg" alt="Leonardo Dan Vinci" class="image">
+      <div class="overlay">
+        <div class="text">Leonardo Da Vinci</div>
+      </div>
+    </div>
+    <div class="col-4 zf">
+      <img src="img/rafael.jpg" alt="Avatar" class="image">
+      <div class="overlay">
+        <div class="text">Rafael</div>
+      </div>
+    </div>
+    <div class="col-4 zf">
+      <img src="img/donatello.jpg" alt="Avatar" class="image">
+      <div class="overlay">
+        <div class="text">Donatello</div>
+      </div>
+    </div>
+    <div class="col-4 zf">
+      <img src="img/edvard.jpg" alt="Avatar" class="image">
+      <div class="overlay">
+        <div class="text">Edvard Munch</div>
+      </div>
+    </div>
+    <div class="col-4 zf">
+      <img src="img/picasso.jpg" alt="Avatar" class="image">
+      <div class="overlay">
+        <div class="text">Pablo Picasso</div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/list.html b/00-HTML-CSS-basics/list.html
new file mode 100644
index 000000000..d126b56f7
--- /dev/null
+++ b/00-HTML-CSS-basics/list.html
@@ -0,0 +1,21 @@
+<!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>Todo list</title>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title">Todo list</h1>
+  </div>
+  <div class="content">
+    <ul>
+      <li>Wake up at 8:00 am</li>
+      <li>Prepare breackfast and turn on the PC</li>
+      <li>Read the daily tasks for work</li>
+    </ul>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/multimedia.html b/00-HTML-CSS-basics/multimedia.html
new file mode 100644
index 000000000..b60eaaf00
--- /dev/null
+++ b/00-HTML-CSS-basics/multimedia.html
@@ -0,0 +1,25 @@
+<!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>Image,video and sound</title>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title">Multimedia</h1>
+  </div>
+  <div class="content">
+    <div class="image">
+      <img src="http://ecocuyo.com/wp-content/uploads/2016/02/globant.jpg" alt="Globant logo">
+    </div>
+    <div class="video">
+      <iframe src="https://www.youtube.com/embed/UY8GDRPRoXI" allowfullscreen></iframe>
+    </div>
+    <div class="sound">
+      <audio controls src="https://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3"></audio>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/00-HTML-CSS-basics/table.html b/00-HTML-CSS-basics/table.html
new file mode 100644
index 000000000..d7dc864ba
--- /dev/null
+++ b/00-HTML-CSS-basics/table.html
@@ -0,0 +1,38 @@
+<!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>Expenses table</title>
+</head>
+<body>
+  <div class="header">
+    <h1 class="title">Expenses</h1>
+  </div>
+  <div class="content">
+    <table>
+      <tr>
+        <th>Services</th>
+        <th>Value</th>
+      </tr>
+      <tr>
+        <th>Cell phone</th>
+        <td>$200</td>
+      </tr>
+      <tr>
+        <th>Home taxes</th>
+        <td>$2000</td>
+      </tr>
+      <tr>
+        <th>Gasoline</th>
+        <td>$300</td>
+      </tr>
+      <tr>
+        <th class="total">Total</th>
+        <td>$2500</td>
+      </tr>
+    </table>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/css/normalize.css b/01-JS-DOM-APIs/css/normalize.css
new file mode 100644
index 000000000..aba238fe6
--- /dev/null
+++ b/01-JS-DOM-APIs/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/01-JS-DOM-APIs/css/styles.css b/01-JS-DOM-APIs/css/styles.css
new file mode 100644
index 000000000..98b169d78
--- /dev/null
+++ b/01-JS-DOM-APIs/css/styles.css
@@ -0,0 +1,73 @@
+/* GRID SYSTEM */
+
+.container {
+    margin: 0 auto;
+    max-width: 48rem;
+    width: 90%;
+}
+.column.full { 
+    width: 100%; 
+}
+.column.two-thirds {
+    width: 66.7%; 
+}
+.column.half {
+    width: 50%; 
+}
+.column.third { 
+    width: 33.3%; 
+}
+.column.fourth { 
+    width: 25%; 
+}
+.column.flow-opposite { 
+    float: right; 
+}
+
+/* END GRID SYSTEM */
+
+/* STYLES */
+.header h1 {
+    text-align: center;
+}
+section {
+    text-align: center;
+}
+.centered {
+    text-align: center;
+}
+@keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+  
+  .fade-in {
+    opacity: 0;
+    animation: fadeIn .5s ease-in 1 forwards;
+  }
+  
+  .is-paused {
+    animation-play-state: paused;
+  }
+  .repositories-list {
+      float: right;
+      font-size: 20px;
+      padding-right: 20px;
+  }
+  .repositories-list a {
+    text-decoration: none;
+    color: black;
+  }
+  table th tr td {
+    border: 1px solid black !important;
+  }
+  
+  @media screen and (max-width:800px) {
+      .repositories-list {
+          float: none;
+          font-size: 15px;
+          list-style-type: none;
+          padding: 0px !important;
+      }
+  }
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/index.html b/01-JS-DOM-APIs/index.html
new file mode 100644
index 000000000..659065577
--- /dev/null
+++ b/01-JS-DOM-APIs/index.html
@@ -0,0 +1,29 @@
+<!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>Topic 01</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div>
+        <div class="column full">
+            <div class="header">
+                <h1>Topic 01</h1>
+            </div>
+        </div>
+        <div class="column full centered">
+            <button id="btn" class="column centered" type="button" onclick="showMe('GET', 'https://api.github.com/search/repositories?q=JavaScript', true)">Click me!</button>
+            <section class="js-fade fade-in is-paused">
+                <h1>Hello world!</h1>
+                <h1 id="show"></h1>
+            </section>
+            
+        </div>
+    </div>
+</body>
+<script src="js/scripts.js"></script>
+</html>
\ No newline at end of file
diff --git a/01-JS-DOM-APIs/js/scripts.js b/01-JS-DOM-APIs/js/scripts.js
new file mode 100644
index 000000000..e1e3e247f
--- /dev/null
+++ b/01-JS-DOM-APIs/js/scripts.js
@@ -0,0 +1,89 @@
+const xhttp = new XMLHttpRequest();
+const el = document.querySelector('.js-fade');
+
+if (el.classList.contains('is-paused')) {
+  el.classList.remove('is-paused');
+}
+
+
+const callData = (data) => {
+  let promise = new Promise((resolve, reject) => {
+    xhttp.open(data.method, data.url, data.bool);
+    xhttp.send();
+    xhttp.onload = () => {
+      if (xhttp.readyState == 4 && xhttp.status == 200) {
+        resolve(JSON.parse(xhttp.responseText));
+      } else {
+        reject("Error")
+      }
+    }
+  });
+
+  return promise;
+};
+
+const showMe = (method, url, bool) => {
+  let data = {
+    method: method,
+    url: url,
+    bool: bool
+  }
+  callData(data)
+    .then((response) => {
+      let text;
+      let repositories = response.items
+      text = "<input type='text' name='search' id='searchInput' onkeyup='srch()' placeholder='Search a repository...'><br><ul id='list' class='repositories-list' >";
+      repositories.forEach((repository) => {
+        text += `
+            <li><a href="#">${repository.full_name}</a></li>
+           `;
+      })
+      document.getElementById("show").innerHTML = text;
+    })
+}
+
+
+var matriz = new Array(3);
+const matrizCreate = () => {
+  var table = document.createElement("table");
+
+  let index = 1;
+  for (i = 0; i < 3; i++) {
+    matriz[i] = new Array(3);
+  }
+  for (i = 0; i < 3; i++) {
+    for (e = 0; e < 3; e++) {
+      matriz[i][e] = index;
+      index++
+    }
+  }
+  for (i = 0; i < 3; i++) {
+    let tr = document.createElement("tr")
+    for (e = 0; e < 3; e++) {
+      let td = document.createElement("td");
+      let data = document.createTextNode(matriz[i][e]);
+      td.appendChild(data);
+      tr.appendChild(td);
+    }
+    table.appendChild(tr);
+  }
+  document.body.appendChild(table);
+}
+matrizCreate();
+
+const srch = () => {
+  var input, filter, ul, li, a, i;
+  input = document.getElementById("searchInput");
+  filter = input.value.toUpperCase();
+  ul = document.getElementById("list");
+  li = ul.getElementsByTagName("li");
+  for (i = 0; i < li.length; i++) {
+    a = li[i].getElementsByTagName("a")[0];
+    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
+      li[i].style.display = "";
+    } else {
+      li[i].style.display = "none";
+
+    }
+  }
+}
\ No newline at end of file