IU con Modo Oscuro
IU con Modo Oscuro
Una IU con Modos Oscuro y Claro es una aventura de código pesada en HTML y CSS con una cantidad muy pequeña de JavaScript para alternar los modos claro y oscuro respectivamente.
Creado: 11/06/2023 por Dustin Usey
Nivel de habilidad: intermedio
Temas utilizados:
Tiempo estimado de finalización: 5 horas
Crea la página de inicio para el marco de desarrollo web ficticio "Lightz.js", un marco de vanguardia. El diseño enfatiza la estética minimalista, la navegación intuitiva y elementos claros de llamada a la acción.
Conceptos Básicos de HTML
Aprende HTML (Lenguaje de Marcas de Hipertexto), el idioma común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web.
Conceptos Básicos de CSS
Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.
Diseño de Diseño CSS Flexbox
Flexbox es un conjunto de propiedades de CSS que te proporciona una forma flexible de diseñar contenido.
Diseño de Diseño CSS Móvil Primero
Practica el uso de técnicas de diseño de CSS como CSS Reset con Normalize, un contenedor de diseño, un pie de página fijo y contenido centrado con un encabezado de ancho completo.
Selectores CSS
Además de las formas comunes de seleccionar elementos con selectores de tipo, ID y clase, podemos dirigirnos a elementos según sus atributos, posición en el documento HTML, incluso su relación con otros elementos.
Diseño de Cuadrícula CSS
CSS Grid Layout proporciona una forma integrada y más eficiente de diseñar diseños basados en cuadrículas en el navegador.
Fundamentos de JavaScript
En este curso, aprenderás los conceptos fundamentales de programación y la sintaxis del lenguaje de programación JavaScript.
Interactuando con el DOM
Junto con la selección de elementos DOM en JavaScript, también podemos escribir código que les dé comportamiento a los elementos. En este curso, primero exploraremos cómo observar la interacción y responder usando el método addEventListener.
-
0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
-
1
Usa CSS Flexbox o Grid para diseñar los elementos en la página.
-
2
Usa elementos semánticos para estructurar la página, garantizando la accesibilidad y la optimización para SEO.
-
3
Usa variables de CSS para almacenar la paleta de colores.
-
4
Usa JavaScript para alternar entre los modos claro y oscuro.
-
5
Desafío Extra: Haz que la página sea receptiva para dispositivos móviles y tabletas.
-
6
Desafío Extra: Usa Font Awesome para añadir iconos a la página en lugar de los archivos PNG proporcionados.