CursosEmpresasBlogLiveConfPrecios

Instalación de Foundation

Clase 5 de 21 • Curso de Foundation 2018

Clase anteriorSiguiente clase

Contenido del curso

Introducción

  • 1

    ¿Dónde aprender frontend actualizado?

    00:17 min
  • 2
    Introducción a Foundation y al proyecto del curso

    Introducción a Foundation y al proyecto del curso

    03:40 min
  • 3

    Repositorio del curso

    00:15 min
  • 4
    ¿Que es un framework frontend?

    ¿Que es un framework frontend?

    07:11 min

Creando el sitio web

  • 5
    Instalación de Foundation

    Instalación de Foundation

    Viendo ahora
  • 6
    Configuración de Foundation

    Configuración de Foundation

    06:22 min
  • 7
    Incorporando los iconos de Foundation

    Incorporando los iconos de Foundation

    03:03 min
  • 8
    La nueva grilla XY de Foundation

    La nueva grilla XY de Foundation

    14:54 min
  • 9
    Espaciado dentro de las grillas

    Espaciado dentro de las grillas

    08:57 min
  • 10
    Creando nuestro header

    Creando nuestro header

    11:23 min
  • 11
    Creando el menú de navegación

    Creando el menú de navegación

    09:53 min
  • 12
    Adaptando el menú de navegación para dispositivos móviles

    Adaptando el menú de navegación para dispositivos móviles

    08:32 min
  • 13
    Agregando un carrusel de imágenes con Orbit

    Agregando un carrusel de imágenes con Orbit

    09:59 min
  • 14
    Agregando una barra lateral de navegación

    Agregando una barra lateral de navegación

    14:33 min
  • 15
    Agregando el listado de productos

    Agregando el listado de productos

    17:49 min
  • 16
    Agregando un menú lateral off-canvas

    Agregando un menú lateral off-canvas

    09:25 min
  • 17
    Agregar Smooth Navigation

    Agregar Smooth Navigation

    06:56 min
  • 18
    Llevando nuestro sitio a producción

    Llevando nuestro sitio a producción

    07:49 min

Complementos- Creando emails para nuestros usuarios

  • 19
    Introducción a Foundation para Emails

    Introducción a Foundation para Emails

    03:23 min
  • 20
    Creando un email de recibo de compra

    Creando un email de recibo de compra

    10:33 min
  • 21
    Conclusiones del curso

    Conclusiones del curso

    00:57 min
Tomar examen
Resumen

