Lo que aprenderás
- Aprende a crear tus propios diseños únicos y personalizados usando la última versión Bootstrap 4.
- Aprenderá a personalizar los componentes de Bootstrap 4 y adaptarlos a nuestros requerimientos.
- Aprenderá a insertar iconos de Font Awesome (versión 5).
- Aprenderás HTML5 + CSS3 (Desarrollo de un Proyecto Real).
- Accederás a más de 15 horas de grabación en HD, con contenido claro y ejemplos didácticos.
- Podrás acceder al contenido desde tu móvil, Tablet o PC (24/7).
Temario del curso
-
Módulo 1: Introducción al curso
-
Módulo 2: Explorando el componente "Forms"
- Introducción al Componente Forms
- Aclarando conceptos sobre formularios (Parte 1)
- Aclarando conceptos sobre formularios (Parte 2)
- Regla 1: Todos los campos tiene que tener la clase «.form-control»
- Regla 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)
-
Módulo 3: Creando el Encabezado Responsive
- Definiendo variables y tipografía del sitio (Parte 1)
- Definiendo variables y tipografía 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)
-
Módulo 4: Creando el Slide de imágenes 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
- Configuración los parámetros de Swipe (Parte 1)
- Configuración los parámetros de Swipe (Parte 2)
- Configuración los parámetros 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
-
Módulo 5: Creando la sección "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 Instalación de VenoBox
- Inicializando VenoBox
- Definiendo parámetros en VenoBox (Parte 1)
- Definiendo parámetros en VenoBox (Parte 2)
-
Módulo 6: Creando la sección "Te ayudamos"
-
Módulo 7: Creando la sección "Premios"
-
Módulo 8: Creando la sección "Nuestra APP"
-
Módulo 9: Creación de la sección "Contáctanos"
- Analizando la estructura del contenido
- Creando el encabezado de la sección (Parte 1)
- Creando el encabezado de la sección (Parte 2)
- Creando el encabezado de la sección (Parte 3)
- Creando la sección detalles de contacto (parte 1)
- Creando la sección detalles de contacto (parte 2)
- Creando la sección detalles de contacto (parte 3)
- Creando los campos del formulario (parte 1)
- Creando los campos del formulario (parte 2)
- Creando los campos del formulario (parte 3)
- Creando los campos del formulario (parte 4)
- Creando el campo enviar
- Creando el selector de fecha con Datepicker (Parte 1)
- Creando el selector de fecha con Datepicker (Parte 2)
- Configurando el selector de fecha Datepicker (Parte 1)
- Configurando el selector de fecha Datepicker (Parte 2)
- Configurando el selector de fecha Datepicker (Parte 3)
- Creando el selector de hora con Timepicker
- Configurando el selector de hora con Timepicker
- Personalizando el Datepicker y el Timepicker
- Introducción a Parsley.js
- Descarga e instalación de Parsley.js
- Metodo rápido para ejecutar Parsley.js
- Método completo para ejecutar Parsley.js
- Comportamiento de Parsley.js
- Tipos de validaciones de Parsley.js
- Mostrando un mensaje de validación genérico
- Mostrando mensajes según el tipo de validación (Parte 1)
- Mostrando mensajes según el tipo de validación (Parte 2)
- Integrando Bootstrap 4 con Parsley.js
- Optimizando el formulario para diferentes contextos
-
Módulo 10: Creación de la sección "Pié de página"
- Creando la estructura HTML del footer (Parte 1)
- Creando la estructura HTML del footer (Parte 2)
- Creando un color de fondo con un Pseudo Elemento
- Aplicando estilos al contenido de la primera columna
- Creando los enlaces secundarios
- Optimizando el diseño para el contexto MD (Parte 1)
- Optimizando el diseño para el contexto MD (Parte 2)
- Optimizando el diseño para el contexto XL
-
Módulo 11: Detalles finales
- Creando un encabezado fijo con Stickit.js
- Configurando Stickit.js (Parte 1)
- Configurando Stickit.js (Parte 2)
- Creando el efecto Scroll con page-scroll-to-id.js
- Configurando Page-scroll-to-id.js
- Estilos CSS específicos con Css_browser_selector.js (Parte 1)
- Estilos CSS específicos con Css_browser_selector.js (Parte 2)
- Instalando Fuentes de Google y palabras finales
Descripción
En este curso de bootstrap nos trazamos como objetivo, crear un sitio web, tomando como referencia las mejores plantillas de «Template Monster«. Template Monster es el mejor directorio de plantillas web, en donde se comercializan plantillas profesionales de gran calidad.
Así que prepárate para pasar al siguiente nivel de Bootstrap. Te aseguro, que este no es un curso teórico, ni con clases aburridas. Aquí aprenderás, desarrollando un proyecto web real desde 0.
¿QUÉ ES BOOTSTRAP 4?
Bootstrap es el framework de CSS, HTML y JavaScript más popular, que nos permite desarrollar sitios web que se ajustan a cualquier resolución y dispositivo. Y esto lo consigue, ya que incorpora un potente Sistema de columnas Responsive, basado en CSS y a la gran cantidad de componentes que incluye.
¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO?
El curso se divide en varias secciones. Empezamos con la instalación de las herramientas necesarias para trabajar, luego realizamos la descarga e instalación rápida de Bootstrap 4 en nuestra PC.
Después procedemos a codificar el diseño del sitio usando Bootstrap 4. Allí entenderán por fin y de una vez por todas, la razón de muchas clases complejas de Bootstrap. Verás como exprimiremos al máximo el sistema de columnas de Bootstrap. Crearemos iconos utilizando la última versión de Font Awesome.
Luego crearemos un menú mobil usando el componente Navbar (y lo modificaremos). A continuación creamos Slides de imágenes, ventanas modales para la carga de videos en Youtube. Instalaremos plugins para Bootstrap que nos permitan crear efectos «Parallax» con las imágenes y muchos más.
Luego nos enfocamos en la creación de formularios usando el componente Forms de Bootstrap 4. Descubriremos todos los secretos que esconde el componente Forms y los aplicaremos en el diseño de nuestros formularios.
Paso seguido, implementaremos algunos Script para generar diferentes efectos en nuestro sitio, como «Contador animado de números», «Videos en ventanas modales», «Parallax en imágenes», etc.
Te invito a que veas cualquiera de las clases que están gratuitas antes de comprar el curso y estoy seguro que desearás ver el resto de este entrenamiento.
Cursos Relacionados
Instructor
Erick Mines
- 33 cursos
- 231188 estudiantes
