Diseño Web Responsive con Foundation for Sites SASS y XYGrid

Aprende el Framework FRONTEND más AVANZADO para sitios RESPONSIVE en este curso 100% práctico elaborarás 4 PROYECTOS

4.50 (171 reviews)
Udemy
platform
Español
language
Web Design
category
1,108
students
17 hours
content
Nov 2018
last update
$49.99
regular price

What you will learn

Utilizar el nuevo XYGrid en Foundation hecho con SASS y Flexbox

Utilizar los distintos componentes, variables y mixins de Foundation y adaptalo a tus necesidades

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

Description

Curso Actualizado a la última Versión de Foundation y utiliza XYGRID! Un grid desarrollado con Flexbox y SASS.

¿Estas listo para crear asombrosos e increibles 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.

En este curso estaremos creando distintos proyectos con Foundation! aprendiendo con Proyectos es la forma más fácil de comprender algo y aplicarlo al mundo real!

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.

Content

Introducción al Curso: Revisando los Proyectos Finales

Proyecto 1: Sitio web cafeteria con XY Grid, ZURB Template, Flexbox y SASS
Proyecto 2: Un sitio Web para un Hotel (Foundation 6, SASS y WordPress)
Proyecto 3: Un single Page con Flexbox, Handlebars y Gulp (Foundation 6 y SASS)

Introducción a Foundation 6

Que es Foundation for Sites?

Instalar Foundation for Sites en Windows 10

Ambiente de Desarrollo para Windows Con NPM Git y Python
Instalando Gulp, Bower, Foundation CLI y Windows Build Tools
Creando el Proyecto de Foundation for Sites

Instalar Foundation for Sites en Ubuntu o Mac

Instalar Foundation for Sites en una MAC
Instalar Foundation for Sites en Ubuntu

Primeros pasos con el XY Grid

Que es el XY Grid
Creando el Proyecto
Los Templates de Foundation
XY Grid - Grid Horizontales
XY Grid - Grids Verticales
XY Grid - Grid Frame
XY Grid - Utilizando los Mixins de SASS
XY Grid - Alinear elementos desde el padre usando Flexbox
XY Grid: Alinear un elemento hijo por si mismo
XY Grid: Alinear desde el padre con Mixins
XY Grid: Alinear elemento por si mismo con Mixins

Los Mixins de Foundation

Mixins de SASS
Mixins en Foundation Parte 1 de 2
Mixins en Foundation Parte de 2 de
La función o Mixin REM-CALC()

PROYECTO 1: Sitio Web para una Cafeteria

Creando el Proyecto de la Cafeteria
Los Archivos para el Primer Proyecto
Primeros pasos con el Encabezado del Sitio
Añadiendo un archivo .scss para nuestros estilos
Alineando elementos en el Encabezado
Estilos al Menú de Navegación
Estilos al texto de la imagen principal
Finalizando los Estilos al Header
Añadiendo una fuente de Google Fonts
Creando un Menú de Hamburguesa para dispositivos móviles
Creando el Footer del Sitio Web
Estilos al Footer
Añadiendo Font Awesome
Estilos al Menu de Redes Sociales

Proyecto 1: Trabajando con la Sección de Nosotros

Creando la página de nosotros
Mostrando una imagen principal diferente
Agregando el HTML de la página de nosotros
Estilos al contenido principal de Nosotros
Estilos a los encabezados principales
Estilos al contenido de Nosotros

Proyecto 1: Creando la sección de Procesos

Creando la página de Proceso
Agregando el HTML de la sección de Proceso
Estilos a la sección de Proceso

Proyecto: 1 Creando la sección del Menú

Creando la página del Menú
Escribiendo el HTML del menú
Estilos al Menú
Creando la sección con la lista de precios
Estilos al contenedor del menú
Leyendo un archivo JSON
HTML de la lista de precios
Estilos a la lista de precios
Finalizando la lista de precios

Proyecto 1: Creando la sección de la Galería