Aprende cómo descargar e instalar la última versión de Foundation paso por paso, independientemente de tu sistema operativo.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads
        Teofilo Rosales Gama

        Teofilo Rosales Gama

        student•
        hace 7 años

        Milagro que usen windows!!!😄

          Alejandra Riscanevo

          Alejandra Riscanevo

          student•
          hace 7 años

          Hola! Si, sabemos que muchos de nuestros estudiantes usan Windows y quisimos darles todas las instrucciones de instalación desde aquí 😃 espero que les haya gustado! ❤️

          Michael Cardoza

          Michael Cardoza

          student•
          hace 7 años

          Raro que dejen la marca de HP 😄

        David Behar

        David Behar

        student•
        hace 6 años

        Si no pueden instalar el CLI porque da el error primordials is not defined necesitan usar una versión anterior de node, para eso pueden utilizar nvm.

        Para instalarlo en Mac o linux correr el comando:

        wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

        Reiniciar la terminal

        source ~/.bashrc # o source ~/.zshrc

        Para utilizar nvm

        nvm install v10.19.0
        nvm use v10.19.0

        Después de ésto ya debería funcionar

        foundation new
          Gonzalo Pimentel

          Gonzalo Pimentel

          student•
          hace 6 años

          Gracias me salvaste!

          Javier Andrés Moreno Tocarruncho

          Javier Andrés Moreno Tocarruncho

          student•
          hace 6 años

          Mil gracias David, gran aporte. Aunque quiero complementar que no funciona con Oh my zsh. Solo en la terminal normal. Gracias!

        Diego Enrique Silva Vega

        Diego Enrique Silva Vega

        student•
        hace 6 años

        Mi solución:

        Desinstalé Node 12, descargué la versión 10 en https://nodejs.org/dist/latest-v10.x/node-v10.20.1-x64.msi y la instalé. Después de eso abrí el terminal de comandos de node js como administrador y seguí todos los paso del video.

        Salu2

          Jacinto Del Garanazo

          Jacinto Del Garanazo

          student•
          hace 6 años

          gracias!!!

        Jhean Pacheco

        Jhean Pacheco

        student•
        hace 6 años

        El motivo del error “primordials is not defined” al ejecutar foundation new es porque la versión de Node.js no es compatible. La versión más actual compatibles es: v11.15.0 (x64) v11.15.0 (x86) NOTA: Se recomienda utilizar la consola de Node para navegar por las opciones de foundation al inizializar el proyecto (con la consola de Git no me lo permitía)

          Platzi Team

          Platzi Team

          student•
          hace 6 años

          🙌🙌🙌 Vaya, este es el comentario que deberia estar arriba, Muchas gracias compañero

        Platzi Team

        Platzi Team

        student•
        hace 6 años

        Tanto problemas en la instalacion es sinonimo de que ya no se usa ? 😪

        Nelson Alayón

        Nelson Alayón

        student•
        hace 6 años

        Me parece que no tiene sentido instalar algo que ya esta deprecated, voy a usar foundation por cdn. Solo me salen errores, que powershell no puede ejecutar script sin estar firmados, que primordials no está definido... mucho problema para intentar facilitar el diseño de una pagina

          Karenn Yeraldin Hernández Duarte

          Karenn Yeraldin Hernández Duarte

          student•
          hace 5 años

          Totalmente de acuerdo, tanta cosa resultó en una perdida de tiempo

          Luis Alejandro Vera Hernandez

          Luis Alejandro Vera Hernandez

          student•
          hace 5 años

          See.. creo que dejare este curso no mas...

        Johan Steward Galeano Torres

        Johan Steward Galeano Torres

        student•
        hace 6 años

        a alguien más le aparece un problema en la versión de node?

        Anotación 2020-02-08 214031.png
          Alberto Gómez Juan

          Alberto Gómez Juan

          student•
          hace 6 años

          Yo tengo el mismo error

          Alberto Gómez Juan

          Alberto Gómez Juan

          student•
          hace 6 años

          Parece que es un problema con la versión 12 o superior de Node.js

          Prueba instalando la versión 10.

        Fernando Galdós

        Fernando Galdós

        student•
        hace 5 años

        Les cuento mi experencia. Actualmente estamos en la Version 14xx de Node.js sin embargo, no es compatible con Foundation. Te recomiendo instalar la version 11 o hacer un Downgrade si tienes instalada una version mayor a la 11, las versiones estan aqui:

        https://nodejs.org/dist/latest-v11.x/

        Por otro lado, si al instalar con el comando "foundation new" te error de "primordials is not defined" debes ejecutar el siguiente comando:

        wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

        Luego debes cerrar tu terminal y volver a abrirla. Ejecuta nuevamente el comando "Foundation new" y deberia correr limpiamente.

        Aqui te comparto la guia desde Git por si quieres dar un vistazo

        https://github.com/foundation/foundation-zurb-template

          Eduardo Reyes

          Eduardo Reyes

          student•
          hace 5 años

          Gracias compañero, creo que no vale la pena hacer downgrade, es mejor usar el template compilado descargable o usar un CDN.

        Karla

        Karla

        student•
        hace 6 años

        Para solucionar el error de "primordials" tuve que bajar la versión 8 de node, la misma que usa el profesor en el curso. Creo que foundation no funciona con versiones superiores a la 10 de node.

        bruno guerra solano

        bruno guerra solano

        student•
        hace 5 años

        hola, me figura este error al momento de colocar foundation new

        Sin título.png
        verifico que hay consultas similares pero no me queda claro como resolver el problema

          Erik Elyager

          Erik Elyager

          student•
          hace 5 años

          Estás usando gulp? parece ser un problema de compatibilidad de versiones en la que recomiendan actualizar a gulp4. Mira aquí.

        Kevin Parra Lopez

        Kevin Parra Lopez

        student•
        hace 6 años

        Alguien mas tiene el error de instalación con NODE 12?

          Massimo Di Berardino

          Massimo Di Berardino

          student•
          hace 5 años

          ¡Hola @KMP535! Podrías compartirnos el error que te muestra en la instalación, para así poder ayudarte mejor

        Armando Chindoy

        Armando Chindoy

        student•
        hace 5 años

        Para los que usan Windows tambien hay un proyecto de nvm para windows que funciona bastante bien. Descargar nvm Abrir la consola de node y descargar node 10.23.0

        nvm install 10.23.0

        Cambiar de version de node :)

        nvm use 10.23.0
        bruno guerra solano

        bruno guerra solano

        student•
        hace 5 años

        verdaderamente los typo te hacen sufrir cuando estas en la linea de comando

          Juan Pablo Celiz

          Juan Pablo Celiz

          student•
          hace 5 años

          Claro! Por eso hay varios plugins para ayudarnos, en mi caso uso zsh-autosuggestions y zsh-syntax-highlighting, agregan un buen valor a nuestro trabajo en consola :)

        Leonardo Grabow

        Leonardo Grabow

        student•
        hace 7 años

        Estimados, revisar los links de Node y Foundation porque no funcionan

          Diego Forero

          Diego Forero

          Team Platzi•
          hace 7 años

          Los enlaces están funcionando sin problema, ya se corrigió el error con las imagenes de los favicons.

          Leonardo Grabow

          Leonardo Grabow

          student•
          hace 7 años

          Gracias @GOLUM23

        Belén Sosa

        Belén Sosa

        student•
        hace 5 años

        Hola, me ayudarían con este error?

        error.png

          Leonardo de los angeles Espinoza Hernandez

          Leonardo de los angeles Espinoza Hernandez

          student•
          hace 5 años

          Hola @belensosa

          Intentando abriendo la consola como administrador de esa forma debería solucionarse tu problema

          saludos!

          Belén Sosa

          Belén Sosa

          student•
          hace 5 años

          Gracias!, pero como hago eso?

        Jancarlos Santiago

        Jancarlos Santiago

        student•
        hace 5 años

        Me sale error al momento de crear un nuevo proyecto de foundation. ¿Alguna sugerencia sobre qué hacer?

        Wilkins Bernardo Brito Serrano

        Wilkins Bernardo Brito Serrano

        student•
        hace 5 años

        No se me instala esta parte, no entiendo ¿por qué será? que alguien me de una mano por favor. C:\Users\Wilkins\Desktop>foundation new "foundation" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.

        juan carlos oyola hidalgo

        juan carlos oyola hidalgo

        student•
        hace 5 años

        Hola, tengo problemas de espacio con mi lap, pues tengo un disco SSD de 256GB, ¿ me pregunto si habria algun problema en el funcionamiento si se escoje alguna ruta de instalación diferenta a la del sistema operativo para (node JS, git) a la que marca por defecto, esdecir dirigir la ruta de instalación a un HDD externo de mayor capacidad?

        asi mismo cuando se ejectua el comando "npm install --global windows-build-tools" este instala python en la unidad donde se ejecuta el comando?, habria problema si este se ejecuta desde una unidad diferente a donde esta instalado el sistema operativo?

          juan carlos oyola hidalgo

          juan carlos oyola hidalgo

          student•
          hace 5 años

          resulta la misma pregunta para ejecutar el comando "npm install --global foundation-cli" desde una unidad diferente a a donde esta instalado el sistema operativo?, habria problemas en el funcionamiento.?

        JOSE GUILLERMO VÁSQUEZ BENITEZ

        JOSE GUILLERMO VÁSQUEZ BENITEZ

        student•
        hace 5 años

        Que hago si en windows 10 la version 2.7 de python no se instala

        Captura.PNG

          Ricardo Jurado

          Ricardo Jurado

          student•
          hace 5 años

          Que tal Guille!

          has probado con la 3.5?

          Saludos hermano!

          JOSE GUILLERMO VÁSQUEZ BENITEZ

          JOSE GUILLERMO VÁSQUEZ BENITEZ

          student•
          hace 5 años

          Hola Ricardo si lo he hecho, sin embargo a la hora de correr fundation me genera el error, al parecer la version 3.9.2 no funciona en la terminal al iniciar un proyecto en fundation, ni siquiera si elimino esta mas reciente e instalo la version 3.5, en fin lo hare llamando mediante links a los enlaces web. Mil gracias.

        Karen Gómez

        Karen Gómez

        student•
        hace 6 años
        error.jpg
        Y ahora??? Ayuda!!!
          Luis Lira

          Luis Lira

          student•
          hace 6 años

          ¡Hola! :D

          Estuve investigando un poco y lo que encontré es que el error se debe a una incompatibilidad del cli de foundation con node 12. Lo que podrías hacer usar la versión 10 de node en vez de la 12.

          Existe una versión de NVM para Windows, para que puedas tener varias versiones de Node en tu computadora, la puedes encontrar en el siguiente enlace: NVM Windows

          ¡Nunca pares de aprender! 💚

          Karen Gómez

          Karen Gómez

          student•
          hace 6 años

          Ahora la situación es que node no se deja desinstalar, he buscado y he seguido intructivos y no se deja. ayuda de nuevo :(