Diseño Web Responsive Avanzado con Foundation 6 y SASS

Aprende el Framework FRONTEND más AVANZADO del mundo, en este curso 100% práctico elaborarás 3 proyectos Web
4.7 (49 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.
215 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 146
  • Length 12 hours
  • Skill Level All Levels
  • 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 7/2015 Spanish

Course Description

¿Estas listo para crear asombros diseños adaptables para cualquier teléfono, tablet o computadora?

Hay muchos Frameworks Responsive para escoger hoy en día, pero Foundation es llamado el Framework Responsive más avanzado del mundo y en este curso aprenderás todo lo necesario para dominarlo.

Google recomienda tener un sitio Web Responsive para tener un mejor ranking. Este curso te ayudará a realizar diseños adaptables con Foundation for Sites.

Al finalizar este curso habrás construido un sitio web COMPLETO utilizando SASS y Foundation for Sites 6.

What are the requirements?

  • Si deseas dar un paso más adelante en tus habilidades de Desarrollador Web este curso es para ti
  • Haber escrito un poco de HTML y CSS es suficiente para comenzar este curso
  • No es necesario tener experiencia con SASS
  • Durante el curso instalaremos Git, Node JS y Foundation CLI, pero te daré todos los pasos necesarios para lograrlo.

What am I going to get from this course?

  • Crea increíbles sitios web RESPONSIVE a cualquier dispositivo, este curso te llevará paso a paso en la elaboración de 3 PROYECTOS web diferentes.
  • Utilizar los distintos componentes de Foundation y adaptarlos a tus necesidades
  • Si deseas aprender Responsive Web Design, Foundation es tu mejor opción por su sintaxis sencilla y fácil de recordar
  • Utilizar los distintos componentes, variables y mixins de Foundation y adaptalo a tus necesidades
  • Conoce Media Queries y CSS para cambiar TOTALMENTE el aspecto de tu sitio web

What is the target audience?

  • Todo el sitio web será realizado escribiendo el código necesario, si lo tuyo es escribir código, este curso es para ti
  • Estudiantes que quieran desarrollar sitios web adaptables a gran velocidad, Deberian tomar este curso
  • Estudiantes que deseen aprender SASS deberian tomar este curso
  • Estudiantes que deseen aprender Responsive Web Design, deberían tomar este curso.

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 al Curso: Revisando los Proyectos Finales
04:22

Daremos un visto al proyecto final que construiremos en este curso.

Section 2: Foundation 6: Instalando Foundation for Sites (MAC)
08:54

Para trabajar con Foundation for Sites o la versión 6 es necesario tener Git y Node JS instalados, veamos como instalarlos en este video.

07:34

Si no eres muy fanatico de los GUI´s como Yeti Launch, en este video como veremos como actualizar Foundation 4 o 5 a la versión 6 (para esto deberás tener git y node js instalados, si no tienes git y node js instalados, en el video anterior vimos el proceso para instalarlos)

Section 3: Foundation 6: Instalando Foundation for Sites (Windows)
06:36

Si ya tienes instalado Foundation en tu computadora y quieres migrar a la nueva versión sigue este video.

NOTA: Si es la primera vez que trabajarás con Foundation en el siguiente capítulo encontrarás todos los detalles, para instalarlo.

08:48

Si no tienes instalado Git, Node JS y Foundation, en este video instalaremos todo lo necesario para trabajar con Foundation for Sites en Windows.

09:49

Si utilizas Windows 10 necesitarás instalar Git, NodeJS, NPM, Gulp, Bower para poder instalar Foundation CLI. en este video veremos como hacerlo!

Section 4: Foundation 6: Comenzando a trabajar con la Página Principal
Article

Aquí encontrarás los archivos PSD para este curso. Yo utilizo la versión CS6. Si no tienes Photoshop no te preocupes, encontrarás las imágenes ya cortadas y todo lo necesario para trabajar.

02:26

Cuando descargas Foundation for Sites, a veces no utilizas la última versión, en este video veremos como actualizar Foundation For Sites a la última versión.

08:20

Comenzaremos a escribir nuestro primer código HTML, agregaremos algunas la sección de Habitaciones para nuestro Proyecto.

03:41

Comenzaremos a conocer un poco de SASS, donde modificas algunas variables, etc.

07:08

En Foundation normalmente cambias las variables existentes, pero en caso de que algo no exista, puedes crear tu propio archivo de estilos, veremos como en este video.

05:32

Los mixins te permiten declarar estilos que podrás volver a utilizar en tu código, Fondation tiene muchos mixins, pero en este video veremos el mixins de botones.

03:37

Agregar fuentes de Google, además de ser muy sencillo con SASS, hará que tus diseños luzcan atractivos, veamos como en este video.

03:22

Agregaremos algunas imagenes a nuestro diseño que nos servirán como elemento de diseño de nuestro sitio web.

04:55

Foundation for Sites hace que los Media Queries sean mas sencillos que nunca, veamos como utilizarlos

06:31

Crearemos el HTML para crear una pequeña galería, más delante veremos componentes para hacerla 100% funcional

06:24

Veremos algunos estilos SASS para esta sección, además veremos algunas técnicas más avanzadas muy utilizadas hoy en dia :)

01:53

Agregaremos una segunda imagen tal como se muestra en nuestro diseño de Photoshop

03:43

Continuamos nuestro diseño, veremos algunos conceptos más sobre como centrar elementos con Foundation for Sites 6

09:55

Crearemos el Footer para este diseño, en esta parte agregaremos la parte del HTML

07:26

Foundation tiene su propia colección de Iconos, llamada Foundation Icons, veamos como agregarlos a nuestro diseño.

08:30

Finalicemos este Footer agregando algunos estilos de SASS.

03:59

Comenzaremos a trabajar con la parte del Video HTML5 una técnica muy utilizada hoy en día.

03:51

En este video veremos como agregar un Logotipo y nuestro botón para activar el menú.

04:57

Vamos a escribir un poco de CSS para hacer que nuestro diseño se vea como el archivo de Photoshop

07:38

En este video, finalizaremos nuestros estilos CSS para la parte superior. De ahí es momento de conocer los componentes de Foundation for Sites 6

Section 5: Foundation 6: Agregando Componentes en Foundation for Sites
05:15

En este video conoceremos el componente Off Canvas, en este componente puedes agregar lo que quieras, pero nosotros agregaremos una navegación en esta parte.

05:18

Agregaremos un menú con submenu a nuestro off-canvas, Foundation for Sites tiene un componente llamado Drilldown que nos será muy útil.

05:19

En este video agregaremos algunos estilos a nuestro Menú Off canvas.

04:22

Foundation tiene un componente llamado Reveal, muy parecido a Modal en otros frameworks como Bootstrap, o Ligthbox en algunos otros. Veamos como implementarlo.

09:20

Continuamos nuestro proyecto, en este video crearemos una pequeña función en jQuery para no estar repitiendo nuestras imágenes de la galería.

02:53

Motion UI es una serie de animaciones y transiciones CSS3 especialmente hecho para Foundation, veamos como integrarlo a nuestro proyecto

05:08

En este video combinaremos 2 componentes, Reveal y Formularios.

02:00

Las ventajas de Utilizar los campos de Texto para HTML5 son muchas, las veremos en este video.

07:10

Foundation for Sites ofrece Validación para formularios, Abide validation es fácil de utilizar y muy poderoso, veremos como utilizarlo.

Section 6: Foundation 6: Trabajando con las Secciones Internas
04:42

Antes de comenzar a trabajar con las páginas internas, hagamos un pequeño Template para no estar copiando todo el contenido una y otra vez.

06:47

Tenemos un div que actúa como una capa sobrepuesta a nuestro contenido (llamada overlay) veamos como hacer para que tome la altura dinámicamente ya sea para imágenes o video.

05:48

En este video finalizaremos la página de Nosotros.

02:19

Necesitamos una fuente más para nuestros enlaces y parrafos, vamos a agregarla con SASS.

07:20

En este video trabajaremos con la sección de Servicios, veremos push y pull columns

02:55

En este video escribiremos un poco de CSS para central verticalmente nuestro diseño.

03:54

En este video veremos un componente Equalizer que ayudará a tener 2 divs con la misma altura, muy útil en algunos casos como este.

05:53

En este video finalizaremos la sección de Habitaciones.

09:35

Continuaremos trabajando nuestro diseño, en este video construiremos la página que tendrá el contenido para cada una de las habitaciones.

04:45

Antes de pasar al componente Data Magellan, agregaremos un pequeño Menú, que nos ayudará para hacer el componente más fácild e trabajar.

03:27

Es momento de agregar Data-Magellan a nuestro sitio, es necesario agregar un poco de HTML, pero los resultados son increibles.

08:16

Veamos como agregar un formulario de contacto, que será un poco diferente al que ya hicimos previamente

05:54

Finalizaremos nuestro formulario de Contacto en este video.

04:12

Una vez finalizado el HTML de nuestro sitio, es momento de crear cambiar algo de estilos para que se vea como nuestro diseño de Photoshop

02:08

Si deseas conocer donde puedes encontrar toda la información de Foundation y que variables puedes modificar, la documentación oficial es el lugar indicado para hacerlo.

