Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web

Aprende La nueva versión de Bootstrap con SASS - Además incluye: Gulp, Parcel, NPM, Performance y Buenas Practicas!

4.86 (1089 reviews)
Udemy
platform
Español
language
Web Development
category
5,204
students
13 hours
content
Mar 2022
last update
$59.99
regular price

What you will learn

Aprender desarrollo de temas de WordPress con Bootstrap

Aprende el Nuevo Framework Bootstrap 4, un framework cuyas posibilidades son infinitas

Integrar PHP con Bootstrap 4

Crear un sitio web completo con Bootstrap 4

Entender el Framework más popular del mundo, Bootstrap 4

Enviar formularios de contacto con Bootstrap, AJAX y PHP

Crear un tema de WordPress a partir de nuestro diseño

Convertir un sitio web estático en HTML a uno dinámico con WordPress

Description

ACTUALIZADO Bootstrap 5 y SASS para el año 2022!

Bootstrap es el framework HTML5, CSS3 y JavaScript más popular para crear sitios web responsive.

La nueva versión Bootstrap 5 cuenta con muchos elementos nuevos, aprenderás las nuevas clases, sintaxis y componentes en este curso.

Además te mostraré como extender el framework:

  • Incluiremos PHP a nuestro sitio web para reutilizar secciones del sitio web.

  • Conectar e imprimir los resultados de una Base de Datos MySQL con PHP dentro de Bootstrap.

  • Crear un formulario de Contacto con AJAX y PHP

Al finalizar este curso podrás comenzar a crear cualquier sitio web.

Además se incluyen 6 archivos de Photoshop para ser convertidos en Sitio web con Bootstrap.

========================================

¿Qué dicen los alumnos de este curso?

"En este curso pude visualizar y entender sobre el uso que se le puede dar al bootstrap 5. Útil lo aconsejo." -  Carlos Dario Flores Nuñez

"El mejor curso de bootstrap que podrás encontrar en la red, soporte todo el tiempo contenido siempre actualizado." - Roberto Maestre

ACTUALIZADO!

7 Increibles Proyectos fueron agregados, más de 100 videos fueron agregados! los diseños incluyen:

  • Sitio web para un concierto de música

  • Clon de Fiverr

  • Creación de un panel de administración

  • Sitio web para una inmobiliaria

  • Diseño de una tienda virtual

  • Diseño para una escuela de cocina

  • Diseño para una empresa de arquitectura

========================================

Bootstrap es el framework HTML5, CSS3 y JavaScript más popular para crear sitios web responsive.

La nueva versión Bootstrap 4 cuenta con muchos elementos nuevos, aprenderás las nuevas clases, sintaxis y componentes en este curso.

Además te mostraré como extender el framework:

  • Incluiremos PHP a nuestro sitio web para reutilizar secciones del sitio web.

  • Conectar e imprimir los resultados de una Base de Datos MySQL con PHP dentro de Bootstrap.

  • Crear un formulario de Contacto con AJAX y PHP

Al finalizar este curso podrás comenzar a crear cualquier sitio web.

Además se incluyen 6 archivos de Photoshop para ser convertidos en Sitio web con Bootstrap.

========================================

¿Qué dicen los alumnos de este curso?

"En este curso pude visualizar y entender sobre el uso que se le puede dar al bootstrap 4. Útil lo aconsejo." -  Carlos Dario Flores Nuñez

"El mejor curso de bootstrap que podrás encontrar en la red, soporte todo el tiempo contenido siempre actualizado." - Roberto Maestre

ACTUALIZADO!

7 Increibles Proyectos fueron agregados, más de 100 videos fueron agregados! los diseños incluyen:

  • Sitio web para un concierto de música

  • Clon de Fiverr

  • Creación de un panel de administración

  • Sitio web para una inmobiliaria

  • Diseño de una tienda virtual

  • Diseño para una escuela de cocina

  • Diseño para una empresa de arquitectura

========================================

Bootstrap es el framework HTML5, CSS3 y JavaScript más popular para crear sitios web responsive.

La nueva versión Bootstrap 4 cuenta con muchos elementos nuevos, aprenderás las nuevas clases, sintaxis y componentes en este curso.

Además te mostraré como extender el framework:

  • Incluiremos PHP a nuestro sitio web para reutilizar secciones del sitio web.

  • Conectar e imprimir los resultados de una Base de Datos MySQL con PHP dentro de Bootstrap.

  • Crear un formulario de Contacto con AJAX y PHP

