Introducción al curso
  • Descarga de archivos que usaremos en este curso
  • Requisitos 1 (Programas necesario)
  • Requisitos 2 (Extensiones para VS Code)
  • Creando la estructura de nuestro sitio Web
  • Integrando Bootstrap en nuestro proyecto
  • Integrando y personalizando Font Awesome 5
Explorando el componente "Forms"
  • Introducción al Componente Forms
  • Aclarando conceptos sobre formularios (Parte 1)
  • Aclarando conceptos sobre formularios (Parte 2)
  • Regla de oro 1: Todos los campos tiene que tener la clase ".form-control"
  • Regla de oro 2: Agrupamos los campos dentro de una clase ".form-group"
  • Regla 3: Tamaño de los campos con "form-control-lg" y "form-control-sm"
  • Regla 4: Tamaño de los Label con ".col-form-label-sm" y ".col-form-label-lg"
  • Regla 5: Creamos texto de ayuda a nuestros campos con al clase ".form-text"
  • Ejercicio 1 - Creando un formulario de login (parte 1)
  • Ejercicio 1 - Creando un formulario de login (parte 2)
  • Regla 6: Encerramos los botones de opción en una clase .form-check
  • Regla 7: Encerramos las casillas de verificación en una clase .form-check
  • Regla 8: Creamos Checkboxs y Radios en linea con la clase .form-check-inline
  • Regla 9: Creamos diseños avanzados para los campos con INPUT GROUP (parte 1)
  • Regla 9: Creamos diseños avanzados para los campos con INPUT GROUP (parte 2)
  • Ejercicio 2 - Creando una caja de búsqueda
  • Ejercicio 3 - Formulario de contacto (parte 1)
  • Ejercicio 3 - Formulario de contacto (parte 2)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 1)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 2)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 3)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 4)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 5)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 6)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 7)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 8)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 9)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 10)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 11)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 12)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 13)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 14)
  • Regla 10 - Podemos crear 3 diseños de formularios (parte 15)
Creando el Encabezado Responsive
  • Definiendo variables y tipografia del sitio (Parte 1)
  • Definiendo variables y tipografia del sitio (Parte 2)
  • Definiendo estilos para Primary y Secondary
  • Creando la estructura HTML básica de la sección
  • Creando la estructura para los botones de redes sociales
  • Creando los estilos para los botones de redes sociales
  • Creando el diseño para pantallas de mayor tamaño
  • Colocando el logo y telefonos responsives (parte 1)
  • Colocando el logo y telefonos responsives (parte 2)
  • Creando la estructura del menú de navegación
  • Creando el boton móvil
  • Personalizando el boton móvil
  • Creando los enlaces del menú
  • Creando estilos a los enlaces del menu principal (Parte 1)
  • Creando estilos a los enlaces del menu principal (Parte 2)
  • Creando estilos a los enlaces del menu principal (Parte 3)
  • Trabajando con la clase BTN
  • Personalizando la clase btn-primary (Parte 1)
  • Personalizando la clase btn-primary (Parte 2)
  • Personalizando la clase btn-primary (Parte 3)
  • Personalizando la clase btn-primary (Parte 4)
  • Personalizando la clase btn-primary (Parte 5)
  • Insertando funciones JAVASCRIPT al menú (Parte 1)
  • Insertando funciones JAVASCRIPT al menú (Parte 2)
  • Insertando funciones JAVASCRIPT al menú (Parte 3)
Creando el Slide de imagenes con Swipe
  • Introducción a Swipe
  • Instalación de Swipe (Parte 1)
  • Instalación de Swipe (Parte 2)
  • Creando la estructura de la animación (Parte 1)
  • Creando la estructura de la animación (Parte 2)
  • Estilos CSS iniciales para los Slides
  • Configuracion los parametros de Swipe (Parte 1)
  • Configuracion los parametros de Swipe (Parte 2)
  • Configuracion los parametros de Swipe (Parte 3)
  • Personalizando la apariencia de Swipe (Parte 1)
  • Personalizando la apariencia de Swipe (Parte 2)
  • Optimizando Swipe para diferentes tamaños de pantallas
Creando la seccion "Bienvenidos"
  • Implementando el sistema de columnas (Parte 1)
  • Implementando el sistema de columnas (Parte 2)
  • Optimizando la sección en diferentes tamaños de pantallas
  • Estilizando el boton play del reproductor (Parte 1)
  • Estilizando el boton play del reproductor (Parte 2)
  • Estilizando el boton play del reproductor (Parte 3)
  • Estilizando el boton play del reproductor (Parte 4)
  • ¿Que es VenoBox?
  • Descarga e Instalacion de VenoBox
  • Inicializando VenoBox
  • Definiendo parametros en VenoBox (Parte 1)
  • Definiendo parametros en VenoBox (Parte 2)
Creando la sección "Te ayudamos"
  • Creando la estructura del al sección
  • Descarga e instalación de Jarallax
  • Definiendo el tipo de imagen
  • Cargando múltiples imágenes con PICTURE
  • Configurando los parametros de Jarallax
  • Rotando el diseño con Skew