HTML 30-day challenge
¡Hola! Soy ManzDev, desarrollador web al que le encanta el frontend. Aquí tienes una lista de retos para tus primeros pasos en el desarrollo web. ¡No te olvides seguirme!
Día 3
Construye una página con un párrafo que tenga enlaces internos y externos (a otros sitios web).
EnlacesDía 4
Valida el código HTML de tus ejemplos anteriores (y los siguientes a partir de ahora).
Validación HTMLDía 7
Coloca una imagen en formato JPEG-XL. Si el navegador no la soporta, que use AVIF. Sino, que use JPG.
FallbacksDía 9
Crea un pergamino con una lista de objetos, donde se numere con números romanos (mayúsculas).
ListasDía 10
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.
IframesDía 12
Crea un slider que permita seleccionar un número entre 1-50 y lo muestre en vivo al cambiar. Requiere algo de Javascript.
Input rangeDía 13
Crea una barra medidora que muestre los tickets vendidos en un cine (Ejemplo: 64/100 tickets vendidos).
MedidoresDía 14
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.
PreformateoDía 15
Crea una página con un video MP4 (no de youtube), que muestre una imagen de portada antes de darle a reproducir.
VideosDía 16
Muestra un texto con el atajo de teclado CTRL+ALT+SUPR y dale estilo para que parezcan teclas.
KeyboardDía 17
Crea una card de usuario: username como título, un avatar de imagen, edad, país, nacimiento y enlace a su web.
Tabla HTML5Día 18
Crea un pequeño artículo de prensa con una noticia inventada. Usa etiquetas HTML semánticas.
SemánticaDía 19
Crea una tabla con información. Incluye una cabecera y un pie de tabla. La última columna será de un color diferente.
TablasDía 20
Crea un formulario para dejar un comentario en una página: Usuario y comentario de texto.
TextareaDía 21
Crea una lista desplegable donde se pueda seleccionar entre 3 grupos de productos ficticios.
SelectDía 22
En la lista anterior, permite al usuario introducir opciones personalizadas (no sólo las de la lista) y filtrar las opciones existentes.
DatalistDía 24
Crea un formulario de registro que valide si el username escrito es válido (sólo letras y números) o no.
PatternDía 25
Crea una galería de fotos. Asegúrate que no se cargan si están fuera de la región visible del navegador.
ImágenesDía 26
Crea un mensaje emergente al pulsar un botón, que desaparezca al pulsar fuera del mensaje.
PopoverDía 27
Crea una serie de etiquetas que permitan mostrar como miniatura una imagen en redes sociales.
OpenGraphDía 28
Crea una ventana modal que bloquee la interación con otros botones. Requiere un poco de Javascript.
DialogDía 29
Crea un sistema de pestañas (tabs) para mostrar información. Necesita algo de Javascript.
HiddenDía 30
Carga una librería Javascript de confetti y lánzalo cuando pulses en un botón. Requiere algo de Javascript.
Script