CursosEmpresasBlogLiveConfPrecios

Conclusiones y siguientes pasos

Clase 29 de 29 • Curso Básico de Tailwind 2 y 3

Clase anteriorSiguiente clase

Contenido del curso

Conociendo Tailwind CSS
  • 1
    Bienvenida al desarrollo con Tailwind

    Bienvenida al desarrollo con Tailwind

    03:48
  • 2

    Tailwind 3.0: ¿qué hay de nuevo?

    01:15
  • 3
    ¿Cómo funciona Tailwind? Y otros frameworks de CSS

    ¿Cómo funciona Tailwind? Y otros frameworks de CSS

    02:54
  • 4
    Mobile First y Utility First

    Mobile First y Utility First

    03:29
Instalación y directivas
  • 5
    Creación del proyecto e instalación de Tailwind

    Creación del proyecto e instalación de Tailwind

    10:48
  • 6
    Directivas de Tailwind

    Directivas de Tailwind

    04:19
Utilidades
  • 7
    Nueva paleta de colores extendida

    Nueva paleta de colores extendida

    08:37
  • 8
    Medidas y Breakpoints

    Medidas y Breakpoints

    11:02
  • 9
    Flexbox

    Flexbox

    06:13
  • 10
    Maquetación del proyecto

    Maquetación del proyecto

    07:37
Plugins
  • 11

    Forms, Typography y Aspect ratio

    00:58
Personalización
  • 12
    Tailwind como API para la creación de un Design System

    Tailwind como API para la creación de un Design System

    12:01
Proyecto: Platzi Travel
  • 13
    Construyendo el cuerpo del proyecto

    Construyendo el cuerpo del proyecto

    02:59
  • 14
    Creando la sección de Home

    Creando la sección de Home

    12:53
  • 15
    Diseñando nuestras cards

    Diseñando nuestras cards

    11:25
  • 16
    Extracción de componentes a clases para nuestra card

    Extracción de componentes a clases para nuestra card

    04:18
  • 17
    Creando la sección de Recomendados

    Creando la sección de Recomendados

    08:47
  • 18
    Agregando animaciones al proyecto

    Agregando animaciones al proyecto

    12:52
  • 19
    Creando la sección de Rentas destacadas

    Creando la sección de Rentas destacadas

    11:53
  • 20
    Sección de FAQS

    Sección de FAQS

    05:47
  • 21
    Footer

    Footer

    05:56
  • 22
    TabBar funcional

    TabBar funcional

    17:32
  • 23
    Haciendo responsivo nuestro proyecto

    Haciendo responsivo nuestro proyecto

    18:15
  • 24
    Haciendo responsivo nuestro proyecto: rentas destacadas

    Haciendo responsivo nuestro proyecto: rentas destacadas

    14:41
  • 25
    Creando la navbar

    Creando la navbar

    16:20
  • 26
    Agregando el Dark Mode

    Agregando el Dark Mode

    25:17
Optimización de nuestro proyecto
  • 27
    Purge CSS

    Purge CSS

    05:27
  • 28

    Cómo hacer la migración de tu proyecto a Tailwind 3.0

    00:40