Al finalizar este curso podrás comenzar a crear cualquier sitio web.

Además se incluyen 6 archivos de Photoshop para ser convertidos en Sitio web con Bootstrap.

========================================

¿Qué dicen los alumnos de este curso?

"En este curso pude visualizar y entender sobre el uso que se le puede dar al bootstrap 5. Útil lo aconsejo." -  Carlos Dario Flores Nuñez

"El mejor curso de bootstrap que podrás encontrar en la red, soporte todo el tiempo contenido siempre actualizado." - Roberto Maestre


Content

Introducción al Curso

El Proyecto Final
Los Otros 7 PROYECTOS
Los Archivos Photoshop
El código del Curso
Imágenes para el Curso

Básicos de Bootstrap: Primeros Pasos

Primeros pasos con el Grid
Otras clases para el Grid
Clases para Tipografía
Otras clases para Tipografía
Clases para imágenes
Trabajando con Tablas
Creando Botones con Bootstrap
Componentes en Bootstrap: Card
Componentes en Bootstrap: Carousel
Agregando contenido extra al Carousel
Agregando texto al Carousel
Componentes en Bootstrap: Collapse o Accordion
Componentes en Bootstrap: Modals
Componentes en Bootstrap: Menus
Componentes en Bootstrap: ScrollSpy
Componentes en Bootstrap: ToolTip
Componentes en Bootstrap: Dropdown
Componentes en Bootstrap: Jumbotron
Masonry con Cards
Bootstrap: Margins y Paddings

PROYECTO: Comenzando el Proyecto y página de Inicio

Descargando el Template para Iniciar con Bootstrap
Agregando el Logotipo
Creando el Menú de Redes Sociales
Creando el Menú Principal
Creando un Menú responsive
Estilos a la navegación principal
Creando el Slider Principal
Finalizando el Slider
Agregando una fuente de Google Fonts
Creando la sección del nuevo sitio
Estilos a la sección de nuevo sitio
Creando la sección de servicios
Estilos a los servicios
Finalizando los estilos
Creando la sección de Horarios
Estilos a los horarios
Creando la sección de Productos
Estilos a los Productos
Trabajando con la sección de Citas
Estilos a la sección de Citas
Creando el Footer

Creando las secciones Internas - Nosotros

Creando un Template para las páginas Internas
Creando la imagen principal
Creando la página de nosotros
Creando una Galería de imágenes
Imprimiendo los horarios de atención

Creando la sección de Servicios

Creando un accordion de servicios
Estilos a la sección de servicios
Creando el sidebar de servicios
Estilos al cupón de descuento

Creando la sección de Productos

Creando la página de productos
Mostrando los productos con Masonry
Creando la sección para un producto

Creando la sección de Contacto

Creando la página de Contacto
Validación al Formulario con Bootstrap
Estilos al Formulario

Agregando PHP + MySQL a nuestro sitio

Ambientes de Desarrollo necesarios y moviendo el Proyecto
Creando los Templates de Header, Navegación y Footer
Agregando el Footer a todas las páginas
Creando una base de datos con phpmyadmin
Insertando registros a la base de datos
Conectando la base de datos con nuestra página web
Creando una función para consultar la base de datos
Imprimiendo los resultados
Mostrando los Productos en la sección de Productos
Filtrando las URL's
Creando una función para mostrar un solo producto
Mostrando la información de un solo producto en su template
Creando una página 404
Creando un template para las citas e imprimiendo titulos diferentes en páginas
Mostrando la página actual
Cachear las consultas MySQL y páginas PHP

Enviando correos desde el formulario de Contacto

Iniciando el llamado a Ajax
Leyendo los valores con JavaScript y enviandolos a ajax

Creando un Tema de WordPress a partir de nuestro diseño

Creando un Proyecto con Local de Flywheel
Creando nuestro theme

Tema de WordPress: Trabajando con el Header

Cargando la hoja de estilo principal
Agregando el resto de hojas de estilos
Mostrando el Logotipo
Creando el Menu de Redes Sociales
Imprimiendo el Menú de Redes Sociales
Imprimiendo el Menú Principal
Agregando los atributos necesarios para el menú principal

Tema de WordPress: Trabajando con el Footer

Creando una Zona de Widgets en el Footer
Finalizando las Zonas de Widgets
Cargando los Scripts en el Footer

Tema de WordPress: Desarrollando la sección Nosotros

