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 el examen del curso
    • 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 4 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 4 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 4 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 6 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 :)

    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