CursosEmpresasBlogLiveConfPrecios

¿Que es un framework frontend?

Clase 4 de 21 • Curso de Foundation 2018

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?

    Viendo ahora

Creando el sitio web

  • 5
    Instalación de Foundation

    Instalación de Foundation

    08:33 min
  • 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

Descubre las características de un framework frontend, en particular aquellos de CSS.

Analizaremos por qué y para qué tipo de proyectos conviene usarlos, en qué aspectos ayudan a ser rmás organizados, y qué herramientas contiene cada uno.

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
        Jonatan Padilla

        Jonatan Padilla

        student•
        hace 8 años
        • Por que usar un framework Frontend?

          • Ahorrar tiempo
          • Componentes visuales pre-armados para nuestro sitio.
          • Responsive design
          • Seguridad en la usabilidad del codigo que nos brinda.
          Cesar Octavio de Jesus Meza Carrillo

          Cesar Octavio de Jesus Meza Carrillo

          student•
          hace 8 años

          En efecto, es una ayuda enorme para ahorrar tiempo y concentrar nuestros esfuerzos a lo realmente importante.

          Harold David Avila Sabogal

          Harold David Avila Sabogal

          student•
          hace 7 años

          Gracias

        Rafael Jair Sanchez Alviso

        Rafael Jair Sanchez Alviso

        student•
        hace 8 años

        Aquí dejo los encales de los otros frameworks que menciono Sacha

          Cesar Octavio de Jesus Meza Carrillo

          Cesar Octavio de Jesus Meza Carrillo

          student•
          hace 8 años

          eh bulma es muy bueno tambien 😃

          Harold David Avila Sabogal

          Harold David Avila Sabogal

          student•
          hace 7 años

          gracias

        David Barreto

        David Barreto

        student•
        hace 8 años

        Es genial el trabajo que nos ahorran estos Frameworks

        Que es un Frameworks Frontend

        • También conocidos como Frameworks CSS
        • Son una base para empezar un proyecto web permitiendo flexibilidad en el diseño
        • Organización y estructura de nuestro HTML. CSS, y JS

        Que trae un Frameworks Frontend

        • Grilla
        • Estilos para las fuentes
        • Componentes visuales pre-armados

        Para que quiero usar un Frameworks Frontend

        • Ahorrar tiempo
        • Componentes visuales
        • Responsive design
        • El código anda

        Ejemplos de un Frameworks Frontend

        • Bootstrap
        • Foundation
        • Bulma
        • Flexbox grid

        Mi pregunta es cual elegir para mi proyecto?

          Harold David Avila Sabogal

          Harold David Avila Sabogal

          student•
          hace 7 años

          Muchas gracias

          Miguel Angel Lozano Alvarez

          Miguel Angel Lozano Alvarez

          student•
          hace 6 años

          Excelente aporte!

        Daniel Muñoz Martín

        Daniel Muñoz Martín

        student•
        hace 8 años

        Un Framework Frontend es la manera de desarrollar tus proyectos de una manera rápida.

          Harold David Avila Sabogal

          Harold David Avila Sabogal

          student•
          hace 7 años

          muy versátil

        David Alejandro Mosquera Moreno

        David Alejandro Mosquera Moreno

        student•
        hace 6 años

        Otro también muy bueno es tailwindcss

        andrés eduardo betancourt bescanza

        andrés eduardo betancourt bescanza

        student•
        hace 6 años

        Aqui el estado de los frameworks de css al dia de hoy. 14/06/2020

        https://2019.stateofcss.com/technologies/css-frameworks/

        Captura.PNG
          Jefferson Andres Espejo Goez

          Jefferson Andres Espejo Goez

          student•
          hace 6 años

          Tailwind pronto va a ser el más usado :3

          Luis Alejandro Vera Hernandez

          Luis Alejandro Vera Hernandez

          student•
          hace 5 años

          Estas estadisticas si que me gustan!

        Cesar Octavio de Jesus Meza Carrillo

        Cesar Octavio de Jesus Meza Carrillo

        student•
        hace 8 años

        Otro framework parecido seria Materializecss.

        Juan Camilo Castillo Camacho

        Juan Camilo Castillo Camacho

        student•
        hace 6 años

        Creo que debí tomar este curso antes que el de Bootstrap.

        Diego Andrés Rojas González

        Diego Andrés Rojas González

        student•
        hace 8 años

        Mi primer framework frontend fue Bulma vamos a ver como me va con foundation.

          David Behar

          David Behar

          student•
          hace 6 años

          ¿Qué pensaste de bulma vs foundation?

        Alex Camacho

        Alex Camacho

        teacher•
        hace 6 años

        Usar un framework mejora la vida <3 pero recuerden no usar frameworks si no dominan la base en este caso CSS.

        Fernando Galdós

        Fernando Galdós

        student•
        hace 5 años

        Resumen del Capitulo

        Son: Conocidos también como Frameworks CSS Base para empezar un proyecto web permitiendo flexibilidad en el diseño. Organización y Estructura de nuestro HTML, CSS y JS ¿Qué contienen? Grilla Estilos para las fuentes Componentes Visuales Pre-Armados (Botones,Modales, Galerías,etc) Ventajas: Ahorran Tiempo Componentes Visuales Pre-Armados ( Responsive Design Seguridad en la usabilidad del código que nos brinda.

          Luis Alejandro Vera Hernandez

          Luis Alejandro Vera Hernandez

          student•
          hace 5 años

          Se te agradece el resumen compañero

        Cesar Octavio de Jesus Meza Carrillo

        Cesar Octavio de Jesus Meza Carrillo

        student•
        hace 8 años

        Habra alguna lista de frameworks en general para probar opciones diferentes?

          Diego Forero

          Diego Forero

          Team Platzi•
          hace 8 años

          Buscando por alternativas a boostrap en google encontré este listado aquí no incluyen otro interesante que se llama bulma

        Luis Miguel Ramos Hernández

        Luis Miguel Ramos Hernández

        student•
        hace 7 años

        Por lo que se flexboxgrid es una libreria, ya que no cumple con las caracteristicas de un framework.

          Kevin Morales

          Kevin Morales

          student•
          hace 6 años

          Sí, no es más que un sistema de grillas para ayudar a estructurar nuestro contenido. No es un framework.

        Angélica Rocha

        Angélica Rocha

        student•
        hace 6 años

        Muchas gracias Sacha esta clase me había hecho falta en el curso de Bootstrap.

        Camilo Alexander Velandia Velandia

        Camilo Alexander Velandia Velandia

        student•
        hace 6 años

        materialze se ve interesante

        Antonio Luis Fernandez Dromundo

        Antonio Luis Fernandez Dromundo

        student•
        hace 5 años

        Importante siempre practicar con Vanilla antes de usar algun framework para siempre saber por que se hacen las cosas

        Adrian Margni

        Adrian Margni

        student•
        hace 7 años

        Hola a todos, con node.js no pude instalar foundation, lo hice con el simbolo del sistema, mi duda es; sigo utilizando el simbolo o trato de reparar el problema con node? uso windows 10

        Platzi Team

        Platzi Team

        student•
        hace 6 años

        Un Framework es un sistema de diseño ?

        Asis Melgarejo Lopez

        Asis Melgarejo Lopez

        student•
        hace 6 años

        ¿Cómo se complementa estos Frameworks CSS con Frameworks de JS como React o Angular?

          John Alexander Diaz Astudillo

          John Alexander Diaz Astudillo

          student•
          hace 6 años

          Como todo cambia tan rápido... siempre he usado bootstrap para darle estilos al front de una manera rápida, puesto que me inclino mas al backend. Pero uno se aburre de ver que todos los proyectos son iguales, los mismos colores, los mismos botones siempre. Aunque también he usado angular que es front con bootstrap. Yo creo que lo que mas uso eso es el grid, pero actualmente hay opciones en css que se aprenden "fácilmente" (flexbox, grid layout, media queries). En fin, hay gente que hace cosas increíbles con bootstrap, otros con solo css y js puro.

        Matias Alexander Ibarra Trujillo

        Matias Alexander Ibarra Trujillo

        student•
        hace 6 años

        se puede usar mas de uno ?

          Usuario anónimo

          Usuario anónimo

          user•
          hace 6 años

          no es romendable ya que las clases de los framworks se pueden pisar entre ellas

          Moisés Cedeño

          Moisés Cedeño

          student•
          hace 6 años

          No deberías.