Creando el Template para páginas
Primeros pasos para crear una galería
Imprimiendo la galería dentro de los Modals
Finalizando la galería
Creando una tabla para el horario
Imprimiendo el horario de trabajo
Creando un Widget para el Horario

Tema de WordPress: Creando la página de Servicios

Creando el Template de Servicios
Imprimiendo la información de los Servicios
Imprimiendo un Widget en la barra lateral

Tema de WordPress: Creando la sección de Productos

Creando un Template sin barras laterales
Generando un Custom Post Type para los Productos
Cargando los Productos
Creando un shortcode para mostrar los productos
Creando el Template para mostrar un producto

Tema de WordPress: Trabajando con la sección de Contacto

Creando un template para el Contacto
Finalizando la sección de enviar correo

Tema de WordPress: Desarrollando la página principal

Creando el Template para la página principal
Trabajando con el Slider para hacerlo dinamico
Finalizando el Slider
Imprimiendo el Slogan en la página principal
Creando los campos para las imágenes principales
Realizando una consulta para mostrar ciertas páginas
Imprimiendo un Widget con código
Imprimiendo los Productos en la página principal
Mostrando la sección de realizar una cita
Imprimiendo títulos dinámicos a todas las páginas
Tomando un Screenshot al theme

PROYECTO2 : Creando un Sitio Web para una inmobiliaria

¿Qué vamos a construir?
Visual Studio Code y arrancando el Proyecto
Creando el Slider
Finalizando el Slider
Creando la barra Superior
Creando un Menú de navegación
Estilos a la barra de navegación
Finalizando el Slider con CSS
Creando la sección sobre Nosotros
Creando la sección de Anuncios
Estilos a los anuncios
Agregando el Gráfico de Contacto
Creando la sección de Blog
Estilos al Blog
Creando el Slider de Testimoniales
Estilos a los testimoniales
Creando el Footer

PROYECTO 3: Sitio Web para una escuela de Cocina

¿Qué vamos a construir?
Creando el Header
Creando los Textos de la parte superior
Agregando las imágenes Principales
Estilos a las imágenes Principales
Creando la sección sobre nosotros
Estilos a la sección sobre nosotros
Comenzando con la sección de Clases
Estilos a las clases
Creando la sección de Estudiar Licenciatura
Estilos a la sección de Licenciatura
Finalizando con el footer

PROYECTO 4: Creando un diseño para una tienda virtual

¿Qué vamos a construir?
Creando el Header y Menú Principal
Estilos al Header
Creando la imagen principal
Creando la sección de Categorias
Estilos a las categorías
Creando la sección Sobre Nosotros
Creando los Productos
Estilos a todos los productos
Creando el footer

PROYECTO 5: Creando un Sitio Web para un Festival de Música de Rock y Electrónic

Que vamos a construir en este capitulo
Creando el Header
Comenzando los estilos al header
Finalizando el Header con CSS
Estilos a la sección de Nosotros
Comenzando el Lineup del evento
Agregando artistas al lineup
Estilos al lineup del evento
Finalizando el lineup del evento
Creando la Galería del Evento
Agregando un contador de los días faltantes para el evento
Estilos al contador
Creando la sección de los boletos
Estilos a los boletos
Estilos a la barra de navegación
Agregar una animación al hacer scroll en el sitio
Estilos a la barra superior
Agregando efecto Smooth Scroll
Agregando Scroll Spy a nuestro proyecto

PROYECTO 6: Recreando el Homepage de Fiverr

¿Qué vamos a construir?
Creando el HTML del Header
CSS para el header
Creando la sección de las categorias
Estilos y animaciones a las categorías
Creando la sección de FVR Pro
Creando la sección de primeros pasos
Estilos a la sección de primeros pasos
Creando la sección de beneficios
Creando el Slider de Testimoniales
Estilos al Slider de Testimoniales
Creando la sección de guías
Creando el Footer
Estilos al footer
Creando la barra superior
Creando el menú del header
Estilos a la barra
Ocultando y mostrando la barra según el scroll

PROYECTO 7: Creando un panel de administración

¿Que vamos a construir?
Creando el Login
Estilos al Login
Creando la barra superior
Creando la barra lateral
Creando la sección principal
Estilos a la administración de clientes
Agregando un listado de clientes
Creando la sección de nuevos clientes
Como validar formularios en bootstrap
Agregando gráficas con Morris JS

PROYECTO 8: Creando un sitio web para una empresa de construcción