Conclusiones
  • 29
    Conclusiones y siguientes pasos

    Conclusiones y siguientes pasos

    00:37
    Fernando Molano Castrillón

    Fernando Molano Castrillón

    student•
    hace 4 años

    Repo: https://github.com/fermolanoc/platzi-travel

    Live: https://fermolanoc.github.io/platzi-travel/

      Ana María Díaz

      Ana María Díaz

      teacher•
      hace 4 años

      Excelente trabajo!! Muchas felicidades :)

    Isaí Ramírez

    Isaí Ramírez

    student•
    hace 4 años

    Fue un gusto tomar este curso, al final pensé tirar todo a la borda por que en producción no me quedaba, ahora traigo mi codigo y mi deploy del proyecto para ponerlo en mi portafolio.

    :) GitHub: https://github.com/SoterRamirez/HotelTravel :D Deploy: https://hoteltravel.netlify.app/

    Gracias.

    Carlos Toro

    Carlos Toro

    student•
    hace 3 años

    Asi me quedo Version Desktop

    127.0.0.1_5500_public_index.html.png

      Ana María Díaz

      Ana María Díaz

      teacher•
      hace 3 años

      Se ve muy bien Carlos, muchas felicidades!

      Carlos Toro

      Carlos Toro

      student•
      hace 3 años

      Muchas Gracias

    Eduardo Reyes

    Eduardo Reyes

    student•
    hace 3 años

    🍃 Este es un buen curso mal hecho. Es solamente mi opinión, he tomado casi 100 cursos en esta plataforma, hay unos tan buenos que dan ganas de tomarlos de nuevo, y otros que son muy malos. Este es un buen curso con buen contenido, buen proyecto y buena tecnología, pero se nota que no fue cuidadosamente producido. Aquí van algunos puntos que creo podrían mejorar la experiencia del estudiante:

    1. Reducir el tiempo de cada sección: Si las clases tardan demasiado tiempo en terminar una sección, se podría considerar dividirlas en partes más pequeñas o optimizar la manera en que se presenta el contenido para que sea más eficiente.

    2. Preparación adecuada: La profesora puede ensayar antes de cada clase o tener un guion más estructurado para mejorar la fluidez de su presentación.

    3. Actualización del curso: Es importante mantener el curso actualizado con las últimas versiones y mejores prácticas en la tecnología, especialmente si han pasado más de un año desde su lanzamiento.

    4 .Revisión antes del lanzamiento: Sería útil que un equipo de revisión revisara el curso antes de lanzarlo para asegurarse de que todo esté funcionando correctamente y que el contenido sea de alta calidad.

    Creo que vale la pena actualizar el curso y mejorarlo, la profesora no es mala, pero se notaba nerviosa a veces. No es malo, pero sí sería mejor una versión actualizada poniendo atención a las oportunidades de mejorar.

      Ana María Díaz

      Ana María Díaz

      teacher•
      hace 3 años

      Muchas gracias por todo el feedback Eduardo, lo tomaremos mucho en cuenta para mejorar la experiencia del estudiante!

      Eduardo Reyes

      Eduardo Reyes

      student•
      hace 3 años

      🍃 Muchas gracias a ustedes por tomar en cuenta la opinión de los estudiantes.

    Carlos Alberto Meneses

    Carlos Alberto Meneses

    student•
    hace 4 años

    Fue un buen curso. Comparto mi deploy en netlify carlosTravel mi codigo en github repo

      Ana María Díaz

      Ana María Díaz

      teacher•
      hace 4 años

      Excelente proyecto Carlos! Gracias por compartirlo!

    Cristian Contreras

    Cristian Contreras

    student•
    hace 3 años

    Buenas, comunidad. Estoy intentando hacer deploy de una página en github, pero no he podido. Creo que es por como están organizados los archivos. Cuando github hace el deploy, publica el readme, no se como hacer para que me publique el index.html

    Alguien sabe como puedo corregir eso??

    Lo intenté en netlify, pero también ha sido un rotundo fracaso.

      Maximiliano Vera

      Maximiliano Vera

      student•
      hace 3 años

      Prueba en poner el index.html en la raiz de tu proyecto ya que github busca el archivo index.html ahi.

    Blanca Segura Garcia

    Blanca Segura Garcia

    student•
    hace 4 años

    Falta el deploy ...

      César Palma

      César Palma

      student•
      hace 3 años
      • cambia el nombre del script de package.json de "prod" a "build"
      • create una cuenta en vercel o netlify
      • conecta tu cuenta de github
      • selecciona el proyecto a desplegar dentro de tus proyectos en github, dale siguiente, siguiente y ya tienes tu despliegue
    Eder Ditmar Rocca Alvarez

    Eder Ditmar Rocca Alvarez

    student•
    hace 4 años

    https://github.com/roccaeder/css-tailwind

      Blanca Segura Garcia

      Blanca Segura Garcia

      student•
      hace 4 años

      Gracias ... Vi tu script en GitHub y me sacó de dolores de cabeza ... El del curso no me funcionaba. Te agradezco mucho

    Luis Ángel Pérez Meléndez

    Luis Ángel Pérez Meléndez

    student•
    hace 3 años

    trato de hacer deploy del proyecto pero no me permite. me muestra una pantalla enblanco con el nombre del repositorio solamente, alquien sabe por que?

    dejo link del repositorio https://github.com/ang3lcode/tailwindcss

      Luis Ángel Pérez Meléndez

      Luis Ángel Pérez Meléndez

      student•
      hace 3 años

      para agregar cuando hago deploy me sale esta pagina https://ang3lcode.github.io/tailwindcss/

      Luis Ángel Pérez Meléndez

      Luis Ángel Pérez Meléndez

      student•
      hace 3 años

      regrese del futuro, ya lo logre,

    Gianluca Bernasconi

    Gianluca Bernasconi

    student•
    hace 2 años

    Se logro gente 😁

    Repo 👉🏼 https://github.com/Gianlucabernasconi/Chile-Travel

    Sitio 👉🏼 https://chile-travel.netlify.app/

    Alejandro Ramos

    Alejandro Ramos

    student•
    hace 2 años

    Ha costado alguito, aquí dejo mi repo

    José Fernando Fuentes Roa

    José Fernando Fuentes Roa

    student•
    hace 3 años

    Hola a todos 😄


    Acá les dejo el repositorio de mi proyecto y la página de GitHub pages donde está montado por si quieren revisar.

    • Repositorio
    • Platzi Travel
    Tomas Salina

    Tomas Salina

    student•
    hace 3 años

    Excelente curso!. Acá dejo mi proyecto con imágenes optimizadas. Repo: https://github.com/salinatomass/platzi-travel Página: https://platzi-travel-landing.netlify.app

    Cristian Iñiguez

    Cristian Iñiguez

    student•
    hace 3 años

    Les comparto mi repo Decidi usar Vite con React Repo: https://github.com/cristianiniguez/curso-basico-tailwind

    José Mauricio Lemús Rodezno

    José Mauricio Lemús Rodezno

    student•
    hace 4 años

    Github: https://github.com/JMauricio22/travel-app-tailwind/ Deploy: https://jmauricio22.github.io/travel-app-tailwind/

    Any Omaña

    Any Omaña

    student•
    hace 8 meses

    Me encantó realizar este proyecto, por acá les dejo mi repositorio para que lo puedan ver <3

    https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS

    Michael Garcia

    Michael Garcia

    student•
    hace un año

    Les quiero compartir mi proyecto como quedo !

    Link https://maikoldev.github.io/platzi-travel/

    Repo Publico https://github.com/maikoldev/platzi-travel

    Ronaldo Jiménez

    Ronaldo Jiménez

    student•
    hace un año

    Yo realicé este curso con la intención de mejorar mi portafolio (antes estaba hecho con Bootstrap), comparto el resultado:

    https://www.jimcostdev.com/

    repo:

    https://github.com/JimcostDev/jimcostdev-oficial

    Andrés Felipe Cubillos Ospina

    Andrés Felipe Cubillos Ospina

    student•
    hace 2 años

    Ayuda🥲🥲 cuando hago el deploy en github pages se hace sin algunas imagenes y se pierden la mayoria de atributos que le di al proyecto

    Diego Huaccha Diestra

    Diego Huaccha Diestra

    student•
    hace 2 años

    Exelente curso 🚀 Comparto mi proyecto. Repo: https://github.com/diieggo/platzi-travel Deploy: https://travel-platzi-course.netlify.app

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