Proyecto 1: Creando la página de la galería
Creando la galería (Parte 1)
Escribiendo el Grid de la Galería
Finalizando el CSS de la Galería superior
Reemplazando las imágenes de la Galería
Creando la parte inferior de la galería
Escribiendo el CSS para el Grid
Finalizando el CSS para el Grid de la Galería
Finalizando la Galería

Proyecto 1: Creando la sección de Contacto

Creando la página de Contacto
Creando el formulario de Reservación
Estilos al formulario de Contacto

Proyecto 1: Trabajando con la página Principal

Creando la página de inicio
Estilos al Contenido Principal
Estilos a los iconos principales
Utilizando los parciales para la galeria
Utilizando los parciales para el Menú de platillos
Creando la sección de Testimoniales
Estilos al Slider de Testimoniales
Añadiendo transiciones al slider con Motion UI

Proyecto 1: Foundation Avanzado

Añadiendo Motion UI al Menú Principal
Añadiendo Validación con Abide Validation al Formulario
Instalando Librerias JavaScript con Webpack
Eventos para el Formulario de Contacto
Escribiendo el código para enviar peticiones Ajax
Escribiendo el Script de PHP para enviar correos
Enviando todo el proyecto a Producción
Realizando una Reservación para probar que todo funcione

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

Habilitar Foundation For Sites 6.3
Los Archivos PSD o Photoshop para esta sección
Los Archivos para este Curso (Proyecto 1)
Creando la sección de Habitaciones
Cambiando variables de SASS
Creando un archivo SCSS externo para nuestros estilos SASS
Utilizando y entendiendo Mixins
Agregando Google Fonts con SASS
Agregando las imágenes de Fondo a nuestro diseño
Media Queries con Foundation for Sites
Creando una Galería de Imágenes
Estilos a nuestro Galería y sección Nosotros
Agregando una segunda imagen de Fondo
Creando la sección para Reservaciones
Comenzando a Crear el Footer (HTML y Clases de Foundation)
Agregando Foundation for Icons en el Footer
Agregando estilos a nuestro Footer
Agregando Video HTML5
Agregando Nuestro Logotipo
Escribiendo Estilos al Header (Video 1 de 2)
Escribiendo Estilos al Header (Video 2 de 2)

Foundation 6: Agregando Componentes en Foundation for Sites

Agregando Off Canvas para nuestra navegación
Agregando Menú y Drilldown a nuestro Off-Canvas
Estilos a nuestro Menú y Off Canvas
Agregando Reveal para las imágenes
Creando una función JavaScript para cargar nuestras imágenes dinámicamente
Agregando Motion UI
Agregando un Formulario a una Ventana Reveal (Modal)
Conociendo los Campos de Texto de HTML5
Abide Validation Para Validación de Formularios

Foundation 6: Trabajando con las Secciones Internas

Creando un Template para las Páginas Internas
Creando una Función en JavaScript para Controlar la Altura de Nuestro Header
Trabajando con la página de Nosotros.
Agregando una Fuente de Google Fonts para los Párrafos
Creando la Sección de Servicios
Centrando el Contenido Verticalmente
Utilizando Equalizer
Finalizando la Sección de Habitaciones
Creando las páginas para cada una de nuestras Habitaciones
Creando un Menú y cambiando los estilos CSS
Agregando Data Magellan a nuestro sitio
Creando el Formulario de Contacto (Video 1 de 2)
Creando el Formulario de Contacto (Video 2 de 2)
Agregando estilos al Formulario de Contacto
¿Donde encontrar la documentación Oficial de Foundation for Sites?

Convirtiendo nuestro proyecto a un Tema de WordPress