Lo que construiremos en este capitulo
Primeros pasos con el header
Estilos al Header
Creando el HTML de sobre nosotros
Estilos a la sección de Nosotros
Creando el HTML de los modelos de las casas
Estilos al primer modelo de casas
Creando el Modelo Premier
Creando el modelo Elite
Creando la galería
HTML para el footer
Finalizando el Footer

Screenshots

Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Screenshot_01Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Screenshot_02Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Screenshot_03Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Screenshot_04

Reviews

Shu
October 22, 2023
Me gustó el curso pero esperaba más proyectos, sólo hicimos 6 y se supone que el curso incluía 10 :( el profesor es súper bueno y le sabe mucho, vengo del curso de Desarrollo Web Completo que es 10/10
Jonathan
October 7, 2023
Me encantas las clases de Juan llevo varios cursos de el y son muy bien preparados y aun mejor explicados.
Cristian
October 1, 2023
Un muy buen curso, y un gran maestro. Solo me queda pendiente que en 'Acerca de este curso' 'Descripción' figura más enseñanza y proyectos, pero no están en el curso. Espero que no lo abandone, y agregue proyectos más avanzados para no dejar de aprender.
Carlos
August 23, 2023
Le doy 5 estrellas porque todo es bien explicado, dinamico y no es aburrido. Espero actualicen la parte de subir el proyecto con el backend ya que la plataforma donde se subia dejo de ser gratuita y es algo que se sale de las manos del profesor.
Ignacio
July 5, 2023
El curso es bueno, pero no hay una explicación de termino o conclusión para continuar con el aprendizaje.
Fabian
July 2, 2023
Da muy bien las diferentes opciones se nota el conocimiento del profe, lo recomendable si es tener ya los conocimientos base para entender
Daniel
June 9, 2023
Genial curso. Perfectamente explicado, sin prisas y todo muy claro. Un placer estar aprendiendo con el profesor Juan.
Maximiliano
May 29, 2023
muy buen curso para practicar bootstrap con sass para mejorar nuestros desarrollos de paginas web, siga sacando mas proyectos para practicar saludos don juan pablo de la torre.
Carlos
May 9, 2023
Los cursos del profe Juan siempre son completos, muy buena base, proyectos que tienen un buen nivel de dificultad, siempre es grato y desafiante aprender con el Profe Juan
Jorge
April 30, 2023
Ha cumplido todas mis espectativas el curso. Sencillo, directo y lo mejor es que uno va practicando mientras va a aprendiendo.
Kevin
April 29, 2023
Muy buen curso, definitivamente uno de los mejores para aprender y mejorar con Bootstrap. aunque he de decir que me pareció un poco decepcionante el hecho de que solo usáramos modales y carrousel en la introducción al curso.
Gonzalo
April 24, 2023
Juan Pablo es un gran maestro, estoy muy agradecido de tener la oportunidad de haber completado este curso. Aprendí muchísimo.
Deglan
April 24, 2023
Uno de los mejores cursos que revisé. Me cambió la idea que tenía sobre el aprendizaje: comenzaré a revisar lo mínimo necesario para hacer proyectos y aprender mucho más rápido tanto del lado del backend, frontend, nube y servidores. Curso altamente recomendado!
Roger
April 3, 2023
Excelente curso. Aunque para sacarle el maximo provecho debes de haber cursado el curso de CSS y SCSS del mismo instructor que tambien es grandioso. Vale mucho la pena ambos cursos. Ahora a comenzar mi viaje con el curso de JS del mismo instructor en el que usa Tailwind para sus proyectos de JS
Oscar
March 20, 2023
Excelente Curso de Bootstrap, los conceptos son bien explicados y de manera concisa. Para aquellos que apenas empiezan les recomiendo primero el curso de CSS.

Coupons

DateDiscountStatus
12/20/202095% OFF
expired
3/18/202195% OFF
expired
5/20/202195% OFF
expired
10/16/202195% OFF
expired
12/22/202195% OFF
expired
3/11/202295% OFF
expired
3/15/202388% OFF
expired
6/4/202385% OFF
expired
6/17/202385% OFF
expired
7/2/202385% OFF
expired
7/29/202383% OFF
expired
8/11/202383% OFF
expired
9/23/202383% OFF
expired
3/8/202483% OFF
expired
3/22/202483% OFF
working

Charts

Price

Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Price chart

Rating

Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Ratings chart

Enrollment distribution

Bootstrap 5 y SASS - La Guía Práctica - Crea 10 Sitios Web - Distribution chart

Related Topics

1194892
udemy ID
4/26/2017
course created date
11/20/2019
course indexed date
Bot
course submited by