Section 7: Proyecto 2: Single Page con SASS, Gulp, Flexbox, Handlebars y más
03:58

Este será el segundo proyecto que aprenderás a realizar a lo largo del curso, será más avanzado, ya que tiene Gulp, ZURB Template, SASS, Handlebars, Flexbox y mucho más

05:22

Vamos a comenzar creando el proyecto utilizando Foundation CLI

04:04

El ZURB template es muy complejo, tiene muchas funcionalidades, pero las iremos viendo poco a poco dentro del curso.

05:20

Panini te permitirá dividir tu diseño en distintos componentes, le dará a tu HTML cierto dinamismo, Veamos como comenzar a trabajar con el.

05:05

Gracias a Handlebars, podemos utilizar variables dentro de los templates, veamos como hacerlo en este video.

05:52

Veamos como leer un archivo JSON y un YML con el ZURB Template.

02:27

Veamos el diseño en Photoshop que estaremos utilizando durante el curso, este archivo estará para descarga.

Nota el archivo requiere las fuentes Note Sans y Open Sans, además esta en Photoshop CS6.

Incluí el diseño en .jpg si no tienes photoshop, no necesitas Photoshop si no lo tienes para terminar el diseño, las imagenes y los colores los agregaremos más delante y todo estará disponible.

05:09

Por default, Foundation no viene con Flexbox habilitado, lo habilitaremos en este video y haremos nuestra primer prueba

05:39

Nuestro Proyecto cuenta con una serie de imágenes para utilizar, vamos a agregarlas en este video.

06:10

Veamos como crear un menú de navegación con Foundation y Flexbox

06:22

Veamos algunos métodos disponibles con JavaScript para detectar la medida actual.

03:31

Veamos como detectar el tamaño actual de nuestro sitio web con JavaScript y Foundation

08:05

En este video agregaremos Orbit Slider a nuestro proyecto

03:21

Nuestro Slider funciona, pero veremos como agregar botones de navegación y otras opciones.

05:35

Motion UI te permitirá agregar animaciones a tu sitio de Foundation, veamos como implementarlo.

03:47

En este video veremos como agregar una hoja de estilos que tendrá todo nuestro SASS

06:51

Veamos como darle algo de estilos a nuestro menú principal.

06:19

En este video editaremos nuestro menú responsive con SASS.

04:05

Vamos a darle algo de estilos a nuestro slider para que se vea como nuestro diseño PSD

05:30

Veamos algunas clases de Flexbox que vienen con Foundation 6.

04:34

En este video agregaremos Foundation Icons a nuestro diseño.

05:01

Vamos a darle estilos a nuestra sección de nosotros.

02:10

Veamos como agregar una fuente Noto Sans a nuestro diseño.

03:45

Agregaremos un menú de redes sociales con Foundation Icons y Flexbox

03:03

Vamos a agregar algunos estilos para que nuestro menú se vea como deseamos.

04:45

En este video leeremos un archivo JSON con Handlebars para mostrar los productos de esta tienda virtual.

05:21

Veamos como integrar Foundation a nuestro JSON para mostrar los productos como deseamos.

10:38

Agregaremos algo de SASS a nuestros productos para terminar esta sección

05:50

Vamos a crear la sección de testimoniales con un Slider

05:48

Vamos a ver que variables podemos editar para testimoniales en Foundation

06:51

Flexbox te permitirá re ordenar elementos muy fácilmente, veamos como hacerlo desde html y desde CSS

06:52

Veamos como crear un formulario de Contacto.
Nota en los archivos del curso encontrarás un GIST de todo este código.

07:15

Vamos a darle estilos a nuestro formulario de Contacto

02:27

Vamos a crear un footer para nuestro Single Page

02:46

Veamos como alinear los elementos de Nuestro footer fácilmente con flex-grid

06:24

Veamos como crear un menú que detecte el scrolling del usuario de Data Magellan

05:19

Veamos como detectar la sección actual en la que se encuentre el usuario.

05:46

Vamos a darle los toques finales a nuestro diseño, veremos que detalles le podemos dar para dispositivos móviles.

Section 8: Proyecto 3: Foundation 5 y SASS
04:24

En este video veremos lo que vamos a construir en este curso con Foundation 5 y SASS

01:22

En este video veremos algunos de los archivos que estarán disponibles para descarga, de esta forma al finalizar el curso tus resultados serán iguales a los mios.

02:11

Veamos los archivos Photoshop para este curso. Los archivos funcionan para la versión de Photoshop CS6. Y requieren 2 fuentes, en los recursos encontrarás los enlaces para estas fuentes.

01:11

He agregado los ejercicios para cada video, aquí te mostraré como funcionan.

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