Instalando WordPress Localmente
Creando un Tema en WordPress
Agregando hojas de estilo en nuestro tema
Agregando Archivos de JavaScript a nuestro tema
Creando un Header y un Footer
Agregando las páginas principales
Revisando la Jerarquia de Temas en WordPress
Creando las páginas para habitaciones
Realizando una consulta a la Base de Datos
Ajustando las fotografias de las habitaciones
Agregando campos extras con Advanced Custom Fields
Agregando imágenes principales al Inicio
Mostrando información de otra página en el Inicio
Creando una Galeria en WordPress
Finalizando nuestra Galeria
Ajustando las imágenes de la galeria
Creando un formulario de contacto en WordPress
Registrado y Creando un Menu en WordPress
Creando una Zona de Widgets
Creando todas las zonas de widgets necesarias
Mostrando el logotipo, slogan y videos
Creando e Imprimiendo el Menú Principal
Haciendo nuestro menú compatible con el Drilldown
Conociendo las utilidades de JavaScript para nuestro Overlay
Creando el Template para Páginas
Creando el Template para la página de Nosotros
Creando el Template para Servicios
Mostrando lo servicios en su página
Finalizando la sección de Servicios
Creando la sección de habitaciones
Creando la sección para cada Habitación
Creando la galeria para las habitaciones
Agregando la imagen del separador y formulario en Habitaciones
Agregando una habitación más
Creando el formulario de reservaciones
Ajustes a nuestro Formulario de Reservaciones
Últimos ajustes al formulario de Contacto y viendo donde se guardan los mensajes
Limpiando nuestro Tema de Archivos Innecesarios

Proyecto : Single Page con SASS, Gulp, Flexbox, Handlebars y más

Creando el Proyecto
Primeros pasos con ZURB Template
Comenzando a trabajar con Panini
Variables dentro de los Templates
Handlebars dentro de ZURB Template (leyendo un archivo YML y JSON)
Viendo el Diseño de Photoshop para esta sección
Habilitar Flexbox en ZURB Template
Importando las imágenes a nuestro proyecto y creando un Header
Creando un menú de navegación
Media Queries con JavaScript para detectar resizing
Detectando el tamaño actual con JavaScript
Agregando Orbit Slider (Parte 1 de 2)
Agregando Orbit Slider (Parte 2 de 2)
Agregando Animaciones a nuestros slides con Motion UI
Agregando una hoja de estilos con SASS
Dando estilos a nuestro Menú Principal
Dando estilos a la navegación Responsive
Estilos CSS a nuestro Slider
Creando la sección sobre nosotros con Flex Grid
Agregando Foundation Icons a nuestro proyecto
Agregando una fuente de Google Fonts y aplicándola a nuestros headers
Finalizando los estilos de la sección Sobre Nosotros
Creando un menú de redes sociales en el header
Finalizando nuestro menú de redes sociales
Leyendo un JSON para mostrar nuestros productos
Agregando HTML a nuestros productos para mostrarlos con Foundation
Finalizando la sección de productos con SASS
Trabajando con la sección de Testimoniales
Estilos a nuestro Slider de Testimoniales
Clases de Flexbox para Reordenar elementos
Creando un formulario de Contacto
Agregando Estilos a nuestro formulario
Creando un Footer
Clases de Foundation y Flexbox para alinear elementos
Agregando Data Magellan y detectando el Scrolling del usuario en el sitio
Detectando la sección actual del sitio web en la barra de navegación
Toques finales para dispositivos móviles

Screenshots

Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Screenshot_01Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Screenshot_02Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Screenshot_03Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Screenshot_04

Reviews

