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

Name: Diseño Web Responsive con Foundation for Sites SASS y XYGrid
Rating: 4.5 (177 reviews)

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

Highest Rated

Created byJuan Pablo De la torre Valdez

Last updated 11/2018

Spanish

What you'll 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

Course content

19 sections • 204 lectures • 17h 9m total length

Proyecto 1: Sitio web cafeteria con XY Grid, ZURB Template, Flexbox y SASS3:29
Este será el primer proyecto del curso, vamos a conocerlo
Proyecto 2: Un sitio Web para un Hotel (Foundation 6, SASS y WordPress)4:22
Daremos un visto al proyecto final que construiremos en este curso.
Proyecto 3: Un single Page con Flexbox, Handlebars y Gulp (Foundation 6 y SASS)3: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

Que es el XY Grid3:32
En este video veremos que es el XY Grid
Creando el Proyecto5:04
Vamos a crear el proyecto para trabajar un poco con el XY Grid e irlo conociendo
Los Templates de Foundation4:35
En el video anterior elegimos un Template de Foundation, veamos que son y las diferencias entre el Basic y el ZURB
XY Grid - Grid Horizontales6:18
Veamos un poco de los Grids Horizontales en el XY Grid
XY Grid - Grids Verticales3:12
El nuevo XY Grid también permite el uso de Grid Verticales, veamos como usarlo
XY Grid - Grid Frame3:18
En este video veremos otra parte del Grid, llamada Grid Frame
XY Grid - Utilizando los Mixins de SASS8:50
Si te gustaría escribir un código usando tus propias clases, veamos como hacerlo con los Mixins
XY Grid - Alinear elementos desde el padre usando Flexbox7:10
El nuevo grid tiene una sintaxis especial para alinear elementos, veamos como hacerlo
XY Grid: Alinear un elemento hijo por si mismo3:26
Un elemento hijo también puede ser alineado por si mismo, veamos como hacerlo
XY Grid: Alinear desde el padre con Mixins9:19
Veamos como alinear un elemento utilizando Mixins
XY Grid: Alinear elemento por si mismo con Mixins8:06
En este video veremos como alinear un elemento por si mismo con Mixins

Creando el Proyecto de la Cafeteria4:32
Vamos a crear el nuevo proyecto
Los Archivos para el Primer Proyecto1:06
En este video encontrarás las imágenes, photoshop y guia de estilos de este curso
Primeros pasos con el Encabezado del Sitio7:52
Vamos a comenzar a escribir el código HTML de nuestro proyecto
Añadiendo un archivo .scss para nuestros estilos7:22
Crearemos un archivo .scss en el que tendremos todo nuestro código para nuestro proyecto
Alineando elementos en el Encabezado3:38
En este video veremos como alinear el encabezado del sitio web
Estilos al Menú de Navegación5:02
Veamos como trabajar con la navegación del sitio web
Estilos al texto de la imagen principal2:49
Vamos a darle estilos a la imagen principal de nuestro encabezado
Finalizando los Estilos al Header6:32
En este video finalizaremos los estilos al header
Añadiendo una fuente de Google Fonts4:42
Nuestro diseño utiliza 2 fuentes de Google Fonts, veamos como añadirlas
Creando un Menú de Hamburguesa para dispositivos móviles10:19
Vamos a crear una navegación Responsive para nuestro proyecto
Creando el Footer del Sitio Web3:08
En este video comenzaremos a darle estilos al Footer del Sitio web
Estilos al Footer7:18
En este video le daremos estilos al footer de nuestro sitio web
Añadiendo Font Awesome3:05
Veamos como añadir font awesome para los iconos sociales
Estilos al Menu de Redes Sociales7:11
Una vez que añadimos Font Awesome, veamos como darle los estilos al menú de redes sociales

Creando la página de nosotros4:01
Vamos a crear la página de Nosotros
Mostrando una imagen principal diferente4:36
Cada que abramos una página nueva, lo ideal es mostrar una imagen distinta, veamos como hacerlo
Agregando el HTML de la página de nosotros3:49
Vamos a escribir el código HTML de esta página
Estilos al contenido principal de Nosotros3:58
Una vez que tenemos el HTML, vamos a crear el código SASS Para que se vea como deseamos
Estilos a los encabezados principales6:52
Los encabezados de nuestra página web son un poco especiales, veamos como hacerlos
Estilos al contenido de Nosotros6:40
Veamos como crear el CSS de la página de Nosotros

Creando la página del Menú2:01
Una de las páginas con funciones más avanzadas es la del Menú, veamos como crearla
Escribiendo el HTML del menú1:54
Vamos a escribir el HTML de la parte superior de la sección de Menú
Estilos al Menú4:23
Antes de continuar, vamos a darle estilos al código recién creado
Creando la sección con la lista de precios1:55
Vamos a comenzar a crear la sección con la lista de precios
Estilos al contenedor del menú4:38
Vamos a escribir el CSS del contenedor de nuestro menú y lista de precios
Leyendo un archivo JSON6:55
En este video veremos como leer un archivo JSON, para no repetir tanto nuestro código
HTML de la lista de precios3:28
Vamos a imprimir el HTML de la lista de precios
Estilos a la lista de precios4:47
Vamos a darle estilos a la lista de precios!
Finalizando la lista de precios2:46
Vamos a finalizar el listado de precios y platillos de este café!

Requirements

Usuarios con Windows necesitan instalar NodeJS, Python, NPM, Git, Windows Build Tools, Gulp, Bower, Foundation CLI (Hay un capitulo completo de como hacerlo)
No escribiremos código Python o NodeJS, pero se necesita para instalar Foundation
Haber escrito un poco de HTML y CSS es suficiente para comenzar este curso
No es necesario tener experiencia con SASS
Si deseas dar un paso más adelante en tus habilidades de Desarrollador Web este curso es para ti
Hemos agregado como Convertir el diseño de este proyecto a un Tema de WordPress, para crear sitios 100% dinamicos!

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.

Who this course is for:

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
Estudiantes que deseen aprender SASS
Estudiantes que deseen aprender Responsive Web Design

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

What you'll learn

Explore related topics

Course content

Introducción al Curso: Revisando los Proyectos Finales3 lectures • 12min

Introducción a Foundation 61 lecture • 4min

Instalar Foundation for Sites en Windows 103 lectures • 17min

Instalar Foundation for Sites en Ubuntu o Mac2 lectures • 9min

Primeros pasos con el XY Grid11 lectures • 1hr 3min

Los Mixins de Foundation4 lectures • 23min

PROYECTO 1: Sitio Web para una Cafeteria14 lectures • 1hr 15min

Proyecto 1: Trabajando con la Sección de Nosotros6 lectures • 30min

Proyecto 1: Creando la sección de Procesos3 lectures • 13min

Proyecto: 1 Creando la sección del Menú9 lectures • 33min

Requirements

Description

Who this course is for: