The Pokédex.
- Coachs Desarrollo
- 23 may 2024
- 3 Min. de lectura
Introducción: Este código HTML crea una página web dedicada a mostrar información sobre diferentes Pokémon. Veamos más a fondo los elementos y su funcionalidad:
<script>: Esta etiqueta se utiliza para cargar scripts externos en la página. En este caso, se carga la biblioteca Boxicons desde un CDN (Content Delivery Network o Red de Distribución de Contenido, es una red global de servidores distribuidos estratégicamente en diferentes ubicaciones del mundo. Su objetivo principal es acelerar la entrega de contenido web a los usuarios finales.).
<link>: Esta etiqueta se utiliza para vincular recursos externos con el documento HTML. En este caso, se vincula una hoja de estilo CSS y un icono.
<head>: Esta sección contiene metadatos sobre el documento HTML, como el conjunto de caracteres utilizado (<meta charset="UTF-8" />), la configuración de la ventana gráfica (<meta name="viewport" content="width=device-width, initial-scale=1.0" />), referencias a recursos externos como scripts y hojas de estilo.
<header>: Esta sección contiene el encabezado de la página, que generalmente incluye elementos como el logotipo, la barra de navegación.
<ul>, <li>, <a>: Estas etiquetas se utilizan para crear listas y enlaces en HTML. Se utilizan comúnmente para la navegación, como en el caso de los elementos de la barra de navegación.
<section>: Esta etiqueta se utiliza para dividir el contenido en secciones temáticas o funcionales. En este caso, se utiliza para dividir el contenido en secciones de "Pokémons" y "Mas Pokémons".
<div>: Esta etiqueta se utiliza como un contenedor genérico para agrupar y estructurar el contenido. En este caso, se utiliza para agrupar elementos relacionados, como los detalles de cada Pokémon.
<box-icon>: Esta etiqueta forma parte de la biblioteca (libreria) Boxicons y se utiliza para mostrar iconos en la página web. En este caso, se utiliza para mostrar un icono de "castle"como parte del logotipo en la barra de navegación.
<img>: Esta etiqueta se utiliza para incrustar imágenes en la página web. En este caso, se utiliza para mostrar las imágenes de los Pokemons.
ATT: Dentro de cada sección de Pokémon (<section>), se utilizan elementos como <div>, <h2>, <img>, <p>, y <a> para presentar información sobre los Pokémon, como sus nombres, números de identificación, tipos, habilidades y posiblemente estadísticas adicionales.
Además, se observa el uso de clases (class) en varios elementos HTML para aplicar estilos específicos de diseño y presentación, como alineación de texto, tamaños de fuente, colores y márgenes.
Ejemplo:
{las clases pueden darle un nombre propio no es necesario guiarse exactamente de los nombres de las clases que están en las imágenes de ejemplo}
Variables CSS (--color-1, --color-2, etc.): Estas son variables CSS personalizadas definidas en la pseudoclase (:root). Se utilizan para almacenar valores como colores que pueden ser reutilizados en todo el documento CSS.
background-image: Esta propiedad se utiliza para establecer una imagen de fondo para el elemento(section). La imagen se repite en toda la área del elemento.
min-width y height: Estas propiedades definen el ancho mínimo y la altura de los elementos (section y .nav), asegurando que ocupen al menos el tamaño especificado.
fill: Utilizado para establecer el color de relleno de los elementos svg, que son gráficos vectoriales escalables.
scroll-behavior, overflow, overflow-x: Propiedades relacionadas con el desplazamiento y el manejo del desbordamiento de contenido en .container-slider-pokemons.
scroll-snap-align, scroll-snap-type: Controla el desplazamiento suave y el comportamiento de desplazamiento de deslizamiento (scroll snapping) en .container-slider-pokemons.
@media screen and (max-width: 950px): Esta regla de medios se aplica cuando el ancho de la pantalla es igual o menor a 950 píxeles. Dentro de esta regla, se establece que la clase .container-target-pokemons tendrá un diseño de cuadrícula con dos columnas, cada una de 320 píxeles de ancho.
@media screen and (max-width: 850px): Esta regla de medios se aplica cuando el ancho de la pantalla es igual o menor a 850 píxeles. Dentro de esta regla, se modifica el diseño de .container-target-pokemons para que tenga una sola columna de 320 píxeles de ancho. Además, se establece que la clase .container-slider-pokemons no tendrá relleno (padding: 0), lo que puede ser una manera de ajustar su diseño en pantallas más pequeñas.
@media screen and (max-width: 425px): Esta regla de medios se aplica cuando el ancho de la pantalla es igual o menor a 425 píxeles. Dentro de esta regla, se establece que los elementos con la clase .slider-pokemons tendrán un ancho mínimo de 304 píxeles. Esto puede ser útil para garantizar que los elementos no se compriman demasiado en pantallas muy estrechas.
Coach: Julián Charris