diff --git a/ad-21/principiantes-web/semana01.html b/ad-21/principiantes-web/semana01.html
new file mode 100644
index 0000000..926d54e
--- /dev/null
+++ b/ad-21/principiantes-web/semana01.html
@@ -0,0 +1,197 @@
+<!--Demos gracias a Jorge Giovannetti por su template en el grupo de avanzados-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PUMM | Programando un Mexico Mejor</title>
+    <!--favicon, imagen en el title-->
+    <link rel="shortcut icon" href="../../favicon.ico" />
+    <!-- Bootstrap core CSS -->
+    <link href="../../libraries/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <!-- Custom styles for this template -->
+    <link href="../../styles.css" rel="stylesheet" />
+</head>
+
+<body>
+    <nav class="navbar sticky-top navbar-dark" style="
+        background: rgb(0, 172, 228);
+        background: linear-gradient(
+          65deg,
+          rgba(0, 172, 228, 1) 0%,
+          rgba(23, 12, 102, 1) 100%
+        );
+      ">
+        <div class="container d-flex justify-content-between">
+            <a href="../../index.html" class="navbar-brand">
+                <span>PUMM</span> Programando un México Mejor
+            </a>
+            <div>
+                <a href="../../about.html" class="nav-link d-inline-block" style="color: white">Acerca del proyecto</a
+          >
+          <a
+            href="../../equipo.html"
+            class="nav-link d-inline-block"
+            style="color: white"
+            >Equipo</a
+          >
+          <a
+            href="../../clases.html"
+            class="nav-link d-inline-block"
+            style="color: white"
+            >Clases</a
+          >
+          <a
+            href="../../recursos.html"
+            class="nav-link d-inline-block"
+            style="color: white"
+            >Recursos</a
+          >
+          <a
+            href="../../blog.html"
+            class="nav-link d-inline-block"
+            style="color: white"
+            >Blog</a
+          >
+        </div>
+      </div>
+    </nav>
+
+    <div id="resource-section" class="album">
+      <div class="container">
+<!--Cambiar titulo, cambiar el texto dentro del h1-->
+        <h1 class="text-center pb-3">¿Qué es desarrollo web?</h1>
+        <div class="white-bg row py-4">
+          <div class="col-12 col-md-7 col-12 text-center">
+            <h2>¿De qué trata la sesión?</h2>
+<!--Descripcion de la sesion, cambiar el contenido-->
+            <p class="lead text-justify">
+                En esta sesión se explican los fundamentos y la importancia del desarrollo web, englobando las herramientas principales de desarrollo web: HTML, CSS y JavaScript. También se habla sobre el Inspector de página y cómo hacer uso de él para ver el código fuente de los sitios web.
+            </p>
+            <p class="card-text">
+<!--Link a la grabacion, cambiar el href-->                
+              <a
+                target="_blank"
+                href=""
+                ><strong>Link a la grabación</strong></a
+              >
+            </p>
+            <p class="card-text">
+<!--Link al reto de la semana, cambiar el href-->
+              <a
+                target="_blank"
+                href="https://docs.google.com/document/d/1JWS0YF2ITQTF5IeTCeFRN-_Fe3YBBLF_3n8hdEvL9oM/edit?usp=sharing"
+                ><strong>Link al reto de la semana</strong></a
+              >
+            </p>
+          </div>
+          <div class="col-6 col-md-5 col-12 text-center align-items-center">
+<!--Imagen descriptiva de la sesion, cambiar el src con una liga a la foto, o suban la que quieran-->              
+            <img
+              height="265px"
+              width="300px"
+              src="https://yahzah.com/wp-content/uploads/2020/09/Web4.jpg"
+            />
+          </div>
+        </div>
+        <div class="row pt-3">
+<!--Cambiar el iframe completo con el embed de su pptx -->            
+        <iframe 
+            src="https://docs.google.com/presentation/d/e/2PACX-1vTye6_qFhMwWSG_93WN9UV2uoJjKHsFUs6urjufXPXAGsxlwexqDrq9bFs6gbz3-PzfuXveqS-Non2y/embed?start=false&loop=false" 
+            frameborder="0" 
+            width="100%" 
+            height="500" 
+            allowfullscreen="true" 
+            mozallowfullscreen="true" 
+            webkitallowfullscreen="true">
+        </iframe>
+        </div>
+        <div class="white-bg row py-3">
+          <div class="col col-md text-center">
+<!--Escribir el nombre de quienes dieron la sesion-->              
+            <h3>Sesión impartida por: Roberta Saldaña y Edgar Vergara</h3>
+          </div>
+        </div>
+        <div class="pb-3"></div>
+        <div class="row py-3">
+          <div class="col col-md text-center">
+            <h3>Quiz</h3>
+<!--Cambiar el iframe completo con el embed a su quiz-->            
+            <iframe 
+                src="https://docs.google.com/forms/d/e/1FAIpQLSesWzKHk8epmna0CjuLwXHuP7w2eOjTfAIzpfZwXOlgKsxt3g/viewform?embedded=true" 
+                width="100%" 
+                height="600" 
+                frameborder="0" 
+                marginheight="0" 
+                marginwidth="0">
+                Cargando…
+            </iframe>
+          </div>
+        </div>
+
+        <nav aria-label="Page navigation example">
+          <ul class="pagination justify-content-center">
+            <li class="page-item">
+              <a class="page-link" href="sesion1.html">1</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion2.html">2</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion3.html">3</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion4.html">4</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion5.html">5</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion6.html">6</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="sesion5.html">Siguiente</a>
+                </li>
+                </ul>
+    </nav>
+    </div>
+    </div>
+
+    <footer class="text-muted">
+        <div class="container">
+            <p class="float-right">
+                <a href="#">Regresa hasta arriba</a>
+            </p>
+            <p>SAITC 2021</p>
+            <p>PUMM Programando Un México Mejor</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap core JavaScript
+      ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script>
+        window.jQuery ||
+            document.write(
+                '<script src=".././libraries/assets/js/vendor/jquery.min.js"><\/script>'
+            );
+    </script>
+    <script src="../../libraries/assets/js/vendor/popper.min.js"></script>
+    <script src="../../libraries/assets/js/vendor/holder.min.js"></script>
+    <script>
+        $(function() {
+            Holder.addTheme("thumb", {
+                background: "#55595c",
+                foreground: "#eceeef",
+                text: "Thumbnail",
+            });
+        });
+    </script>
+    <script src="../../libraries/dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="../../libraries/assets/js/ie10-viewport-bug-workaround.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/proximamente.html b/proximamente.html
index b35012e..4994cdc 100644
--- a/proximamente.html
+++ b/proximamente.html
@@ -1,5 +1,7 @@
+<!-- test comment -->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,81 +14,93 @@
     <!-- Custom styles for this template -->
     <link href="styles.css" rel="stylesheet">
 </head>
