Este quiz sobre HTML Semántico y CSS consiste en observar muy bien el diseño de una parte del menú de navegación de YouTube y posteriormente analizar cuál código de HTML Semántico y de CSS sería el más indicado para lograr replicar el diseño observado.
A continuación encontrarás:
En la siguiente imagen encontrarás una sección del menú de navegación de YouTube. Y luego las opciones a, b y c con el código en imágenes y Codepen. Tu desafío en este quiz es elegir la opción que mejor resuelva el objetivo antes de ver la respuesta correcta.
💡 Pista: recuerda el HTML Semántico.
A nivel de HTML Semántico, si usas el elemento ul cuando necesitas una lista no ordenada (o también el ol cuando necesites una lista ordenada), los lectores de pantalla:
Otro aspecto a considerar es la estructura de padres e hijos. Para ello hacer un esquema mental o un dibujito puede ayudar mucho en esta construcción, ya que de ello depende que nuestro código CSS funcione a la perfección, que no nos enredemos tanto y también que alinear elementos sea más sencillo.
¡Cuéntanos en los comentarios cómo te fue en este quiz! ¡Nos vemos en el próximo!
#NuncaParesDeAprender 💚
Que buen post para recalcar la importancia del HTML semántico ✅
Buen post para repasar 😎
Lo leo y siento que el quiz está “muy fácil”. Creo que es un reflejo de que he estado aprendiendo en los cursos que he tomado de FrontEnd 😀.
👀
Muchas gracias por traer este tipo de contenido en post. Además de entretenido, ayuda a reforzar o aprender la importancia del HTML semántico
Tal vez si además de esto, se envuelve la lista en una etiqueta
<nav>tendría más semántica. 🤔En el B, el color de los iconos se puede cambiar de manera diferente? osea si lo quisiera hacer desde el css. Coloque una clase icon a las img
HTML:
<header>
<ul>
<li>
<img class=“icon” src="./images/exterior.png" alt=“casa”>
<p>Home</p>
</li>
<li>
<img class=“icon” src="./images/compass–v2.png" alt=“brujula”>
<p>Explore</p>
</li>
<li>
<img class=“icon” src="./images/circled-play–v1.png" alt=“shorts”>
<p>Shorts</p>
</li>
<li>
<img class=“icon” src="./images/tv-show.png" alt=“television”>
<p>Subscriptions</p>
</li>
</ul>
CSS:
@import url(“https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap”);
body {
color: white;
font-family: “Roboto”, sans-serif;
}
ul {
background: black;
list-style: none;
padding: 0;
width: 240px;
}
ul li {
display: flex;
align-items: center;
height: 40px;
padding: 0 24px;
}
ul li img {
width: 24px;
margin: 0 24px 0 0;
}
ul li p {
font-size: 14px;
}
.icon {
color: white;
width: 24px;
height: 24px;
}
excelente post, si pude resolverlo
¡Severo!
Muy buen post!
Justo estoy haciendo el curso y me parece súper este post para ir reforzando temas
🐘Excelente material de lectura. Que se repita x100!