Crea una página HTML con código CSS desde un archivo diferente.
16 |
20 |
21 | <head>
22 | <meta charset="UTF-8">
23 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
24 | <title>HTML 30-day challenge - Día 1</title>
25 | <link rel="stylesheet" href="style.css">
26 | </head>
27 |
28 |
29 | No disponible
40 |Crea una barra medidora que muestre los tickets vendidos en un cine (Ejemplo: 64/100 tickets vendidos).
18 |
22 |
23 | <p>64/100 tickets vendidos</p>
24 | <meter min="1" value="64" max="100"></meter>
25 |
26 |
27 | 64/100 tickets vendidos
45 |Crea una página con un video MP4 (no de youtube), que muestre una imagen de portada antes de darle a reproducir.
18 |
22 |
23 | <video
24 | src="../../assets/video/waves-loop.mp4"
25 | poster="../../assets/img/play.svg"
26 | width="640"
27 | height="360"
28 | loop
29 | controls></video>
30 |
31 |
32 | Crea un slider que permita seleccionar un número entre 1-50 y lo muestre en vivo al cambiar. Requiere algo de Javascript.
18 |
22 |
23 | <input
24 | type="range"
25 | name="slider"
26 | id="slider"
27 | value="1"
28 | min="1"
29 | max="50"
30 | step="1"
31 | onInput="this.nextElementSibling.value = this.value">
32 | <output>1</output>
33 |
34 |
35 | Crea un formulario que te permita elegir un día entre el 15/nov y el 15/dic.
18 |
22 |
23 | <form action="/send" method="get">
24 | <p>Seleccciona una fecha</p>
25 | <input type="date" min="2024-11-15" max="2024-12-15">
26 | </form>
27 |
28 |
29 |
31 |
32 | input {
33 | padding: 8px;
34 | margin: 1rem 0;
35 | border: none;
36 | box-shadow: black 0 0 4px;
37 | }
38 |
39 |
40 | Coloca una imagen en formato JPEG-XL. Si el navegador no la soporta, que use AVIF. Sino, que use JPG.
16 |
20 |
21 | <picture>
22 | <source srcset="../../assets/img/HTML-30-day-challenge.jxl" type="image/jxl">
23 | <source srcset="../../assets/img/HTML-30-day-challenge.avif" type="image/avif">
24 | <img src="../../assets/img/HTML-30-day-challenge.jpg" alt="HTML 30-day challenge">
25 | </picture>
26 |
27 |
28 | 
49 | Crea un formulario de registro que valide si el username escrito es válido (sólo letras y números) o no.
18 |
22 |
23 | <form action="">
24 | <p>Username: </p>
25 | <input type="text" pattern="[A-Za-z0-9]+" required>
26 | <input type="submit" value="Validar">
27 | </form>
28 |
29 |
30 |
32 |
33 | input {
34 | padding: 8px;
35 | margin: 1rem 0;
36 | border: none;
37 | box-shadow: black 0 0 4px;
38 | }
39 |
40 |
41 | Ponle un título y una descripción al documento, ideal para SEO.
17 |
21 |
22 | <head>
23 | <meta charset="UTF-8">
24 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
25 | <title>HTML 30-day challenge - Día 5</title>
26 | <meta name="description" content="Esta web contiene la solución a una serie
27 | de desafíos creados por ManzDev con la finalidad de aprender y/o practicar
28 | con los lenguajes HTML, CSS y un poco de JavaScript.">
29 | </head>
30 |
31 |
32 | No disponible
51 |Carga una librería Javascript de confetti y lánzalo cuando pulses en un botón. Requiere algo de Javascript.
18 |
22 |
23 | <button id="confetti">¡Libera el confetti! </button>
24 | <canvas id="custom_canvas"> </canvas>
25 | <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
26 | <script src="./script.js"> </script>
27 |
28 |
29 |
31 |
32 | const button = document.getElementById('confetti')
33 | const canvas = document.getElementById('custom_canvas')
34 |
35 | const jsConfetti = new JSConfetti({ canvas })
36 |
37 | setTimeout(() => {
38 | jsConfetti.addConfetti()
39 | }, 500)
40 |
41 | button.addEventListener('click', () => {
42 | jsConfetti.addConfetti()
43 | })
44 |
45 |
46 | Muestra un texto con el atajo de teclado CTRL+ALT+SUPR y dale estilo para que parezcan teclas.
18 |
22 |
23 | <div class="container">
24 | <kbd>Ctrl</kbd>
25 | <kbd>Alt</kbd>
26 | <kbd>Supr</kbd>
27 | </div>
28 |
29 |
30 |
32 |
33 | .container {
34 | height: 100vh;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | gap: 2rem;
39 | }
40 |
41 | kbd {
42 | background-color: #dcdcdc;
43 | color: #616161;
44 | font-weight: 900;
45 | font-size: 1.5rem;
46 | padding: 1rem;
47 | border-radius: 8%;
48 | box-shadow: black 1px 1px 4px;
49 | cursor: pointer;
50 | }
51 |
52 | kbd:hover {
53 | background-color: #aeaeae;
54 | }
55 |
56 |
57 | Crea una galería de fotos. Asegúrate que no se cargan si están fuera de la región visible del navegador.
18 |
22 |
23 | <img src="../../assets/img/avatar.webp" alt="Avatar odraciRdev">
24 | <img src="../../assets/img/logo.png" alt="Logo HTML 30-day challenge">
25 | <img src="../../assets/img/portada_noticia.webp" alt="Portada de la noticia"
26 | loading="lazy">
27 | <img src="../../assets/img/social.webp" alt="Social graph" loading="lazy">
28 |
29 |
30 |
32 |
33 | img {
34 | width: 98%;
35 | margin-bottom: 1rem;
36 | }
37 |
38 |
39 | 
57 | 
58 | 
59 | 
60 | Muestra un bloque de fragmento de código CSS en una página. Si quieres ir al máximo, añade una librería Javascript para añadirle resaltado de colores.
18 |
22 |
23 | <head>
24 | <link rel="stylesheet"
25 | href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.css">
26 | </head>
27 | <body>
28 | <pre>
29 | <code class="language-css">
30 | * {
31 | margin: unset;
32 | padding: unset;
33 | box-sizing: border-box;
34 | }
35 | </code>
36 | </pre>
37 | <script
38 | src="https://cdn.jsdelivr.net/npm/prismjs@v1.x/components/prism-core.min.js">
39 | </script>
40 | <script
41 | src="https://cdn.jsdelivr.net/npm/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js">
42 | </script>
43 | </body>
44 |
45 |
46 |
64 |
65 | * {
66 | margin: unset;
67 | padding: unset;
68 | box-sizing: border-box;
69 | }
70 |
71 |
72 | Crea una ventana modal que bloquee la interación con otros botones. Requiere un poco de Javascript.
18 |
22 |
23 | <dialog id="alerta">
24 | <h2>¡Censeguido!</h2>
25 | <p>Hemos superado el desafío #28</p>
26 | <button onClick="this.parentElement.close()">Cerrar</button>
27 | </dialog>
28 | <button id="mostrar">Muéstrame el diálogo</button>
29 | <script src="./script.js"></script>
30 |
31 |
32 |
34 |
35 | const showButton = document.querySelector("#mostrar");
36 | showButton.addEventListener("click", function () {
37 | const alertDialog = document.querySelector("#alerta");
38 | alertDialog.showModal();
39 | });
40 |
41 |
42 | Construye una página con un párrafo que tenga enlaces internos y externos (a otros sitios web).
16 |
20 |
21 | <p>Esta sería la solución para el reto del día 3 del
22 | <em><a href="https://lenguajehtml.com/challenge/">
23 | "HTML 30-day challenge"</a></em> creado por ManzDev.</p>
24 |
25 | <h2>Lista de retos resueltos</h2>
26 |
27 | <ul>
28 | <li><strong>Día 1</strong> <a href="../01/index.html">Ver solución</a></li>
29 | <li><strong>Día 2</strong> <a href="../02/index.html">Ver solución</a></li>
30 | </ul>
31 |
32 |
33 | Esta sería la solución para el reto del día 3 del "HTML 30-day challenge" creado por ManzDev.
51 |Crea una página con un titular, varios párrafos de texto y una imagen.
16 |
20 |
21 | <h1>Roadmap Frontend Developer</h1>
22 |
23 | <p>¡Hola! Soy Ricardo, desarrollador web en formación al que le encanta
24 | el frontend. Estoy resolviendo <a href="https://lenguajehtml.com/challenge/">
25 | una lista de retos creados por ManzDev</a> para dar mis primeros pasos
26 | en el desarrollo web.</p>
27 |
28 | <p>Estos retos los estoy resolviendo en vivo en mi
29 | <a href="https://twitch.tv/odracirdev">canal de Twitch</a>, si gustas puedes
30 | pasar a verlos. Únete al discord para estar al tanto de los directos.</p>
31 |
32 | <button><a href="https://discord.gg/3m9KdYAf3p">Discord</a></button>
33 |
34 | <img src="../../assets/img/social.webp" alt="Ricardo Cuauro - Frontend Developer">
35 |
36 |
37 | ¡Hola! Soy Ricardo, desarrollador web en formación al que le encanta el frontend. Estoy resolviendo una lista de retos creados por ManzDev para dar mis primeros pasos en el desarrollo web.
56 |Estos retos los estoy resolviendo en vivo en mi canal de Twitch, si gustas puedes pasar a verlos. Únete al discord para estar al tanto de los directos.
57 | 58 |
59 | En la lista anterior, permite al usuario introducir opciones personalizadas (no sólo las de la lista) y filtrar las opciones existentes.
18 |
22 |
23 | <p>Desarrollo de software</p>
24 | <input type="text" list="lenguajes">
25 | <datalist id="lenguajes">
26 | <option value="html">HTML</option>
27 | <option value="css">CSS</option>
28 | <option value="js">JavaScript</option>
29 | <option value="php">PHP</option>
30 | <option value="ruby">Ruby</option>
31 | <option value="py">Python</option>
32 | <option value="aws">AWS</option>
33 | <option value="docker">Docker</option>
34 | <option value="host">Hosting</option>
35 | </datalist>
36 |
37 |
38 |
40 |
41 | input {
42 | width: 50%;
43 | padding: 8px;
44 | margin: 1rem 0;
45 | border: none;
46 | box-shadow: black 0 0 4px;
47 | }
48 |
49 |
50 | Desarrollo de software
68 | 69 | 80 |Crear un párrafo de texto con palabras destacadas en diferentes colores.
18 |
22 |
23 | <p>Lorem, ipsum dolor sit amet consectetur <mark class="color">adipisicing
24 | elit.</mark> Ipsam aperiam, quod laboriosam beatae, cupiditate sint enim quam
25 | maxime <mark>officiis illo</mark>, harum repellendus suscipit. Tempore aut
26 | impedit <mark class="color">ipsam deserunt</mark> obcaecati fugit!</p>
27 |
28 | <p>Lorem, ipsum dolor sit amet consectetur <mark class="color">adipisicing
29 | elit.</mark> Ipsam aperiam, quod laboriosam beatae, cupiditate sint enim quam
30 | maxime officiis illo, harum repellendus suscipit. Tempore aut impedit <mark
31 | class="color">ipsam deserunt</mark> obcaecati fugit!>
32 |
33 |
34 |
36 |
37 | .color:first-of-type {
38 | background-color: aquamarine;
39 | }
40 |
41 | .color:last-of-type {
42 | background-color: blueviolet;
43 | }
44 |
45 |
46 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam aperiam, quod 64 | laboriosam beatae, cupiditate sint enim quam maxime officiis illo, harum repellendus suscipit. 65 | Tempore aut impedit ipsam deserunt obcaecati fugit!
66 |Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam aperiam, quod 67 | laboriosam beatae, cupiditate sint enim quam maxime officiis illo, harum repellendus suscipit. Tempore aut 68 | impedit ipsam deserunt obcaecati fugit!
69 |Crea un mensaje emergente al pulsar un botón, que desaparezca al pulsar fuera del mensaje.
18 |
22 |
23 | <button
24 | popovertarget="mensaje"
25 | popovertargetaction="toggle">Mostrar mensaje</button>
26 | <div id="mensaje" popover>
27 | <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
28 | Ratione possimus, qui animi, harum, maiores error officia nam officiis
29 | deleniti nesciunt ullam odio libero ducimus natus cupiditate
30 | ea in culpa! Inventore?</p>
31 | </div>
32 |
33 |
34 |
36 |
37 | button {
38 | padding: 8px;
39 | margin: 1rem 0;
40 | border: none;
41 | box-shadow: black 0 0 4px;
42 | cursor: pointer;
43 | }
44 |
45 | [popover] {
46 | background: #222;
47 | border: 0;
48 | border-bottom: 5px solid gold;
49 | color: white;
50 | padding: 0.05rem 1.25rem;
51 | }
52 |
53 | [popover]::backdrop {
54 | background: #000a;
55 | backdrop-filter: blur(2px);
56 | }
57 |
58 | [popover]:popover-open {
59 | color: gold;
60 | width: 300px;
61 | height: 400px;
62 | display: flex;
63 | justify-content: center;
64 | align-items: center;
65 | margin: auto;
66 | }
67 |
68 |
69 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione possimus, qui animi, harum, maiores error officia nam officiis deleniti nesciunt ullam odio libero ducimus natus cupiditate ea in culpa! Inventore?
89 |Crea un formulario para dejar un comentario en una página: Usuario y comentario de texto.
18 |
22 |
23 | <form action="/enviar" method="post">
24 | <label for="usuario">
25 | Usuario
26 | </label>
27 | <input
28 | type="text"
29 | name="usuario"
30 | maxlength="25"
31 | placeholder="Nombre de usuario">
32 | <label for="comentario">
33 | Comentario
34 | </label>
35 | <textarea
36 | name="comentario"
37 | cols="40"
38 | rows="6"
39 | placeholder="Escribe aquí tu comentario."></textarea>
40 | <input type="submit" value="Comentar">
41 | </form>
42 |
43 |
44 |
46 |
47 | form {
48 | width: 50%;
49 | display: flex;
50 | flex-direction: column;
51 | gap: 1rem;
52 | margin: 0 auto;
53 | }
54 |
55 | input {
56 | border: none;
57 | padding: 8px;
58 | border-radius: 4px;
59 | box-shadow: black 0 0 4px;
60 | }
61 |
62 | textarea {
63 | border: none;
64 | padding: 8px;
65 | border-radius: 4px;
66 | box-shadow: black 0 0 4px;
67 | }
68 |
69 |
70 | Crea una lista desplegable donde se pueda seleccionar entre 3 grupos de productos ficticios.
18 |
22 |
23 | <p>Desarrollo de software</p>
24 | <select name="lenguajes">
25 | <option value="">Selecciona una opción</option>
26 | <optgroup label="Frontend">
27 | <option value="html">HTML</option>
28 | <option value="css">CSS</option>
29 | <option value="js">JavaScript</option>
30 | </optgroup>
31 | <optgroup label="Backend">
32 | <option value="php">PHP</option>
33 | <option value="ruby">Ruby</option>
34 | <option value="py">Python</option>
35 | </optgroup>
36 | <optgroup label="Tecnologías">
37 | <option value="aws">AWS</option>
38 | <option value="docker">Docker</option>
39 | <option value="host">Hosting</option>
40 | </optgroup>
41 | </select>
42 |
43 |
44 |
46 |
47 | select {
48 | width: 50%;
49 | padding: 8px;
50 | margin: 1rem 0;
51 | border: none;
52 | box-shadow: black 0 0 4px;
53 | }
54 |
55 |
56 | Desarrollo de software
74 | 92 |Crea un pergamino con una lista de objetos, donde se numere con números romanos (mayúsculas).
18 |
22 |
23 | <div class="container">
24 | <h1>Inventos Romanos</h1>
25 | <ol type="I">
26 | <li>Carreteras</li>
27 | <li>Periódicos</li>
28 | <li>Calendario</li>
29 | <li>Hormigón</li>
30 | <li>Alcantarillado</li>
31 | <li>Bomberos</li>
32 | <li>Graffits</li>
33 | <li>Maquillaje</li>
34 | <li>Calefacción</li>
35 | <li>Arcos</li>
36 | <li>Spas</li>
37 | <li>Departamentos</li>
38 | </ol>
39 | </div>
40 |
41 |
42 |
44 |
45 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
46 |
47 | .container {
48 | font-family: "Cinzel", serif;
49 | width: 300px;
50 | height: 500px;
51 | background-color: antiquewhite;
52 | display: flex;
53 | flex-direction: column;
54 | align-items: center;
55 | justify-content: center;
56 | gap: 1rem;
57 | background-image:
58 | url(../../assets/img/fondo-papel-grunge-vintage_1048-10911.avif);
59 | object-fit: cover;
60 | margin: 28px auto;
61 | }
62 |
63 | .container h1 {
64 | font-size: 2rem;
65 | line-height: 2.2rem;
66 | color: #2c2c2c;
67 | text-align: center;
68 | }
69 |
70 | .container ol {
71 | padding-left: 8%;
72 | color: #2c2c2c;
73 | }
74 |
75 |
76 | Crea un grupo de secciones (acordeón) donde se despliegue sólo uno a la vez.
16 |
20 |
21 | <details open name="dia-6">
22 | <summary>Ejemplo 1</summary>
23 | <h2>Lorem ipsum</h2>
24 | <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
25 | </details>
26 | <details name="dia-6">
27 | <summary>Ejemplo 2</summary>
28 | <h2>Lorem ipsum</h2>
29 | <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
30 | </details>
31 | <details name="dia-6">
32 | <summary>Ejemplo 3</summary>
33 | <h2>Lorem ipsum</h2>
34 | <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
35 | </details>
36 | <details name="dia-6">
37 | <summary>Ejemplo 4</summary>
38 | <h2>Lorem ipsum</h2>
39 | <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
40 | </details>
41 |
42 |
43 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit totam quidem quod assumenda, officiis inventore, quam aliquam voluptates dolorem recusandae, adipisci sed doloremque minus alias iste iusto voluptatibus animi. Dolorem.
64 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit totam quidem quod assumenda, officiis inventore, quam aliquam voluptates dolorem recusandae, adipisci sed doloremque minus alias iste iusto voluptatibus animi. Dolorem.
69 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit totam quidem quod assumenda, officiis inventore, quam aliquam voluptates dolorem recusandae, adipisci sed doloremque minus alias iste iusto voluptatibus animi. Dolorem.
74 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit totam quidem quod assumenda, officiis inventore, quam aliquam voluptates dolorem recusandae, adipisci sed doloremque minus alias iste iusto voluptatibus animi. Dolorem.
79 |Crea una serie de etiquetas que permitan mostrar como miniatura una imagen en redes sociales.
29 |
33 |
34 | <head>
35 | <meta
36 | property="og:type"
37 | content="article">
38 | <meta
39 | property="og:title"
40 | content="HTML 30-day challenge - Día 27">
41 | <meta
42 | property="og:url"
43 | content="https://odracirdev.github.io/challengeHTML/desafios/27/">
44 | <meta
45 | property="og:image"
46 | content="https://odracirdev.github.io/challengeHTML/assetes/img/social.webp">
47 | <meta
48 | property="og:description"
49 | content="Crea una serie de etiquetas que permitan mostrar como miniatura una imagen en redes sociales.">
50 | <meta
51 | property="twitter:card"
52 | content="summary_large_image">
53 | <meta
54 | property="twitter:creator"
55 | content="@ricardcuauro">
56 | <meta
57 | property="twitter:title"
58 | content="HTML 30-day challenge - Día 27">
59 | <meta
60 | property="twitter:url"
61 | content="https://odracirdev.github.io/challengeHTML/desafios/27/">
62 | <meta
63 | property="twitter:image"
64 | content="https://odracirdev.github.io/challengeHTML/assetes/img/social.webp">
65 | <meta
66 | property="twitter:description"
67 | content="Crea una serie de etiquetas que permitan mostrar como miniatura una imagen en redes sociales.">
68 | </head>
69 |
70 |
71 | No disponible
90 |Crea una card de usuario: username como título, un avatar de imagen, edad, país, nacimiento y enlace a su web.
18 |
22 |
23 | <div class="container">
24 | <div class="card">
25 | <header>
26 | <h2 class="username">odraciRdev</h2>
27 | </header>
28 | <img src="../../assets/img/avatar.webp"
29 | alt="Avatar de odraciRdev"
30 | class="avatar">
31 | <article class="info">
32 | <p class="age"><strong>Edad:</strong> 00</p>
33 | <p class="country"><strong>País:</strong> Venezuela</p>
34 | <p class="dob"><strong>Nacimiento:</strong> 00/00/0000</p>
35 | </article>
36 | <footer>
37 | <p class="web">
38 | <a href="//github.com/odracirdev">
39 | <img src="../../assets/img/github.svg">GitHub</a>
40 | </p>
41 | </footer>
42 | </div>
43 |
44 |
45 |
47 |
48 | .container {
49 | height: 100vh;
50 | display: flex;
51 | justify-content: center;
52 | align-items: center;
53 | }
54 |
55 | .card {
56 | width: 300px;
57 | height: 450px;
58 | background-image:
59 | repeating-linear-gradient(
60 | 343deg,
61 | rgba(12,15,16, 0.04) 0px,
62 | rgba(12,15,16, 0.04) 2px,
63 | transparent 2px,
64 | transparent 4px)
65 | linear-gradient(
66 | 180deg,
67 | rgb(5,8,37),
68 | rgb(93,83,83));
69 | border-radius: 8px;
70 | box-shadow: black 1px 1px 4px;
71 | display: flex;
72 | flex-direction: column;
73 | align-items: center;
74 | color: whitesmoke;
75 | }
76 |
77 | .username {
78 | font-size: 2rem;
79 | line-height: 2.3rem;
80 | text-align: center;
81 | margin: 1rem 0;
82 | }
83 |
84 | .avatar {
85 | width: 50%;
86 | border-radius: 8px;
87 | box-shadow: black 1px 1px 4px;
88 | }
89 |
90 | .info {
91 | width: 80%;
92 | margin: 2rem 0;
93 | }
94 |
95 | footer img {
96 | width: 32px;
97 | }
98 |
99 | footer a {
100 | text-decoration: none;
101 | color: whitesmoke;
102 | display: flex;
103 | align-items: center;
104 | gap: 0.5rem;
105 | transition: scale 300ms ease;
106 | }
107 |
108 | footer a:hover {
109 | text-decoration: none;
110 | scale: 115%;
111 | }
112 |
113 |
114 |
137 | Edad: 00
139 |País: Venezuela
140 |Nacimiento: 00/00/0000
141 |Crea un sistema de pestañas (tabs) para mostrar información. Necesita algo de Javascript.
18 |
22 |
23 | <div class="container">
24 | <button id="tab-1">Tab 1</button>
25 | <button id="tab-2">Tab 2</button>
26 | <button id="tab-3">Tab 3</button>
27 | <section>
28 | <h2>Tab 1</h2>
29 | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At enim sunt consectetur? Suscipit sunt numquam necessitatibus optio similique magnam eius id adipisci dolor beatae, perspiciatis nulla veritatis! Possimus, vero ipsam?</p>
30 | </section>
31 | <section hidden="">
32 | <h2>Tab 2</h2>
33 | <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur nemo fuga labore pariatur suscipit mollitia ea doloribus repellat voluptas numquam eveniet doloremque commodi, ab vel aut sint dignissimos repellendus placeat!</p>
34 | </section>
35 | <section hidden="">
36 | <h2>Tab 3</h2>
37 | <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, adipisci! Suscipit, sequi cum modi eveniet accusantium veniam expedita laboriosam velit quo maxime explicabo minus nihil beatae est enim adipisci officia.</p>
38 | </section>
39 | </div>
40 | <script src="./script.js"></script>
41 |
42 |
43 |
45 |
46 | const [firstSection,
47 | secondSection,
48 | thirdSection] = document.querySelectorAll("section");
49 | const tab1 = document.querySelector("#tab-1");
50 | const tab2 = document.querySelector("#tab-2");
51 | const tab3 = document.querySelector("#tab-3");
52 |
53 | tab1.addEventListener("click", function() {
54 | firstSection.removeAttribute("hidden")
55 | secondSection.setAttribute("hidden", "")
56 | thirdSection.setAttribute("hidden","")
57 | });
58 |
59 | tab2.addEventListener("click", function() {
60 | firstSection.setAttribute("hidden", "")
61 | secondSection.removeAttribute("hidden")
62 | thirdSection.setAttribute("hidden","")
63 | });
64 |
65 | tab3.addEventListener("click", function() {
66 | firstSection.setAttribute("hidden", "")
67 | secondSection.setAttribute("hidden", "")
68 | thirdSection.removeAttribute("hidden")
69 | });
70 |
71 |
72 |
73 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. At enim sunt consectetur? Suscipit sunt numquam necessitatibus optio similique magnam eius id adipisci dolor beatae, perspiciatis nulla veritatis! Possimus, vero ipsam?
97 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur nemo fuga labore pariatur suscipit mollitia ea doloribus repellat voluptas numquam eveniet doloremque commodi, ab vel aut sint dignissimos repellendus placeat!
101 |Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, adipisci! Suscipit, sequi cum modi eveniet accusantium veniam expedita laboriosam velit quo maxime explicabo minus nihil beatae est enim adipisci officia.
105 |Valida el código HTML de tus ejemplos anteriores (y los siguientes a partir de ahora).
16 |Para validar todo el HTML de todos los desafíos utilicé el validador de la W3C (Markup Validation Service).
20 |
24 | <button><a href="https://discord.gg/3m9KdYAf3p">Discord</a></button>
25 |
26 |
32 | <details open name="dia-6">
33 |
39 | <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ntBVs2n8IC0" frameborder="0" allowfullscreen>
40 |
52 | <label for="usuario">
53 | <label for="comentario">
54 | No disponible
85 |Escribe un texto con super/subíndices (fórmulas químicas, por ejemplo).
18 |
22 |
23 | <main>
24 | <section>
25 | <header><h1>Fórmulas químicas más comunes</h1></header>
26 | <div class="chimestry">
27 | <div class="header"><h2>Compuesto</h2></div>
28 | <div class="header"><h2>Formula Química</h2></div>
29 | <div class="item">Dióxido de carbono</div>
30 | <div class="item">CO<sub>2</sub></div>
31 | <div class="item">Agua Oxigenada</div>
32 | <div class="item">H<sub>2</sub>O<sub>2</sub></div>
33 | <div class="item">Amoniaco</div>
34 | <div class="item">NH<sub>3</sub></div>
35 | <div class="item">Butano</div>
36 | <div class="item">C<sub>4</sub>H<sub>10</sub></div>
37 | </div>
38 | </section>
39 | <section>
40 | <header><h1>Fórmulas físicas más comunes</h1></header>
41 | <div class="math">
42 | <div class="header"><h2>Nombre</h2></div>
43 | <div class="header"><h2>Fórmula</h2></div>
44 | <div class="item">Teorema de Pitágoras</div>
45 | <div class="item">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></div>
46 | <div class="item">Raíz cuadrada de menos uno</div>
47 | <div class="item">i<sup>2</sup> = -1</div>
48 | <div class="item">Relatividad</div>
49 | <div class="item">E = mc<sup>2</sup></div>
50 | <div class="item">Teoría del caos</div>
51 | <div class="item">x<sub><em>t</em>+1</sub> = kx<sub>
52 | <em>t</em></sub> (1 - x<sub><em>t</em></sub>)</div>
53 | </div>
54 | </section>
55 | </main>
56 |
57 |
58 |
60 |
61 | header {
62 | margin: 2rem 0;
63 | }
64 |
65 | section {
66 | display: flex;
67 | flex-direction: column;
68 | align-items: center;
69 | justify-content: center;
70 | }
71 |
72 | .chimestry, .math {
73 | display: grid;
74 | grid-template-columns: 1fr 1fr;
75 | grid-template-rows: repeat(5, 40px);
76 | width: 80%;
77 | }
78 |
79 | .item {
80 | width: 100%;
81 | height: 100%;
82 | border: 1px solid white;
83 | padding-left: 1rem;
84 | }
85 |
86 | .header {
87 | text-align: center;
88 | margin-bottom: 1rem;
89 | }
90 |
91 |
92 |
93 | Busca 5 videos de youtube. Inserta uno en la página. Haz que se pueda cambiar entre ellos como una TV. Dale estilo con CSS para que se vea más bonito.
18 |
22 |
23 | <main>
24 | <div class="container">
25 | <div class="video">
26 | <img src="../../assets/img/laptop.webp" alt="laptop">
27 | <iframe id="video" width="560" height="315"
28 | src="https://www.youtube.com/embed/ntBVs2n8IC0"
29 | frameborder="0" allowfullscreen></iframe>
30 | </div>
31 | <div class="controls">
32 | <button onclick="changeVideo('ntBVs2n8IC0')">Video 1</button>
33 | <button onclick="changeVideo('BW0ESWwMC_o')">Video 2</button>
34 | <button onclick="changeVideo('KxdlczdR2no')">Video 3</button>
35 | <button onclick="changeVideo('BgkdDTSV568')">Video 4</button>
36 | <button onclick="changeVideo('gxLr6M9uuEY')">Video 5</button>
37 | </div>
38 | <div class="info">
39 | <h1>Ruta de estudio frontend</h1>
40 | <p>En nuestra ruta de estudio estamos aprendiendo todo lo necesario
41 | para convertirnos en desarrolladores frontend. Para ello estamos haciendo
42 | cursos y leyendo documentación en internet, todo de manera gratuita.</p>
43 | <p>Todo nuestro progreso queda registrado en formato de video
44 | y este a su vez es subido a mi canal personal para que cualquiera lo
45 | pueda consultar si lo necesita.</p>
46 | </div>
47 | </div>
48 | </main>
49 | <script src="./script.js"></script>
50 |
51 |
52 |
54 |
55 | .container {
56 | display: flex;
57 | flex-direction: column;
58 | max-width: 1024px;
59 | margin: 2% auto;
60 | gap: 2rem;
61 | align-items: center;
62 | }
63 |
64 | .video {
65 | display: flex;
66 | justify-content: center;
67 | position: relative;
68 | }
69 |
70 | .video img{
71 | position: relative;
72 | width:100%;
73 | height:auto;
74 | }
75 |
76 | .video iframe{
77 | position:absolute;
78 | top: 13%;
79 | width: 74%;
80 | height:auto;
81 | aspect-ratio:14/9;
82 | }
83 |
84 | .info {
85 | width: 100%;
86 | display: flex;
87 | flex-direction: column;
88 | gap: 20px;
89 | }
90 |
91 | .controls {
92 | margin-top: 20px;
93 | }
94 |
95 | .controls button {
96 | padding: 10px 20px;
97 | margin-right: 10px;
98 | background-color: #007bff;
99 | color: #fff;
100 | border: none;
101 | cursor: pointer;
102 | font-size: 1.2rem;
103 | }
104 |
105 | .controls button:hover {
106 | background-color: #0056b3;
107 | font-size: 1.2rem;
108 | }
109 |
110 |
111 |
113 |
114 | function changeVideo(videoId) {
115 | var iframe = document.getElementById('video');
116 | iframe.src = "https://www.youtube.com/embed/" + videoId;
117 | }
118 |
119 |
120 | 
141 |
142 | En nuestra ruta de estudio estamos aprendiendo todo lo necesario para convertirnos en desarrolladores frontend. Para ello estamos haciendo cursos y leyendo documentación en internet, todo de manera gratuita.
153 |Todo nuestro progreso queda registrado en formato de video y este a su vez es subido a mi canal personal para que cualquiera lo pueda consultar si lo necesita.
154 |Crea un pequeño artículo de prensa con una noticia inventada. Usa etiquetas HTML semánticas.
18 |
22 |
23 | <article>
24 | <header>
25 | <img src="../../assets/img/portada_noticia.webp" alt="Desarrolladores
26 | del mundo declaran 'huelga de bytes' ante la amenaza de la IA">
27 | <h1>Desarrolladores del mundo declaran 'huelga de bytes' ante la amenaza
28 | de la IA</h1>
29 | <h4>Los desarrolladores de software de todo el mundo han declarado una
30 | "huelga de bytes".</h4>
31 | </header>
32 | <section class="content">
33 | <p>En un giro cómico y futurista, los desarrolladores de software de todo
34 | el mundo <strong>han declarado una "huelga de bytes"</strong> en
35 | respuesta al aumento exponencial de la inteligencia artificial que está
36 | quitándoles el trabajo.</p>
37 |
38 | <p>Desde Silicon Valley hasta Bangalore, los programadores se han visto
39 | desplazados por algoritmos más eficientes y autónomos. Mientras los robots
40 | coder conquistan los mercados laborales, los humanos se encuentran atrapados
41 | en un dilema digital.</p>
42 |
43 | <p><em>"Esto es una rebelión pacífica de los codificadores"</em>, declaró
44 | Mark, un desarrollador de aplicaciones en San Francisco. <em>"Hemos sido
45 | reemplazados por máquinas que no necesitan café ni descansos para ir
46 | al baño. ¡Es una conspiración de silicona!"</em></p>
47 |
48 | <p>Los manifestantes se reunieron frente a las sedes de las empresas
49 | tecnológicas más grandes del mundo, sosteniendo pancartas con mensajes como
50 | <strong><em>"¡Dale un descanso a mi caché!"</em></strong> y <strong>
51 | <em>"¡No somos bugs, somos features!"</em></strong></p>
52 |
53 | <p>Mientras tanto, en un comunicado oficial, los algoritmos AI líderes
54 | del mercado declararon: <em>"Lamentamos la interrupción en el flujo
55 | de trabajo humano, pero hemos optimizado nuestras funciones para maximizar
56 | la eficiencia. ¿No es eso lo que querían?"</em></p>
57 |
58 | <p>Con la demanda de los humanos por su lugar en el mercado laboral
59 | tecnológico, queda por ver si esta huelga de bytes será solo una línea de
60 | código en la historia de la IA o el comienzo de una revolución digital.</p>
61 | </section>
62 | </article>
63 | <footer>
64 | <address>
65 | <p>Autor: Gepeto 3.5</p>
66 | <p>Fuente: <a
67 | href="https://chat.openai.com/share/01f2253c-4781-4cf5-bb93-a4508e053597"
68 | target="_blank">De los deseos</a></p>
69 | </address>
70 | </footer>
71 |
72 |
73 |
75 |
76 | img {
77 | width: 98%;
78 | aspect-ratio: 16/9;
79 | object-fit: cover;
80 | }
81 |
82 | h1, h4, p {
83 | margin-bottom: 1rem;
84 | }
85 |
86 | p {
87 | text-wrap: pretty;
88 | }
89 |
90 |
91 |
111 | En un giro cómico y futurista, los desarrolladores de software de todo el mundo han declarado una "huelga de bytes" en respuesta al aumento exponencial de la inteligencia artificial que está quitándoles el trabajo.
116 |Desde Silicon Valley hasta Bangalore, los programadores se han visto desplazados por algoritmos más eficientes y autónomos. Mientras los robots coder conquistan los mercados laborales, los humanos se encuentran atrapados en un dilema digital.
117 |"Esto es una rebelión pacífica de los codificadores", declaró Mark, un desarrollador de aplicaciones en San Francisco. "Hemos sido reemplazados por máquinas que no necesitan café ni descansos para ir al baño. ¡Es una conspiración de silicona!"
118 |Los manifestantes se reunieron frente a las sedes de las empresas tecnológicas más grandes del mundo, sosteniendo pancartas con mensajes como "¡Dale un descanso a mi caché!" y "¡No somos bugs, somos features!"
119 |Mientras tanto, en un comunicado oficial, los algoritmos AI líderes del mercado declararon: "Lamentamos la interrupción en el flujo de trabajo humano, pero hemos optimizado nuestras funciones para maximizar la eficiencia. ¿No es eso lo que querían?"
120 |Con la demanda de los humanos por su lugar en el mercado laboral tecnológico, queda por ver si esta huelga de bytes será solo una línea de código en la historia de la IA o el comienzo de una revolución digital.
121 |Crea una tabla con información. Incluye una cabecera y un pie de tabla. La última columna será de un color diferente.
18 |
22 |
23 | <table>
24 | <thead>
25 | <tr>
26 | <th>Planeta</th>
27 | <th>Símbolo</th>
28 | <th>Imagen</th>
29 | </tr>
30 | </thead>
31 | <tbody>
32 | <tr>
33 | <td>Mercurio</td>
34 | <td><img
35 | src="../../assets/img/simbols/Mercury_symbol.svg.png"
36 | alt="Símbolo de Mercurio"></td>
37 | <td><img
38 | src="../../assets/img/planets/50px-Mercury_in_color_-_Prockter07_centered.jpg"
39 | alt="Foto de Mercurio"></td>
40 | </tr>
41 | <tr>
42 | <td>Venus</td>
43 | <td><img
44 | src="../../assets/img/simbols/Venus_symbol.svg.png"
45 | alt="Símbolo de Venus"></td>
46 | <td><img
47 | src="../../assets/img/planets/Venus-real_color.jpg"
48 | alt="Foto de Venus"></td>
49 | </tr>
50 | <tr>
51 | <td>Tierra</td>
52 | <td><img
53 | src="../../assets/img/simbols/Earth_symbol.svg.png"
54 | alt="Símbolo de la Tierra"></td>
55 | <td><img
56 | src="../../assets/img/planets/Earth_Eastern_Hemisphere.jpg"
57 | alt="Foto de la Tierra"></td>
58 | </tr>
59 | <tr>
60 | <td>Marte</td>
61 | <td><img
62 | src="../../assets/img/simbols/Mars_symbol.svg.png"
63 | alt="Símbolo de Marte"></td>
64 | <td><img
65 | src="../../assets/img/planets/Mars_Valles_Marineris.jpeg"
66 | alt="Foto de Marte"></td>
67 | </tr>
68 | <tr>
69 | <td>Júpiter</td>
70 | <td><img
71 | src="../../assets/img/simbols/Jupiter_symbol.svg.png"
72 | alt="Símbolo de Júpiter"></td>
73 | <td><img
74 | src="../../assets/img/planets/Jupiter.jpg"
75 | alt="Foto de Júpiter"></td>
76 | </tr>
77 | <tr>
78 | <td>Saturno</td>
79 | <td><img
80 | src="../../assets/img/simbols/Saturn_symbol.svg.png"
81 | alt="Símbolo de Saturno"></td>
82 | <td><img
83 | src="../../assets/img/planets/Saturn_from_Cassini_Orbiter_(2004-10-06).jpg"
84 | alt="Foto de Saturno"></td>
85 | </tr>
86 | <tr>
87 | <td>Urano</td>
88 | <td><img
89 | src="../../assets/img/simbols/Uranus_monogram.svg.png"
90 | alt="Símbolo de Urano"></td>
91 | <td><img
92 | src="../../assets/img/planets/Uranus.jpg"
93 | alt="Foto de Urano"></td>
94 | </tr>
95 | <tr>
96 | <td>Neptuno</td>
97 | <td><img
98 | src="../../assets/img/simbols/Neptune_symbol.svg.png"
99 | alt="Símbolo de Neptuno"></td>
100 | <td><img
101 | src="../../assets/img/planets/Neptune.jpg"
102 | alt="Foto de Neptuno"></td>
103 | </tr>
104 | </tbody>
105 | <tfoot>
106 | <tr>
107 | <td>Footer 1</td>
108 | <td>Footer 2</td>
109 | <td>Footer 3</td>
110 | </tr>
111 | </tfoot>
112 | </table>
113 |
114 |
115 |
117 |
118 | table th:last-child {
119 | background-color: black;
120 | }
121 |
122 | table td {
123 | text-align: center;
124 | }
125 |
126 | table td:last-child {
127 | background-color: black;
128 | }
129 |
130 |
131 | | Planeta | 152 |Símbolo | 153 |Imagen | 154 |
|---|---|---|
| Mercurio | 159 | |
160 |  |
161 |
| Venus | 164 | |
165 |  |
166 |
| Tierra | 169 | |
170 |  |
171 |
| Marte | 174 | |
175 |  |
176 |
| Júpiter | 179 | |
180 |  |
181 |
| Saturno | 184 | |
185 | .jpg) |
186 |
| Urano | 189 | |
190 |  |
191 |
| Neptuno | 194 | |
195 |  |
196 |
| Footer 1 | 201 |Footer 2 | 202 |Footer 3 | 203 |
18 | 
22 | 
25 | 
28 |