+
 <body id="body">
-      <nav class="navbar sticky-top navbar-dark" style="background: rgb(0,172,228);
+    <nav class="navbar sticky-top navbar-dark" style="background: rgb(0,172,228);
       background: linear-gradient(65deg, rgba(0,172,228,1) 0%, rgba(23,12,102,1) 100%);">
         <div class="container d-flex justify-content-between">
             <a href="index.html" class="navbar-brand">
                 <!--<img src="./libraries/assets/pumm-logo/saitc.png" alt="PUMM logo" height="40" class="d-inline-block align-middle mr-2">-->
-                <span>PUMM</span>
-                Programando un México Mejor
+                <span>PUMM</span> Programando un México Mejor
             </a>
             <div>
-              <a href="about.html" class="nav-link d-inline-block" style="color: white;">Acerca del proyecto</a>
-              <a href="equipo.html" class="nav-link d-inline-block" style="color: white;">Equipo</a>
-              <a href="clases.html" class="nav-link d-inline-block" style="color: white;">Clases</a>
-              <a href="recursos.html" class="nav-link d-inline-block" style="color: white;">Recursos</a>
+                <a href="about.html" class="nav-link d-inline-block" style="color: white;">Acerca del proyecto</a>
+                <a href="equipo.html" class="nav-link d-inline-block" style="color: white;">Equipo</a>
+                <a href="clases.html" class="nav-link d-inline-block" style="color: white;">Clases</a>
+                <a href="recursos.html" class="nav-link d-inline-block" style="color: white;">Recursos</a>
             </div>
