Aprende Bootstrap 4, el Framework Responsive HTML5 CSS3 y JS
4.5 (22 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
152 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Bootstrap 4, el Framework Responsive HTML5 CSS3 y JS to your Wishlist.

Add to Wishlist

Aprende Bootstrap 4, el Framework Responsive HTML5 CSS3 y JS

Aprende desarrollando un Proyecto Web del mundo real completo, además crearemos una Plantilla de WordPress con Bootstrap
4.5 (22 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
152 students enrolled
Last updated 8/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $195 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 10 hours on-demand video
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Un Editor de Texto como ATOM, Sublime Text, Notepad++, Brackets, Visual Studio Code
  • Un servidor local, WAMP, MAMP, Bitnami o XAMPP, Local by Flywheel
  • El curso incluye todos los archivos para completarlo correctamente como imágenes, logotipos y código fuente
  • Si tienes conocimiento de HTML y CSS podrás obtener más de este curso, si nunca has escrito HTML y CSS puedes tomarlo pero recomendaría continuar aprendiendo estas tecnologías que son base para Desarrollo Web
  • No es necesaria experiencia alguna en WordPress ni PHP para la sección de WordPress
Description

ACTUALIZADO AGOSTO 2017

He añadido un video para migrar nuestro proyecto actual a Bootstrap 4 Beta, la última versión!

ACTUALIZADO JULIO 2017 (40 videos nuevos)

Además de crear un proyecto web completo desde cero, convertiremos nuestro diseño a un sitio de WordPress, de esta forma podrás crear sitios HTML a temas de WordPress para tener un sitio web 100% dinámico,

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

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


Who is the target audience?
  • Diseñadores web que quieran comenzar a realizar sitios web adaptables
  • Personas que deseen integrar a sus habilidades el Diseño Web Responsive con Bootstrap
  • Crear sitios web con Bootstrap es rápido, si deseas crear sitios web a mayor velocidad este curso es para ti
  • Aprender el framework más popular y con más trabajos por internet
  • Diseñadores web que deseen incorporar bootstrap a sus habilidades
Students Who Viewed This Course Also Viewed
Curriculum For This Course
117 Lectures
09:52:24
+
Introducción al Curso
4 Lectures 06:56

En este video conoceremos el proyecto final del curso

Preview 03:21

Revisemos los archivos de Photoshop incluidos para este curso

Preview 01:46

Todo el código del curso lo encontrarás en este video :D

Preview 01:04

En este video encontrarás todas las imágenes necesarias para este curso

Preview 00:45
+
Básicos de Bootstrap: Primeros Pasos
19 Lectures 01:39:46

Cuando utilizas un framework CSS lo primero que hay que tener en cuenta es un grid fácil y poderoso, bootstrap lo tiene, veamos como usarlo!

Preview 08:21

Veamos otras clases que tiene el framework para el grid

Otras clases para el Grid
06:45

Veamos algunas clases que puedes aplicar a tus textos de tu sitio web

Clases para Tipografía
04:15

Veamos otros ejemplos de clases para tipografía 

Otras clases para Tipografía
05:02

Veamos algunas clases de CSS para las imagenes

Clases para imágenes
04:52

Bootstrap te permite darle estilos a las tablas de forma muy fácil, veamos como hacerlo

Trabajando con Tablas
03:39

También en Bootstrap existen clases para los botones, veamos algunos ejemplos

Creando Botones con Bootstrap
05:24

Uno de los nuevos componentes de bootstrap son los Cards, veamos como usarlos

Componentes en Bootstrap: Card
05:15

El Carousel es uno de los componentes más comunes en cualquier sitio web

Componentes en Bootstrap: Carousel
05:45

Veamos como agregar contenido extra al carousel

Agregando contenido extra al Carousel
04:31

Veamos como agregar texto al Carousel

Agregando texto al Carousel
04:02

Otro componente muy común en casi todo sitio web es el Accordion, veamos como implementarlo

Componentes en Bootstrap: Collapse o Accordion
06:06

Veamos otro componente en bootstrap los modals o lightbox

Componentes en Bootstrap: Modals
06:15

Veamos como crear menús de navegación en bootstrap

Componentes en Bootstrap: Menus
07:59

El ScrollSpy le dice al usuario en que parte del sitio web se encuentra actualmente, veamos como utilizarlo

Componentes en Bootstrap: ScrollSpy
05:13

En este video veremos como agregar Tooltip a bootstrap

Componentes en Bootstrap: ToolTip
03:51

Continuamos con los componentes, en este video veremos el dropdown

Componentes en Bootstrap: Dropdown
03:32

Veamos como utilizar el jumbotron para tus sitios web

Componentes en Bootstrap: Jumbotron
02:52

Nuevas clases para margins y paddings

Bootstrap: Margins y Paddings
06:07
+
PROYECTO: Comenzando el Proyecto y página de Inicio
24 Lectures 01:46:32

Veamos como descargar  y comenzar nuestro proyecto de este curso

Descargando el Template para Iniciar con Bootstrap
03:07

Veamos como agregar el logotipo

Agregando el Logotipo
03:05

Agregaremos las clases al header para nuestro grid

Agregando el grid en el header
03:04

Vamos a crear el menú principal

Creando el Menú Principal
02:40

Vamos a reescribir el CSS del menú principal

Estilos a la navegación principal
05:58

Vamos a agregar una fuente de google fonts

Agregando una fuente de Google Fonts
02:59

En este video agregaremos una pequeña transición de CSS3 a nuestro menú

Agregando una Transición CSS3 al menú
01:28

Vamos a crear el Slider Principal

Creando el Slider Principal
04:31

En este video daremos estilos CSS al carousel!

Estilos al Carousel
05:06

Vamos a añadir una sección extra a nuestro proyecto

Creando la sección del nuevo sitio
02:41

Vamos a darle estilos a la sección que recién hemos creado

Estilos a la sección de nuevo sitio
04:56

Vamos a crear la sección de servicios

Creando la sección de servicios
05:10

Veamos como darle estilos a los servicios

Estilos a los servicios
05:37

Vamos a finalizar los estilos de esta sección

Finalizando los estilos
04:22

Vamos a crear la sección de los horarios

Creando la sección de Horarios
02:53

Estilos a los horarios

Estilos a los horarios
10:07

Vamos a crear la sección de productos

Creando la sección de Productos
06:58

Veamos como darle estilos a los productos de esta empresa

Estilos a los Productos
04:29

Vamos a trabajar con la sección de citas

Trabajando con la sección de Citas
03:29

Vamos a darle estilos a las citas

Estilos a la sección de Citas
05:45

Vamos a crear el footer del sitio web

Creando el Footer
06:10

Vamos a agregar font awesome en nuestro proyecto

Descargando Font Awesome
02:16

Vamos a crear los enlaces a las redes sociales de este sitio web

Creando los enlaces de redes sociales
03:50

Veamos como imprimir el menú de redes sociales

Mostrando los iconos de redes sociales
05:51
+
Creando las secciones Internas - Nosotros
7 Lectures 31:35

Veamos como mover el proyecto a nuestro servidor local para la siguiente etapa de desarrollo del sitio

Moviendo el Proyecto a un Servidor Local
05:28

Vamos a dividir nuestro diseño, crearemos un header y un footer

Creando los templates para footer y header
03:33

Veamos como crear una imagen principal para nuestro proyecto

Creando la imagen principal
05:31

Vamos a finalizar el HTML de la sección de nosotros

Finalizando el HTML de la página de Nosotros
03:23

Vamos a crear una pequeña galería de imágenes

Creando una Galería de imágenes
05:12

Vamos a imprimir los horarios de atención

Imprimiendo los horarios de atención
02:01

Veamos como darle estilos a la página de Nosotros

Estilos a la página de Nosotros
06:27
+
Creando la sección de Servicios
4 Lectures 20:49

Veamos como crear una página para la sección de Servicios

Creando la página de Servicios
04:19

Veamos como crear un Accordion de Servicios

Creando un accordion de servicios
06:24

Vamos a crear el sidebar para la sección de servicios

Creando el sidebar de servicios
04:09

Veamos como agregar estilos a la sección de servicios

Estilos a la sección de servicios
05:57
+
Creando la sección de Productos
3 Lectures 13:15

Veamos como crear la página de productos

Creando la página de productos
03:50

Veamos como crear una sección para mostrar la información de un producto

Creando la sección para un producto
03:48

Vamos a finalizar la sección de productos

Finalizando la página del Producto
05:37
+
Creando la sección de Contacto
2 Lectures 11:23

Vamos a crear la sección de Contacto para nuestro proyecto

Creando la página de Contacto
07:46

Vamos a darle estilos al formulario

Estilos al Formulario
03:37
+
Mostrando los Productos desde una Base de Datos
6 Lectures 42:57

Vamos a crear una base de datos para los productos de esta empresa

Creando la Base de Datos con PHPMYADMIN
08:46

Veamos como insertar registros a nuestra base de datos recién creada

Insertando una serie de registros
01:05

Veamos como conectar la Base de Datos de MySQL con nuestro proyecto

Conectando la base de datos con PHP
05:16

Vamos a realizar una consulta que mostrará los productos de la base de datos

Realizando una consulta para imprimir los productos
11:38

Veamos como mostrar los resultados de un solo producto

Creando la consulta para imprimir un solo producto
08:03

Vamos a imprimir los resultados de nuestra consulta

Imprimiendo la información de un Producto
08:09
+
Enviando correos desde el formulario de Contacto
5 Lectures 33:12

Veamos como enviar los datos de un formulario de contacto con PHP

Primeros pasos con jQuery
07:08

Vamos a validar los campos con jQuery

Validando que el campo tenga algo escrito en el
09:33

Vamos a validar el resto de los campos de nuestro formulario

Validando el resto de los campos
05:07

Vamos a finalizar nuestra función para enviar formularios

Finalizando la función para enviar la información por medio de AJAX y PHP
08:20

Probando que todo funcione correctamente

Probando que todo funcione correctamente
03:04
+
Creando una navegación Responsive (menú de hamburguesa)
2 Lectures 12:17

Veamos como crear un menú de Hamburguesa para nuestro menú principal!

Creando el HTML y las clases necesarias
04:34

En este video te mostraré como darle estilos al menú de Hamburguesa

Reescribiendo el CSS
07:43
9 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
3,250 Reviews
11,563 Students
18 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.

----------------------------------------------------------------------------------------

Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.