Jose
February 8, 2021
La actividad no funciona con node.js arriba de node10.0.0 y quedan obsoletas todas las actividades por favor corrijan
Edgar
February 6, 2021
Me agradó mucho el curso. La guía por parte Juan Pablo es clara y fácil de entender. En una actualización me gustaría ver un poco de Foundation for emails.
Diego
November 30, 2016
Lo recomiendo encarecidamente. Es muy difícil encontrar cursos en español de tanta calidad como éste. El instructor explica muy bien el funcionamiento de conceptos del Framework que pueden resultar complejos para los novatos, sobre todo desde que se trabaja con el CLI y SCSS, no directamente sobre las hojas de estilo. Te pone a trabajar rápidamente sobre la práctica, ya que el curso se estructura a partir del diseño de un proyecto sobre la web de un hotel. Muy útil para quien desee ponerse al día con las nuevas tecnologías en desarrollo front-end.
Victor
November 2, 2016
hasta el momento tengo 14 cursos y la verdad que este es el único, que ha dicho y hecho tal lo prometido. crear una página web . no como la gran mayoría de instructores que prometen crear desde un hola mundo hasta una aplicación y se quedan ni a la mitad clases mal explicadas gracias , he conseguido aprender mas en menos de 3 dias que casi en un año profe hay otros cursos que me interesan para cuando terminemos este seguir gracias de antemanos 10 sobre 10
Felipe
August 17, 2016
Excelente Curso, de las mejoras, explica con mucho detalle, Quisiera otros cursos del mismo tutor; muy buena calidad de enseñanza
Maicon
June 27, 2016
Great course, one of the best I've ever bought on the UDEMY platform, the teacher is didactic and worried about updating the course when the tool is updated. I highly recommend this course. Thank you Juan Pablo De la Torre Valdez, continue with this excellent work.
Juan
June 17, 2016
La mayoría de la gente trabaja en ambiente Windows, deberían orientar cursos a los dos ambientes. Actualización: La reseña inicial la hice antes de que salieran los videos en ambiente Windows. El error es de la plataforma porque hace las preguntas iniciando el curso y no al final. El curso esta bueno. Una anotación con respecto a los recursos: Sería bueno que e pudieran descargar todos los recursos al tiempo con la estructura del curso y no tener que ir creando en el equipo una a una las carpetas y la estructura del curso para tener los videos organizados. Adicionalmente, sería bueno tener el código generado en el curso para examinarlo mejor. Por último, felicitaciones.
Miquel
June 17, 2016
Por ahora no esta mal, lo que si me faltan son los códigos de los ejemplos para poder cotejar mis errores, ya que en algunos casos el comportamiento de los objetos no ha sido el esperado.
Alfonso
May 23, 2016
El profesor utiliza un código simple y bien explicado, y es muy claro explicándolo con pasos muy fáciles para personas ya relacionadas con css u otros frameworks de css. No le pongo la 5ª estrella por que no da soporte a Linux y quizás debiese cambiar el orden de los proyectos, o quitar del curso los dos últimos (son de menor calidad y de Foundation 5 además).
Gustavo
April 2, 2016
Excelente, tu material llevar paso a paso la explicación te hacer comprender el funcionamiento. Te atrapa y podes estar viendo los vídeos uno tras otro. Lo recomiendo para principiantes y avanzados. El curso es muy bueno, felicitaciones. Te deseo mucho éxito.
David
February 2, 2016
La verdad, muy recomendado; muy bien explicado y todo muy bien. Foundation la verdad, desde que lo vi la primera vez me gusto mucho, es una muy buena opción de aprender.
Edwin
January 28, 2016
Le saco una estrella porque es un curso de Foundation 5 con el agregado de Foundation 6. Por lo demás le daría las 5 estrellas.
Edgar
January 26, 2016
Originalmente este curso era de zurb foundation 5 y tiene muy buen contenido, pero despues salio la version mas actual de zurb foundation 6 y el instructor actualizo el curso. Añadio nuevos videos de la nueva version. Asi es que te estas llevando 2 cursos en lugar de solo 1. Todo esta muy bien explicado y sobre todo las nuevas caracteristicas que tiene Zurb Foundation 6. Construyes junto con el instructor un sitio completo, con paginas internas. Las preguntas o dudas que tengas te responde el instructor. Muy recomendado este curso. Tiene mucho valor.
Oscar
October 16, 2015
toca los puntos importantes, de una manera muy practica, muy recomendable. el instructor mantiene el contenido siempre actualizado
Sami
August 8, 2015
Un curso muy útil y bien estructurado que explica todos los pormenores de Foundation y SASS. El soporte continuo del autor Juan Pablo es inmejorable, respuestas rápidas y detalladas en el seguimiento del curso. Recomiendo todos sus cursos!

Charts

Price

Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Price chart

Rating

Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Ratings chart

Enrollment distribution

Diseño Web Responsive con Foundation for Sites SASS y XYGrid - Distribution chart

Related Topics

535696
udemy ID
6/24/2015
course created date
11/20/2019
course indexed date
Bot
course submited by