Mejorar contenido y agregar estilos

index.css

@@ -1,3 +1,20 @@
 body {
     font-family: "Roboto", sans-serif;
+    min-width: 20rem;
+    max-width: 50rem;
+    margin: auto;    
+    padding: 0 2rem;
+}
+
+.titulo h1 {
+    flex-direction: column;
+    display: flex;
+    gap: 0.5rem;
+}
+
+@media (min-width: 36rem) {
+    .titulo {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
 }

index.html

@@ -3,21 +3,36 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="index.css" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
-<title>Tecnologías de la información (Tercer año)</title>
+<title>Tecnologías de la información</title>
 
+<div class="titulo">
+    <h1>
+        <div>
+            Tecnologías de la información
+        </div>
+        <div>
+            3er año
+        </div>
+    </h1>
+</div>
 
-<h1>Tecnologías de la información (Tercer año)</h1>
+<h2>
+    Marco institucional
+</h2>
 
 <ul>
-    <li>
-        <a href="https://buenosaires.gob.ar/sites/default/files/media/document/2017/10/26/908e07ec3f1940639a23d84fe8b73703976fb4ae.pdf" target="_blank">Diseño curricular (Pág. 447)</a>
-    </li>
     <li>
         Escuela: <a href="https://escuelagm16.wixsite.com/escuelagm16" target="_blank">Esc. de comercio 16 - Gabriela Mistral DE 7</a>
     </li>
     <li>
         Docente: <a href="https://aeatencio.github.io/cv/" target="_blank">Andrés Atencio</a>
     </li>
+    <li>
+        <a href="https://335dcf03-391a-48ea-b784-2179c2c1e382.filesusr.com/ugd/3d8281_64464645fc3a4fc7b342732b8c5ef2db.pdf" target="_blank">Programa</a>        
+    </li>
+    <li>
+        <a href="https://buenosaires.gob.ar/sites/default/files/media/document/2017/10/26/908e07ec3f1940639a23d84fe8b73703976fb4ae.pdf" target="_blank">Diseño curricular</a> (Pág. 447)
+    </li>
 </ul>
 
 <h2>
@@ -46,49 +61,56 @@ <h2>
     </li>
 </ul>
 
-<div class="formularios" hidden>
-    <h2>
-        Formularios
-    </h2>
-
-    <ul>
-        <li>
-            <a href="https://forms.gle/7Vt9LA6u5PChD81z7" target="_blank">Intereses y conocimientos previos</a>
-        </li>
-        <li>
-            <a href="https://forms.gle/u1Hy6znEwkMvqQHU9" target="_blank">Buzón de quejas y sugerencias</a>
-        </li>
-    </ul>
-</div>
-
 <h2>
-    Entornos de programación educativos
+    Recursos pedagógicos
 </h2>
 
 <ul>
     <li>
-        <a href="http://www.alice.org/get-alice/alice-2/" target="_blank">Alice 2 (Spanish Gallery Complete)</a>
-    </li>
-    <li>
-        <a href="https://lightbot.com/" target="_blank">Lightbot,</a>
+        <a href="https://program.ar/" target="_blank">Program.AR</a>
     </li>
     <li>
-        <a href="https://pilasbloques.program.ar/" target="_blank">Pilas Bloques</a>
+        <a href="https://www.youtube.com/playlist?list=PLMzqU7WIECa_UxgwHcogzs-Ueb02Lt5yf" target="_blank">Desafío Dale Aceptar</a>
     </li>
     <li>
-        <a href="https://scratch.mit.edu/" target="_blank">Scratch</a>
+        <a href="https://www.youtube.com/watch?v=SLuQZz-QU_0" target="_blank">¿Qué es, y qué no es, una computadora?</a>
     </li>
 </ul>
 
 <h2>
-    Recursos pedagógicos
+    Entornos de programación educativos
 </h2>
 
 <ul>
     <li>
-        <a href="https://program.ar/" target="_blank">Program.AR</a>
+        <a href="http://www.alice.org/get-alice/alice-2/" target="_blank">Alice 2</a>
     </li>
     <li>
-        <a href="https://www.youtube.com/playlist?list=PLMzqU7WIECa_UxgwHcogzs-Ueb02Lt5yf" target="_blank">Desafío Dale Aceptar</a>
+        <a href="https://pilasbloques.program.ar/" target="_blank">Pilas Bloques</a>
+    </li>
+    <li>
+        <a href="https://lightbot.com/" target="_blank">Lightbot</a>
     </li>
-</ul>
+    <li>
+        <a href="https://scratch.mit.edu/" target="_blank">Scratch</a>
+    </li>
+</ul>
+
+<div>
+    <h2>
+        Encuesta para estudiantes
+    </h2>
+
+    <p>
+        Ayudanos a mejorar el dictado de la materia completando <a href="https://forms.gle/7Vt9LA6u5PChD81z7" target="_blank">este formulario</a> sobre intereses, inquietudes y conocimientos previos.
+    </p>
+
+   <ul>
+        <li hidden>
+            <a href="https://forms.gle/7Vt9LA6u5PChD81z7" target="_blank">Intereses, inquietudes y conocimientos previos</a>
+        </li>
+        <li hidden>
+            <a href="https://forms.gle/u1Hy6znEwkMvqQHU9" target="_blank">Buzón de quejas y sugerencias</a>
+        </li>
+    </ul>
+</div>