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.5 (25 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.
212 students enrolled
$35
Take This Course
  • Lectures 82
  • Contents Video: 8 hours
    Other: 0 mins
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 Spanish

Course 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.

What are the 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

What am I going to get from this course?

  • 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

What 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%

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción a CSS Frameworks.
04:13

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

07:59

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

01:29

En este video te mostraré que es Twitter Bootstrap.

01:22

En este video te mostraré que es ZURB Foundation.

04:21

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.

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

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

Section 2: Twitter Bootstrap (Estructura y CSS)
04:24

Descargemos e instalaremos Bootstrap en HTML5 Boiplerplate.

09:59

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

18:13

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

07:06

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

08:19

Continuamos editando el CSS de nuestra página principal.

08:49

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

08:41

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

04:55

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

Section 3: Twitter Bootstrap (Componentes)
09:11

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.

03:04

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.

04:53

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

08:11

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

02:46

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

04:58

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

09:22

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

07:01

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

04:20

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

05:38

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

09:24

En este video veremos como crear un formulario de contacto.

07:27

En este video cambiaremos la apariencia del formulario con CSS

04:45

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

03:58

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

06:39

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

10:36

Agregaremos otros elementos al Carousel para adaptarlo a nuestras necesidades

06:30

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

03:34

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

Section 4: Bootstrap y PHP
07:51

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

06:50

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

07:00

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

03:44

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

Section 5: Twitter Bootstrap Ajustes para tamaños de Tablets
05:31

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

07:42

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

06:01

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

03:43

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

08:54

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

Section 6: Twitter Bootstrap Ajustes para tamaños de SmartPhone
02:57

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

09:44

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

02:59

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

06:16

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

04:23

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

03:22

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

Section 7: ZURB Foundation 5 (Básicos)
04:46

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

03:41

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

09:41

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

10:53

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

09:20

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.

12:07

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

Section 8: ZURB Foundation (Componentes)
04:43

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

05:26

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.

02:59

En este video crearemos la sección de Servicios.

04:30

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

05:04

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

05:08

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

08:42

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

04:01

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

03:37

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

06:17

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

08:03

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.

05:12

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

03:00

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

03:47

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.

02:33

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

04:08

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

Section 9: ZURB Foundation y PHP
08:27

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

03:53

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

03:11

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

Section 10: ZURB Foundation Ajustes para tablets
06:15

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

02:48

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

04:45

Finalizaremos nuestro diseño y hacerlo compatible con Tablets

Section 11: ZURB Foundation ajustes para Smartphone
03:11

Aqui conocerás algunas de las clases más utilizadas para mostrar contenido basado en la resolución de un teléfono

06:18

Para teléfonos inteligentes debemos hacer una navegación discreta, intuitiva y que no quite mucho espacio, aquí te mostraré como hacerla.

02:59

En este video haremos los ultimos ajustes para la pantalla de smartphone

03:09

Con los ajustes anteriores, perdimos nuestra navegación que nos mostraba donde estabamos, pero aquí te mostraré como realizar los ajustes necesarios para que vuelva.

02:46

En este video realizaremos algunos ajustes con MediaQueries para smartphone

05:06

En este video finalizamos nuestro diseño, pero damos una revisada a los nested rows de Foundation

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, 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.

Ready to start learning?
Take This Course