Aprende Bootstrap y Foundation creando un sitio dos veces
4.6 (34 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.
259 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Bootstrap y Foundation creando un sitio dos veces to your Wishlist.

Add to Wishlist

Aprende Bootstrap y Foundation creando un sitio dos veces

Aprende las diferencias entre los dos Frameworks CSS más populares hoy en día creando el mismo sitio dos veces.
4.6 (34 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.
259 students enrolled
Last updated 8/2015
Spanish
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Elegir correctamente que te ofrece Bootstrap y Foundation para futuros desarrollos
  • Implementar las mejores prácticas entre Bootstrap y Foundation
  • Conocer las diferencias entre estos 2 frameworks
  • Conocer y dominar los 2 frameworks CSS más populares hoy en día
  • Adaptar Bootstrap y Foundation a tus necesidades
  • Modificar el CSS de Bootstrap y Foundation
  • Agregar funciones avanzadas a Bootstrap y Foundation
View Curriculum
Requirements
  • En el curso utilizaremos SublimeText y Brackets como editores principales
  • Se incluyen ejercicios para cada video, así que solo es iniciar cada proyecto para tener los mismos resultados
Description

Si alguna vez te has preguntado que Framework CSS utilizar este curso es el indicado para ti.

Los 2 frameworks CSS mas populares hoy en día y que los empleadores buscan que domines son explicados en este curso.

Construiremos el mismo sitio 2 veces, explicando los componentes donde se destaca tanto Bootstrap 3 como Foundation 5.

No mas frustraciones ni trucos a la hora de aprender un curso de diseño web, iremos paso a paso construyendo el sitio web, desde la descarga de los framework, instalación, etc.

El curso esta lleno de tips que te iré dando para que no cometas los mismos errores que yo cometí a la hora de aprender Foundation y Bootstrap.

En el curso vienen incluidos los archivos para cada video, así podrás comparar tu código si tienes algún problema ejercicios para cada video vienen incluidos.

Son más de 6 horas y calidad HD a lo largo del curso.

Who is the target audience?
  • Si alguna vez te has preguntado cual es la diferencia entre Bootstrap y Foundation aquí las conoceras
  • Diseñadores y Programadores que quieran hacer diseños web "Responsive" y no saben que framework utilizar deben tomar este curso
  • Conoces de páginas web pero no has utilizado un Framework, este curso te llevará de la mano para entenderlos y adaptarlos a tus necesidades
  • Si nunca has escrito código CSS, HTML o JavaScript puedes seguir el curso ya que se incluyen los ejercicios para cada video, pero se recomienda continuar estudiando para entender todo al 100%
Students Who Viewed This Course Also Viewed
Curriculum For This Course
82 Lectures
07:53:42
+
Introducción a CSS Frameworks.
7 Lectures 23:37

Este video conocerás lo que haremos en el Curso, y lo que serás capaz de hacer al finalizarlo.

Preview 04:13

¿Qué es un framework css? ¿Como elegir uno? ¿Ventajas y Desventajas? En este video aprenderás eso y mucho más.

Preview 07:59

En este video te mostraré que es Twitter Bootstrap.

Preview 01:29

En este video te mostraré que es ZURB Foundation.

Preview 01:22

En este curso utilizaré Brackets y SublimeText para escribir todo el HTML, CSS y JavaScript de nuestro proyecto, aquí te doy una introducción de Brackets.

Sobre el editor de Texto para este curso
04:21

Conociendo el Diseño que haremos en este curso
03:45

Una pequeña nota sobre las imágenes utilizadas en este curso

Sobre las imágenes de este curso.
00:28
+
Twitter Bootstrap (Estructura y CSS)
8 Lectures 01:10:26

Descargemos e instalaremos Bootstrap en HTML5 Boiplerplate.

Descargando HTML5 Boilerplate y Twitter Bootstrap
04:24

En este video escribiremos la estructura del HTML para la página principal

Escribiendo toda la estructura de la página principal
09:59

En ste video escribiremos el HTML que bootstrap utiliza para hacer que tu página web sea Adaptable a dispositivos móviles.

Escribiendo todas las clases de bootstrap para la página principal
18:13

El CSS de Bootstrap se puede modificar fácilmente, pero aquí te digo las mejores prácticas para hacerlo.

Editando el CSS para la página principal.
07:06

Continuamos editando el CSS de nuestra página principal.

Editando el CSS para la página principal (Parte 2)
08:19

Estamos por finalizar nuestro diseño de la página principal en lo que se refiere a hojas de estilos CSS.

Editando el CSS para la página principal (Parte 3)
08:49

En este video finalizamos la edición de la página principal de nuestro sitio web en Bootstrap.

Editando el CSS para la página principal (Footer)
08:41

En este video crearemos las secciones internas de nuestro diseño.

Creando los archivos HTML para las secciones internas
04:55
+
Twitter Bootstrap (Componentes)
18 Lectures 01:52:17

Una de las grandes ventajas de utilizar un Framework son sus librerías con funciones ya hechas, Bootstrap viene con muchos componentes, entre ellos Accordion.

Utilizando Accordion de Bootstrap para la sección de Nosotros.
09:11

En este video agregaremos algunas clases de Bootstrap, imagenes, etc para hacer aún mas agradable el diseño de la página de Nosotros.

Finalizando el HTML de la página de Nosotros.
03:04

En este video editaremos el CSS de nuestro Accordion para que se vea como deseamos en nuestro diseño.

Editando el CSS de la página de Nosotros.
04:53

Agregaremos un poco de jQuery para detectar cuando el Accordion esta activo.

Editando con jQuery el Accordion de Bootstrap
08:11

En este video comenzaremos a trabajar con la sección de Servicios.

Editando la sección de Servicios.
02:46

Una ventana modal te ayudará a resaltar el contenido que sea mas importante, en este video aprenderás como hacerlo.

Creando una ventana Modal con Bootstrap para los servicios
04:58

En este video finalizaremos la sección de servicios agregando imagenes y estilos a la pantalla Modal.

Finalizando la ventana modal con CSS e imagenes.
09:22

En este video comenzaremos a crear un pequeño directorio de los integrantes de nuestro equipo de trabajo.

Comenzando a trabajar con la sección Equipo de Trabajo.
07:01

En este video agregaremos algunos detalles con CSS y HTML para finalizar nuestra sección de equipo de trabajo.

Finalizando la sección de equipo de trabajo con HTML y CSS
04:20

En este video crearemos una navegación avanzada con CSS3 y SVG

Creando una navegación avanzada para Redes Sociales
05:38

En este video veremos como crear un formulario de contacto.

Creando la sección de contacto con Formularios en Bootstrap.
09:24

En este video cambiaremos la apariencia del formulario con CSS

Editando el formulario con CSS
07:27

En este video veremos como agregar un formulario de contacto dentro de un Modal

Agregando un formulario de contacto en un Modal
04:45

En este video veremos como agregar una navegación avanzada con CSS3 y SVG

Agregando una navegación avanzada para redes sociales al footer
03:58

En este video aprenderás a integrar Bootstrap Carousel o lo que se conoce comunmente como Slider a tu página web.

Agregando Carousel (Slider) a nuestro diseño
06:39

Agregaremos otros elementos al Carousel para adaptarlo a nuestras necesidades

Editando Carousel con CSS para hacerlo acorde a nuestro diseño.
10:36

En este video veremos como agregar un fondo a la barra de navegación detectando el scroll por parte del usuario

Agregando un efecto al hacer scroll al menú principal
06:30

Un ToolTip ayudará a darle información extra a tus visitantes, aquí aprenderás como agregarlo.

Agregando un ToolTip a nuestra página Web
03:34
+
Bootstrap y PHP
4 Lectures 25:25

En este video te mostraré como separar la página web en pequeñas partes con php

Separando todo el diseño en Archivos .php
07:51

En este video veremos algunas de las ventajas de haber dividido nuestro diseño en diferentes partes con php

Conociendo las ventajas de haber separado el diseño en archivos .php
06:50

En este video utilizaremos php para agregar titulos dinamicos y una navegación que nos mostrará en que parte del sitio nos encontramos.

Creando una navegación y títulos dinámicos con php
07:00

¿Te gustaría tener una fuente con Google Fonts? no te preocupes, aquí te mostraré como

Agregando una fuente de Google Fonts
03:44
+
Twitter Bootstrap Ajustes para tamaños de Tablets
5 Lectures 31:51

En este video comenzaremos a ajustar nuestro diseño para que se vea correctamente en una tablet

Realizando pequeños ajustes para la versión de Tablets
05:31

Nuestro diseño se ve bien, pero haremos unos ajustes mas precisos con unos media Queries, los mismos que usa Bootstrap

Agregando Media Queries para Twitter Bootstrap
07:42

Continuamos realizando ajustes a nuestro diseño para Tablets, pero introducimos dos nuevas clases de Bootstrap Hidden y Visible

Conociendo hidden y visible en Bootstrap para distintos tamaños
06:01

En este video explicamos más a fondo la diferencia entre col-md y col-sm para tus diseños

Ajustando col-md y col-sm para una tablet
03:43

En este video terminaremos de editar nuestra versión para tablets.

Finalizando las secciones internas y nuestro diseño para tablets
08:54
+
Twitter Bootstrap Ajustes para tamaños de SmartPhone
6 Lectures 29:41

En esta sección ocultaremos contenido especificamente para la resolución de un teléfono.

Ocultando contenido para la versión de teléfono
02:57

En este video corregiremos algunos detalles con nuestro menú para teléfonos.

Realizando ajustes para la navegación con JavaScript y CSS
09:44

En este video crearemos una función para ejecutarla basada en la resolución del teléfono o escritorio

Aplicando un Efecto de CSS3 basados en la resolución del teléfono
02:59

En este video finalizaremos los detalles a nuestra página principal

Finalizando los ajustes de la sección principal
06:16

Como dije en el video en este nos ponemos elegantes y agregamos un efecto que se activa al hacer scrolling

Preview 04:23

Con este video culminamos nuestro diseño en Bootstrap, debes sentirte orgulloso(a) si has llegado a este punto ;)

Finalizando el diseño para teléfonos de nuestro sitio web.
03:22
+
ZURB Foundation 5 (Básicos)
6 Lectures 50:28

En este video descargaremos e instalaremos ZURB Foundation con HTML5 Boilerplate.

Preview 04:46

Sino seguiste la parte de Bootstrap, en este video te muestro el diseño en Photoshop que transformaremos a Foundation 5

Preview 03:41

En este video comenzaremos a escribir el HTML para la página principal

Escribiendo el HTML para la página principal y archivo de las secciones internas
09:41

En este video agregaremos algunas clases incluidas en Foundation para nuestro diseño

Preview 10:53

Foundation tiene muy buen diseño incluido, pero eso no quiere decir que no podamos editar el CSS para adaptarlo totalmente a nuestras necesidades, aquí te mostraré como hacerlo.

Realizando ajustes con CSS a la página principal
09:20

En este video terminamos de editar el CSS para la página principal

Realizando ajustes con CSS a la página principal (Segunda parte y final)
12:07
+
ZURB Foundation (Componentes)
16 Lectures 01:17:10

Si hay algo donde ZURB Foundation destaca es en sus componentes, aquí comenzamos a utilizar un Accordion

Construyendo la sección nosotros con un Accordion de Foundation
04:43

En este video adaptaremos el diseño de Accordion a nuestro diseño, además sabrás identificar que estilos cambiar para cuando tu cliente o jefe te pida un Accordion en su sitio web.

Editando el CSS del Accordion para la sección de nosotros
05:26

En este video crearemos la sección de Servicios.

Construyendo la sección de Servicios
02:59

En este video escribiremos el HTML para la sección de Equipo de Trabajo.

Creando el HTML para la sección de Equipo de Trabajo
04:30

En este video editaremos el CSS para nuestra sección de Equipo de Trabajo

Editando el CSS para la sección de Equipo de Trabajo
05:04

Igual que en la parte de Bootstrap, haremos un menú avanzado utilizando selectores de CSS3 para nuestras redes sociales

Agregando un menú avanzado para las redes sociales en Equipo de Trabajo
05:08

En este video te muestro los pasos para agregar un formulario de contacto con campos de texto y otros componentes

Creando un formulario de Contacto con ZURB Foundation
08:42

Podemos editar el css del formulario de contacto para hacerlo ver como en nuestro diseño de photoshop, aquí los pasos para hacerlo

Editando el CSS del Formulario de Contacto
04:01

Orbit Slider es uno de los mejores Slider para móviles, aquí te mostraré la implementación.

Agregando Orbit Slider a nuestro diseño
03:37

Podemos agregar mas elementos a Orbit Slider, aquí te mostraré como hacerlo

Editando el CSS de Orbit Slider
06:17

Una pantalla modal o Reveal en Foundation destaca bastante el contenido y hoy es casi un standar en la industria, aquí te muestro como crear una.

Agregando pantallas Reveal (modales) en ZURB Foundation
08:03

Foundation permite agregar una pantalla reveal o modal tras otra, aquí veremos un ejemplo práctico de como hacerlo.

Agregando una pantalla Reveal (modal) doble en un formulario de contacto
05:12

En este video agregaremos una navegación avanzada para el footer utilizando selectores de CSS3 y SVG

Creando una navegación avanzada para redes sociales
03:00

En este video detectaremos cuando el usuario hace scroll para que la navegación tenga un efecto y cambie su color de fondo con CSS3.

Agregando un efecto al hacer scroll al menú principal
03:47

En este video conoceremos otro elemento de Foundation como es el ToolTip

Agregando un ToolTip a la sección de equipo de trabajo
02:33

Foundation viene con validación, y aquí aprenderás a integrarla a tus proyectos

Agregando Avide Validation a nuestro formulario de contacto
04:08
+
ZURB Foundation y PHP
3 Lectures 15:31

En este video dividiremos nuestro diseño en pequeños archivos de PHP

Dividiendo el diseño en pequeños archivos de PHP para fácil mantenimiento
08:27

En este video veremos como agregar titulos con PHP e imprimirlos en nuestras páginas

Agregando títulos dinámicos a nuestras páginas
03:53

En este video agregaremos un código que nos dirá en que parte del sitio nos encontramos.

Agregando una navegación que detecte en que parte del sitio nos encontramos
03:11
+
ZURB Foundation Ajustes para tablets
3 Lectures 13:48

ZURB Foundation viene con clases especificas para tablets, aquí conoceremos algunas

Clases para Tablets en ZURB Foundation
06:15

Si deseas editar algo especifico en tu diseño, lo mejor es utilizar los MediaQueries de Foundation, aquí los conoceremos

MediaQueries en ZURB Foundation
02:48

Finalizaremos nuestro diseño y hacerlo compatible con Tablets

Ajustando las secciones internas
04:45
1 More Section
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
2,373 Reviews
8,870 Students
17 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.