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.8 (57 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.
245 students enrolled
$15
$95
84% off
Take This Course
  • Lectures 185
  • Length 15.5 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

ACTUALIZADO DICIEMBRE 2016!

Además de crear 3 proyectos, hemos agregado 38 videos para que puedas convertir un Diseño hecho en Foundation 6 y SASS en un Tema de WordPress, para crear un sitio 100% dinamico!

¿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.
  • Hemos agregado como Convertir el diseño de este proyecto a un Tema de WordPress, para crear sitios 100% dinamicos!

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

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

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

04:24

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

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.

00:07

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 en el video anterior, en el archivo assets

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!

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.

Section 4: Foundation 6: Comenzando a trabajar con la Página Principal
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.

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.

04:13

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: Convirtiendo nuestro proyecto a un Tema de WordPress
05:29

Vamos a instalar WordPress localmente para trabajar de forma más rápida

04:40

Vamos a crear nuestro tema de WordPress para eso necesitaremos al menos 2 archivos, index.php y style.css

07:03

Vamos a agregar las hojas de estilo a nuestra plantilla

06:29

Vamos a agregar los archivos de JavaScript a nuestro Tema

03:14

Vamos a dividir nuestro diseño en distintos archivos, de esta forma nuestra cantidad de código se reducirá drasticamente :)

02:39

Vamos a crear las páginas principales para nuestro proyecto

02:58

La jerarquia de Temas será tu mapa cuando hagas un Tema de WordPress

05:03

Vamos a crear la página de Habitaciones que nos servirá como Indice para las otras

06:50

Veamos como realizar una consulta a la Base de datos

05:51

Veamos como ajustar las fotografias y como WordPress maneja las imagenes 

07:43

Veamos como instalar Advanced Custom Fields a nuestro theme

06:11

Vamos a agregar las imágenes principales a nuestra página principal

02:44

Veamos como mostrar información de otras páginas en la principal

06:49

En este video vamos a crear una galería con WordPress

05:43

Vamos a finalizar nuestra galeria

01:21

Vamos a ajustar el tamaño de nuestras imágenes para que se vean bien con nuestra galeria

07:44

Vamos a crear nuestro formulario de contacto para la página principal

03:44

Vamos a crear nuestro menú para el footer

05:13

En este video crearemos una zona de Widgets,  y verás como utilizarlos 

03:23

Nuestro Diseño contará con 3 widgets distintos, vamos a agregar los otros

03:50

WordPress tiene una serie de variables con información útil, vamos a hacer uso de ellas en este video

04:27

Vamos a crear nuestro menú principal

08:45

Nuestro menú tiene un atributo para utilizar el efecto de Drilldown, veamos como utilizarlo

02:54

Foundation provee una serie de Utilidades en JavaScript, vamos a utilizar box en este video

07:22

Veamos como crear un template para nuestras páginas en WordPress

04:16

Vamos a crear un template para la página de Nosotros

04:56

Ahora crearemos un Template para Servicios

03:35

Vamos a imprimir todos nuestros servicios como en nuestro template original

05:53

Vamos a finalizar la sección de servicios en este video 

08:42

Vamos a crear el template para la sección de habitaciones en este video

05:04

En este video vamos a crear el Template para cada habitación

09:23

Continuamos avanzando en este proyecto, ahora crearemos la galeria para las habitaciones

03:56

Vamos a agregar la imagen del separador a nuestra página de habitación

02:48

Vamos a agregar otra habitación para ver como sería la forma de cargar todas las habitaciones

03:30

En este video vamos a crear nuestro formulario para reservaciones

07:18

Vamos a realizar algunos ajustes a nuestro formulario

05:01

Vamos a finalizar nuestro formulario de contacto

03:32

Vamos a eliminar algunos archivos que ya no son necesarios para nuestra plantilla

Section 8: Proyecto 2: Single Page con SASS, Gulp, Flexbox, Handlebars y más
05:22

Vamos a comenzar creando el proyecto utilizando Foundation CLI

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