-          </div>
-      </nav>
-  
-      <div id="prox">
+        </div>
+    </nav>
+
+    <div id="prox">
         <div id="inside">
-          <img src="./libraries/assets/landing/Development.gif" alt="moving computer">
-          <h1>Próximamente</h1><br>
-          <a href="index.html"><button type="button" class="btn btn-primary btn-lg btn-block">Regresar a página principal</button></a>
+            <img src="./libraries/assets/landing/Development.gif" alt="moving computer">
+            <h1>Próximamente</h1><br>
+            <a href="index.html"><button type="button" class="btn btn-primary btn-lg btn-block">Regresar a página principal</button></a>
         </div>
-      </div>
-      <footer class="text-muted">
+    </div>
+    <footer class="text-muted">
         <div class="container">
-          <p class="float-right">
-            <a href="#">Regresa hasta arriba</a>
-          </p>
-          <p>SAITC 2021</p>
-          <p>PUMM Programando Un México Mejor</p>
+            <p class="float-right">
+                <a href="#">Regresa hasta arriba</a>
+            </p>
+            <p>SAITC 2021</p>
+            <p>PUMM Programando Un México Mejor</p>
         </div>
-      </footer>
-  
-      <!-- Bootstrap core JavaScript
+    </footer>
+
+    <!-- Bootstrap core JavaScript
       ================================================== -->
-      <!-- Placed at the end of the document so the pages load faster -->
-      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-      <script>window.jQuery || document.write('<script src="./libraries/assets/js/vendor/jquery.min.js"><\/script>')</script>
-      <script src="./libraries/assets/js/vendor/popper.min.js"></script>
-      <script src="libraries/assets/js/vendor/holder.min.js"></script>
-      <script>
-        $(function () {
-          Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script>
+        window.jQuery || document.write('<script src="./libraries/assets/js/vendor/jquery.min.js"><\/script>')
+    </script>
+    <script src="./libraries/assets/js/vendor/popper.min.js"></script>
+    <script src="libraries/assets/js/vendor/holder.min.js"></script>
+    <script>
+        $(function() {
+            Holder.addTheme("thumb", {
+                background: "#55595c",
+                foreground: "#eceeef",
+                text: "Thumbnail"
+            });
         });
-      </script>
-      <script src="./libraries/dist/js/bootstrap.min.js"></script>
-      <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-      <script src="./libraries/assets/js/ie10-viewport-bug-workaround.js"></script>
-    </body>
-  </html>
+    </script>
+    <script src="./libraries/dist/js/bootstrap.min.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src="./libraries/assets/js/ie10-viewport-bug-workaround.js"></script>
+</body>
+
+</html>
 
-  <style>
-      #prox {
+<style>
+    #prox {
         height: 70vh;
         background-color: black;
         display: flex;
         align-items: center;
         justify-content: center;
-      }
-      #body {
+    }
+    
+    #body {
         height: 100vh !important;
-      }
-      h1 {
+    }
+    
+    h1 {
         color: white;
         text-align: center;
-      }
-      img {
+    }
+    
+    img {
         height: 30vh;
-      }
-      .btn {
+    }
+    
+    .btn {
         text-align: center;
-      }
-      #inside {
+    }
+    
+    #inside {
         text-align: center;
-      }  
-  </style>
\ No newline at end of file
+    }
+</style>
\ No newline at end of file
