🖥️

Curso de Proyectos con HTML, CSS y JavaScript

Jul 18, 2024

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.