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

• 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)

• Que es Foundation for Sites?

• 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 una MAC

• Instalar Foundation for Sites en Ubuntu

• 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

• Mixins de SASS

• Mixins en Foundation Parte 1 de 2

• Mixins en Foundation Parte de 2 de

• La función o Mixin REM-CALC()

• 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

• 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

• Creando la página de Proceso

• Agregando el HTML de la sección de Proceso

• Estilos a la sección de Proceso

• 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 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

• Creando la página de Contacto

• Creando el formulario de Reservación

• Estilos al formulario de Contacto

• 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

• 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

• 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)

• 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

• 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?

• 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

• 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