CursosEmpresasBlogLiveConfPrecios

¿Que es un framework de frontend?

Clase 3 de 21 • Curso de Bootstrap 4

Clase anteriorSiguiente clase

Contenido del curso

Introducción al curso

  • 1

    Repositorio del curso de bootstrap

    00:15 min
  • 2
    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    03:23 min
  • 3
    ¿Que es un framework de frontend?

    ¿Que es un framework de frontend?

    Viendo ahora
  • 4
    Nuestro Proyecto: Hola Mundo de Bootstrap

    Nuestro Proyecto: Hola Mundo de Bootstrap

    02:34 min

Creando el sitio web

  • 5
    La grilla de Bootstrap

    La grilla de Bootstrap

    12:09 min
  • 6
    Reto: La grilla de Bootstrap

    Reto: La grilla de Bootstrap

    05:43 min
  • 7
    El footer

    El footer

    10:38 min
  • 8
    El header de nuestro sitio

    El header de nuestro sitio

    13:18 min
  • 9
    Creando un carousel de imágenes

    Creando un carousel de imágenes

    07:58 min
  • 10
    Agregando texto informativo del evento

    Agregando texto informativo del evento

    12:51 min
  • 11
    Agregando botones

    Agregando botones

    04:42 min
  • 12
    Las cards de Bootstrap 4

    Las cards de Bootstrap 4

    11:44 min
  • 13
    Pastillas de texto

    Pastillas de texto

    04:38 min
  • 14
    Agregando un contenedor de ancho completo

    Agregando un contenedor de ancho completo

    12:26 min
  • 15
    Los formularios de Bootstrap 4

    Los formularios de Bootstrap 4

    15:43 min
  • 16
    Agregando un tooltip

    Agregando un tooltip

    04:07 min
  • 17
    Scrollspy: Conociendo la ubicación del usuario en el header

    Scrollspy: Conociendo la ubicación del usuario en el header

    07:23 min
  • 18
    Agregando un modal para comprar tickets

    Agregando un modal para comprar tickets

    04:47 min
  • 19
    Un nuevo formulario para completar la compra

    Un nuevo formulario para completar la compra

    04:40 min

Deploy a producción

  • 20
    Poniendo nuestro sitio en producción

    Poniendo nuestro sitio en producción

    04:08 min
  • 21
    Conclusiones del curso

    Conclusiones del curso

    00:51 min
Tomar examen

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
        Guillermo Amaya

        Guillermo Amaya

        student•
        hace 7 años

        Me encanta como están presentando ahora los cursos.

          Rafael Enrique Sanchez Cruz

          Rafael Enrique Sanchez Cruz

          student•
          hace 7 años

          También a mi, se percibe más dinámico!

          Néstor José Silva Castillo

          Néstor José Silva Castillo

          student•
          hace 7 años

          Comparto con ustedes. Es un estilo más fresco y se enfoca en capturar al estudiante. Genial Platzi!!

        Karen Michel Sixto Lázaro

        Karen Michel Sixto Lázaro

        student•
        hace 6 años

        **Frameworks Frontend: ** Conocidos también como Frameworks CSS. Son una base para empezar un proyecto web, permite Flexibilidad en el Diseño. Nos ayuda a tener una Organización y Estructura del HTML, CSS y JS.

        ¿Qué contiene un Framework Frontend? Grilla: Organiza el contenido de un sitio web, adaptando el contenido a cualquier dispositivo. Estilos para Fuentes & Componentes Visuales Pre-armados: Se pueden utilizar para organizar información.

        ¿Para qué nos ayuda un Framework Frontend?

        1. Ahorrar Tiempo.
        2. Responsive Design, sitio web adaptable a cualquier dispositivo
        3. No tenemos que preocuparnos por la compatibilidad con otros browsers

        Ejemplos de Frameworks Frontend

        • Bootstrap
        • Foundation
        • Bulma
        • Tailwind
          Juan Christopher

          Juan Christopher

          student•
          hace 5 años

          Buena info.

        Andres Alvarez Becerra

        Andres Alvarez Becerra

        student•
        hace 4 años

        Hola, solo quería avisar de que ya hay una nueva version de Bootstrap y es la V5.1 la cual ya no incorpora JQuery. A lo largo del Curso, estaré dando una actualización de los temas que trae esta versión si ha de ser necesario, espero les sirva. Saludos

          Jerry Gil Contreras

          Jerry Gil Contreras

          student•
          hace 4 años

          Gracias amigo, si, porfavor. Ayudaróa mucho!

          Josue Cerron Tuesta

          Josue Cerron Tuesta

          student•
          hace 3 años

          Uff hermano, gracias por eso!

        Iván Toro

        Iván Toro

        student•
        hace 7 años

        Como desarrolladores debemos entender que la reutilización es una de los características que nos convierte en buenos desarrolladores, “no es necesario reinventar la rueda”.

          Pedro Alberto De La Cruz Hernandez

          Pedro Alberto De La Cruz Hernandez

          student•
          hace 7 años

          Así es, es por ello que surgieron plataformas como Github.

          Félix Alejandro Zelaya Orellana

          Félix Alejandro Zelaya Orellana

          student•
          hace 7 años

          Creo que es un problema que todos tenemos al iniciar, queremos hacer todo desde cero cuando hay muchas herramientas que podemos usar!

        Daniela Rodríguez Higuita

        Daniela Rodríguez Higuita

        student•
        hace 6 años

        Ventajas de un framework frontend -Ahorra tiempo -Tiene componentes visuales -Código adaptable a diferentes pantallas -EL código anda en los diferentes navegadores

          Andrés Campuzano Garzón

          Andrés Campuzano Garzón

          student•
          hace 6 años

          Muchas gracias Daniela.

          Juan Christopher

          Juan Christopher

          student•
          hace 5 años

          ¡Viva los Frameworks!

        Juan C Felizzola

        Juan C Felizzola

        student•
        hace 7 años

        Un Framework CSS son una base para empezar un proyecto web permitiendo flexibilidad en el diseño.

        Nos proveen organización y estructura en nuestro HTML, CSS y Javascript.

        El componente principal es la grilla: nos ayuda a organizar nuestro contenido en el sitio web.

        Los Framerowks CSS traen estilos para las ++fuentes ++y componentes visuales pre-armados que podemos utilizar para organizar nuestra información

        Nos ayuda con:

        • Ahorrar tiempo
        • Componentes visuales
        • Responsive Design
        • El código anda
        • Nos ahorramos de bugs

        Ejemplos:

        • Bootstrap
        • Foundation
        • Bulma
        • Flexbox Grid
          Milena Pellegrino

          Milena Pellegrino

          student•
          hace 5 años

          Muy buen resumen!!

          Michael Steven Viloria García

          Michael Steven Viloria García

          student•
          hace 5 años

          Flexbox Grid no es un framework

        Camilo Alexander Velandia Velandia

        Camilo Alexander Velandia Velandia

        student•
        hace 6 años

        la mayor ventaja es el ahorrar tiempo

          Milena Pellegrino

          Milena Pellegrino

          student•
          hace 5 años

          Exacto, te ahorra tiempos y problemas

          Juan Christopher

          Juan Christopher

          student•
          hace 5 años

          Tienes muchisima razon.

        Jose Morales Varon

        Jose Morales Varon

        student•
        hace 6 años

        Una de las mejores funcionalidades de esta clase de herramientas es su habilidad de Responsive, lo vuelve muy útil a la hora de maquetar/trabajar/codificar. Vamos a explorar más a fondo esta información.

          Daniel Esteves

          Daniel Esteves

          student•
          hace 6 años

          ¡Hola! ¿Cómo vas? ¿Ningún problema hasta ahora?

        Octavio Gomez Romo

        Octavio Gomez Romo

        student•
        hace 7 años

        Frameworks Front-End

        Bootstrap
        Foundation
        Bulma
        Flexbox Grid

          Félix Alejandro Zelaya Orellana

          Félix Alejandro Zelaya Orellana

          student•
          hace 7 años

          Desconocía de bulma!

          Daniel Esteves

          Daniel Esteves

          student•
          hace 6 años

          ¿Los probaste todos ya Octavio?

        Fredy Garcia

        Fredy Garcia

        student•
        hace 5 años

        !! Querida comunidad trabaje durante 9 años en una compañía distribuidora de alimentos, renuncie para capacitarme, y deseo profundamente convertirme en un desarrollador full stack , vamosssss por la gloria ..gracias platzi.!!

          Vanessa Paola Alonso Guzmán

          Vanessa Paola Alonso Guzmán

          student•
          hace 4 años

          ¡Muchos éxitos Fredy, lo vas a lograr!, aquí tienes a la comunidad para apoyarte en lo que requieras

        Christian David Sánchez

        Christian David Sánchez

        student•
        hace 6 años

        Agregando a Bootstrap en mi lista de amigos :) :P ;)

        Juan Guillermo Perez Cardozo

        Juan Guillermo Perez Cardozo

        student•
        hace 7 años

        entonces entendi , Frameworks Front-End:Bootstrap, Foundation, Bulma, Flexbox Grid

          Alejandro Sanchez

          Alejandro Sanchez

          student•
          hace 6 años

          Eso es correcto man

          Daniel Esteves

          Daniel Esteves

          student•
          hace 6 años

          Flexbox y Grid no son frameworks @jgcardozo, son características nativas de CSS

        Kathion Vega

        Kathion Vega

        student•
        hace 7 años

        La intención del framework frontend es ayudar a avanzar en el desarrollo web impulsando nuevas propiedades CSS, menos dependencias y nuevas tecnologías en navegadores más modernos.

          Harold David Avila Sabogal

          Harold David Avila Sabogal

          student•
          hace 7 años

          Buen apunte muchas gracias

          Daniel Esteves

          Daniel Esteves

          student•
          hace 6 años

          Y sobre todo, aportando a tu comentario, acelerar el proceso de desarrollo

        camilo Rincon

        camilo Rincon

        student•
        hace 7 años

        Framework Front-End o Framework Css
        Excelente Clase, gracias profesor Sacha Lifsyc.

        Jimmy Buriticá Londoño

        Jimmy Buriticá Londoño

        student•
        hace 6 años

        Bootstrap, es un framework originalmente creado por ++Twitter++, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “++responsive design++”.

        Néstor José Silva Castillo

        Néstor José Silva Castillo

        student•
        hace 7 años

        Con el framework frontend reutilizamos la rueda antes de crearla. Su mayor ventaja me parece que es el ahorro de tiempo. Para ustedes :
        Cuál es la mayor ventaja?

          Sergio Ivan Santacruz Madrigal

          Sergio Ivan Santacruz Madrigal

          student•
          hace 7 años

          Liderá el mercado de frameworks css
          Facil manejo
          Multitud de plantillas para desarrollos desde cero o relacionacionados con Angular, Vuej, HTML
          Mantiene un standart lo cual te permite modificar las bases y cambiar tu frontend en menor tiempo
          son algunas entre muchas

          David Alberto Mayurí Rojas

          David Alberto Mayurí Rojas

          student•
          hace 7 años

          Resumiendo seria el ahorro de tiempo para un Back-End

        matias bravo

        matias bravo

        student•
        hace 5 años

        Acabo de entrar a un proyecto donde usan bootstrap, y yo solo conozco lo basico. En un comienzo pense... pero que ilegible es esto, pero ahora que veo esta clase, mi perspectiva cambio ya que es una herramienta que permite ser mas agil a la hora de desarrollar

          Joel Dominguez Merino

          Joel Dominguez Merino

          student•
          hace 5 años

          Mi perspectiva de los Frameworks CSS era que si, te ahorran tiempo. Pero me gustaba hacer todo con css puro. Ahora quiero expandir mi conocimiento y darle una oportunidad a estos temas de Frontend. Vi que salió la versión 5 de Bootstrap. Sera bueno seguir el curso con la versión 4? o mejor tratamos de hacer la practica con la versión 5 del mismo? Como crees que sea mas conveniente?

          matias bravo

          matias bravo

          student•
          hace 5 años

          honestamente yo igual prefiero trabajar con css puro, aunque no conozco mas framworks... quisiera aprende sass, less o stylus, honestamente bootstrap y tailwindcss se ven bien pero me siguen pareciendo ilegibles a pesar de la agilidad que te puedan dar al momento de codificar

        Tania Paola Cruz González

        Tania Paola Cruz González

        student•
        hace 4 años

        Frameworks Frontend o Frameworks CSS

        • Bootstrap

        • Foundation

        • Bulma

        • Flexbox Grid

        • Tailwind

        Beneficios

        • Son una base para empezar un proyecto web permitiendo flexibilidad en el diseño.

        • Nos brindan organización y estructura para nuestro HTML, y CSS y JavaScript.

        • El componente principal de los Frameworks para CS: la Grilla. Gracias a ella organizamos el contenido de nuestra web y hacemos el contenido adaptable a diferentes tamaños de pantalla y dispositivos.

        • Contienen Estilos para las fuentes y componentes visuales pre-armados.

        • Ahorraras tiempo ya que tiene componentes visuales pre-programados o pre-diseñados.

        • Responsive design

        • Compatibilidad con los navegadores

        Enrique Garcia Stave

        Enrique Garcia Stave

        student•
        hace 7 años

        Resultados de mis busquedas: Un framework es un marco de trabajo. Es un esquema que se establece (y aprovecha) para desarrollar un software determinado. La definición es algo compleja pero en resumen, es aquel entorno que se piensa para programar de manera más sencilla cualquier aplicación o herramienta.

          Alejandro Sanchez

          Alejandro Sanchez

          student•
          hace 6 años

          Si platzi en youtube tiene un video que explica que es un framework te lo recomiendo

        Rocío Arielle Berthe

        Rocío Arielle Berthe

        student•
        hace 5 años

        RESUMEN DE CLASE Bootstrap es la librería de Framwork Fronted más popular para el desarrollo web ¿QUÉ QUIERE DECIR ESTO? Bootstrap es una librería (o sea que es un lugar donde se guardan cosas, en este caso código) de código abierto (o sea que se comparten proyectos hechos de código de distintos lenguajes de programación) que contiene plantillas pre-programadas. ¿PARA QUÉ? Si queremos crear una página web con código, no es secreto que vamos a perder demasiado tiempo (lo digo por experiencia) programando cada cosa minúscula pero importante como un botón, miles de veces. Entonces, estas plantillas pre-programadas nos pueden dar una mano con las cosas más "obvias" (por así decirlo)

        -Si crees que me faltó agregar algo, hay algo para cambiar, corregir y/o eliminar, agradecería con gusto que me lo dejen en los comentarios Sigamos aprendiendo :)