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