Curso de Proyectos con HTML, CSS y JavaScript

Introducción

• Instructor: Jordan Alexander Cruz García
• Contenido del Curso:
  • Barra de navegación responsiva con menús desplegables.
  • Landing page responsiva con ventana modal personalizada.
  • Slider con texto e imágenes cambiantes al hacer clic en flechas.

Proyecto 1: Barra de Navegación Responsiva

Configuración inicial

• Iconos: Utilizar Boxicons para los iconos del menú y la flecha.
  • Menú: menu.svg con color blanco.
  • Flecha: arrow.svg con color blanco.
• Fuente: Google Fonte Poppins con pesos 300, 400 y 700.

Estructura HTML

• Barra de navegación (nav).
• Listado desordenado (ul) con clases menu-links y menu-item.
• Elementos de lista (li) con enlaces y submenús.
• Imágenes con iconos (menu.svg y arrow.svg).

CSS

• **Estilos generales: **
  • menu tiene fondo, color, tamaño.
  • menu-container con flexbox.
  • menu-links, menu-item con display flex y posicionamiento.
  • Transiciones y animaciones usando transition y clip-path.
• **Menú deseplgable: **
  • :hover para mostrar submenús.
  • Rotación de flechas.
  • Estilizado de enlaces (menu-link, menu-link-inside).
• Responsividad:
  • Media Queries para tamaño mínimo de 800px.
  • Mostrar menu-hamburger.
  • Estilos específicos para dispositivos móviles.

JavaScript

• Variables para obtener elementos (menu-items, menu-links, menu-hamburger).
• Función addClick: Eventos para mostrar/ocultar submenús.
• Resizing del navegador adapta el menú.

Proyecto 2: Slider con Imágenes y Textos

Configuración inicial

• Iconos: Boxicons para las flechas (arrow-left.svg, arrow-right.svg).
• Fuente: Google Fonts Raleway con pesos 300, 400 y 700.

Estructura HTML

• Contenedor principal: <div class="slider-container">.
• Flechas: <img> con IDs before y after.
• Cuerpos del slider: <section class="slider-body"> con clases slider-text, slider-subtitle, slider-review.
• Imágenes: Dentro de <figure> con clases slider-picture, slider-img.

CSS

• Estilos generales:
  • slider-container con grid display.
  • Estilizado de clases como slider-arrow, slider-body, slider-img, etc.
  • Estilos para transiciones y animaciones.
• Responsividad:
  • Media Queries para ajustar textos y tamaños de imagen.

JavaScript

• Variables para slider e iconos.
• Función changePosition para mover entre sliders.
• Manejo de clases y datasets para mostrar/ocultar sliders.

Proyecto 3: Modal Personalizado

Configuración inicial

• Ilustraciones: undraw.co para ilustraciones SVG.
• Fuente: Google Fonts Urbanist con pesos 300, 400, 500 y 700.

Estructura HTML

• Modal contenedor: <section class="modal">.
• Contenedor interno: <div class="modal-container">.
• Elementos internos: Imagen, título, párrafo, y botón de cerrar.

CSS

• Estilos generales:
  • modal con posicionamiento fixed, color de fondo, y opacidad para animación.
  • modal-container con grid display, centrado, padding.
  • Estilización de título, párrafo, botón, y transición de opacidad.
• **Animaciones: **
  • Uso de transition y transform para animar la entrada/salida del modal.
  • Variables CSS para coordinar las animaciones.
• Responsividad:
  • Ajustes de tamaños y padding para dispositivos móviles.

JavaScript

• Variables para seleccionar elementos (modal, open y close).
• Agregar/quitar clases para mostrar/ocultar modal.
• Funciones para manejar eventos y transiciones.

Conclusión

• Descarga: Proyectos disponibles en la descripción del video.
• Curso extra: Más de 9 horas de CSS desde cero hasta avanzado.