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
