Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

¿Qué es Tailwind CSS?

1/29
Recursos
Transcripción

¿Quién es Victorio Ali y qué nos enseñará?

Victorio Ali, fundador de la empresa "Viento Digital," será nuestro guía en este viaje educativo. Con una trayectoria que comenzó a los ocho años en el mundo de la programación, Victorio ha trabajado con diversas tecnologías, pero es su pasión por Tailwind CSS lo que lo trae aquí a compartir su conocimiento. Esta herramienta, que se ha puesto muy de moda últimamente, se centra en una ideología de "utility-first," prioriza el diseño para dispositivos móviles como primer objetivo y promueve un diseño responsable. Estos son conceptos cruciales que exploraremos a fondo durante el curso.

¿Cuál es la importancia de Tailwind CSS?

Elegir una tecnología adecuada para desarrollar proyectos web es fundamental, y aquí es donde Tailwind CSS entra en escena. ¿Por qué Tailwind en lugar de otras herramientas CSS populares como Bootstrap o Bulma? Una de sus diferencias más notables es la ausencia de componentes prediseñados que puedas simplemente copiar y pegar. Al contrario, Tailwind te invita a crear tus propios componentes, dándote un control total sobre el diseño de tu proyecto. Esta libertad, aunque puede parecer complicada al inicio, puede ser increíblemente poderosa y, a menudo, más sencilla de lo que parece al acostumbrarse.

¿Qué diferencia a Tailwind CSS de otros frameworks?

  1. Sin componentes prediseñados: Te desafía a crear tus propios elementos de diseño.
  2. Enfoque en la utilidad y la personalización: Los estilos se definen en función de sus utilidades, facilitando la personalización.
  3. Diseño responsive prioritario: Pensado desde el inicio para adaptarse a dispositivos móviles.

¿Qué vamos a construir en este curso?

Este curso no es solo teórico; abordaremos la práctica al construir "Platzi Food," un proyecto web completo que abarcará múltiples aspectos del diseño y desarrollo web. A medida que avancemos, aprenderás cómo utilizar Tailwind CSS para crear un diseño totalmente responsive y funcional.

Elementos que vamos a desarrollar:

  • Menú: Implementaremos un menú fácil de navegar y adaptativo.
  • Banner: Crearemos un banner atractivo que llame la atención de los usuarios.
  • Productos: Diseñaremos una sección para mostrar productos que sea visualmente agradable.
  • Formulario: Aprenderás a construir formularios intuitivos y de fácil uso.
  • Footer: Finalizaremos con un footer informativo y funcional.

¿Qué conocimientos previos necesitas?

Antes de sumergirte de lleno en este curso, es importante que tengas una base sólida en HTML y CSS. Si aún no los dominas, Victorio sugiere completar el curso de desarrollo web online y el curso práctico de HTML y CSS disponibles en Platzi. Estos conocimientos te servirán como los cimientos sobre los que construirás tus habilidades en Tailwind CSS.


¡Prepárate para un viaje inspirador y educativo donde no solo aprenderás a utilizar Tailwind CSS, sino que también desarrollarás un proyecto web completo desde cero! Te invito a embarcarte en esta emocionante experiencia de aprendizaje con confianza y curiosidad. ¡Nos vemos en la próxima clase!

Aportes 59

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esta medio feito el proyecto final pero hagamole!

Este curso no es de diseño, es para aprender a manejar Tailwind y todas sus herramientas.

Iba a empezar el curso pero al ver el proyecto final tan feo me desanime mucho pues lo menos que uno espera en un curso de css es una buena interface, quizás el curso se basa en aprender a conocer la herramienta pero al ver eso tan feo se puede hacer incluso con css puro…

La verdad se ve feo el diseño

¿Qué es TailWind CSS? 🧐
Es un framework que permite la contrucción de diseños altamente personalizados y de bajo nivel.

¿Por qué usar TailWind CSS? 🤨
A diferencia de otros frameworks css, como lo es bootstrap, que otorgan componentes prediseñados, Tailwind provee clases a bajo nivel de css que nos permiten construir diseños completamente personalizados por nostros y sin tener que pelear con el framework en sí.

Nos externa una responsividad desde la misma sintaxis.

Trabaja de manera amigable en el crecimiento de nuestro proyecto al proveernos herramientas para extraer clases.

Pero sobre todo, nos abre su código para personalizarlo ya que esta escrito en PostCSS y configurado en JavaScript.

Tailwind is more than a CSS framework, it’s an engine for creating design systems.

Entiendo que la idea de llevar un curso es poder finalizar con un proyecto y ver tantos comentarios juzgando si es bonito o no hace pensar que aquí nadie aporta ni una sola linea de código extra al proyecto de los cursos… sería mejor que usemos los comentarios para mostrar los proyectos con las mejoras que cada uno consideró

estuve investigando y encontre estas ventajas de Tailwind:

  1. el Atomic design permite poner las clases dentro de las mismas etiquetas de HTML, por lo tanto, es mas sencillo que el diseño de BEM. es decir, nos ahorramos nombrar las clases Bloque__elemento–modificador que en un proyecto grande puede tonarse complejo.

  2. a diferencia de bootstrap, Tailwind solo incluye el codigo que necesitamos y elimina las clases que no fueron utilizadas. esto se hace automaticamente en el proceso de compilacion y optimizacion, que mejora el performance Charla de Expertos en Css hablan de Tailwind

  3. tiene una comunidad que genera componentes gratuitos, al igual que bootstrap, pero con las ventajas del Tailwind (atomic Design). Pagina Gratuita de Componentes con Tailwind.

  4. hay funciones llamadas apply y layer que nos permiten ahorrar mucho codigo. es decir, tailwind nos da la flexibilidad del sistema Atomic design y la fortaleza componentes porque tambien podemor crear clases para crear nuestros propios componentes.

  5. hay un plugin maravilloso llamado Tailwind CSS intellisense que te autocompleta las variables, lo cual hace el desarrollo muy agradable.

  6. en el documento tailwind.config.js podemos configurar TODO, desde colores.

para visualizar este documento puedes escribir en la linea de comandos

<npx tailwindcss init tailwind.config.js --full>
  1. es una de las mejor rankeadas en el Informe de state of CSS 2020

En el curso de Vue.JS básico impartido por @ignacio Anaya, utilizó Tailwind, no pares de aprender.

Programando desde los 8 años…eso fue ayer

Rayos en diseño no se ve agradable, quiero pensar que es solo el principio.

Tailwind CSS es un framework de CSS para crear rápidamente interfaces de usuario personalizadas con la siguiente ideología:

  • Utility First
  • Mobile First
  • Responsive to the Core

Te permite crear tus propios componentes y utilizarlos cuando necesites.

No sé ustedes pero yo vine aquí a aprender cómo usar este increíble framework, el diseño estético lo puedo encontrar en otros cursos dentro de Platzi.

El profesor debería tomar curso de UI, Skecth/Figma porque ese diseño no motiva a seguir el curso

Con TailwindCSS van a tener la libertad total para crear la página que ustedes quieran, sin tener que restringirse a una plantilla como en otros frameworks. Realmente vale la pena ver el curso en su totalidad.
Ánimo!

El Diseño esta feo, pero me parecio muy poderosa esta herramienta 😃

El diseño esta horrible. Pero vamos a hacerle.

Un objetivo adicional al proyecto final del curso debe ser modificarlo para que sea más agradable a la vista 🤣

jajaja el proyecto esta medio rana pero este men se ve que sabe, regresare en el futuro a decirles como me fue

Se feo el proyecto, espero que saquen otro donde haga el clon de YouTube o Spotify, seria de gran ayuda

Vengo de aprender Materialize, y me encantó. Espero, aprender mucho de este curso.

No conocia sobre este framework css.Vamos a aprenderlo entonces

Si me agrada mas que bootstrap, lo empezare a utilizar más!

A darle, pienso terminar la carrera de arquitecto front y desarrollo web antes que termine el año

por que no avisaron que actualizaron el curso?? xd que bien!!!!

Iba a empezar hasta que vi el proyecto final…

La verdad, ¡ahora si viene lo chido!, pero me servira para conocer mas acerca de frameworks de css.

tailwind es lo mismo que sass, ajiliza el trabajo o lo simplifica? o es como bootstraps que es para colocar clases de estilos ya cuadrados?, por que para hacer ese proyecto en css es breve.

Tailwind: Permite crear tus propios componentes

HEY CHICOS! Quieren aprender TAILWIND de una forma mas interactiva y gratis!?

https://scrimba.com/learn/tailwind

Esto debe tener un gran potencial, empecemos!

El proyecto no tiene un diseño muy atractivo poque justamente es un curso básico de Tailwind que a diferencia de bootstrap o Materialize es mucho mas personalizable. Pero tiene la desventaja de que los estilos que trae por defecto son feos. Por lo tanto hay que personalizarlo completamente y eso seria para un curso mas avanzado de tailwind. A diferencia de Bootstrap tailwind es de mas bajo nivel. Posee menor abstracción. Eso lo hace 100% personalizable

Me gusto la configuración para iniciar, a mi parecer uno se ve algo de pro haciendo esas instalaciones y usando la terminal.
Estoy muy entusiasmado con este curso.

Vamo con todo a este curso. El diseño no me parece el mejor pero si me gusta poder introducirme en esta tecnologia que toma cada vez mas fuerza y tiene pocos años desde que salio! 😄

A mi si me gusto el diseño. No se si soy de malos gustos jeje. Les recomiendo leer sobre que es un framework de css. El articulo es super bueno y al igual que el profesor recomienda tener conocimientos sobre css, sobretodo.

Vamos a ver que tal este curso, espero utilizarlo en mis proyectos.

La espera ha valido la pena. Ya esperaba este curso. 😃

Alfin ah llegado el momento 😊

Tailwind Css, vengo con conocimientos muy básicos, espero aprender mucho acerca de este curso 😃

Lo use para una pequeña web y me encanto, muy rapido.

Tailwind CSS: Framework para crear interfaces de usuario Personalizadas
Por qué usar Tailwind? No tiene componentes, lo cual permite crear o personalizar nuestros componentes.

vamos!

He encontrado el framework ideal, y no perder la cabeza haciendo todo desde cero.

Me emociona este curso, darle!

Espero aprender mucho Victor es mi primer curso con usted.

That burger though…

Muy interesante el curso, además el tema de no tener componentes me parece una gran diferencia con los otros frameworks.

Lo poco que alcancé a ver, creo que esta librería me permitirá crear mucho diseño UI/UX sin necesidad de escribir tanto CSS.

Medio feito el proyecto :c

Vamo a Darle 💪

hasta las bolas, ese platzi Food!

Vamos a darle!

Excelente, vengo del curso de Foundation! Veremos si Tailwind es tan potente como dicen 😃

Vengo aquí porque si bien en Platzi aprendí a manejar CSS muy bien, la verdad que necesito agilizar los procesos para dedicarme más al código de programación.

Muy buena, pensé que no tenían U.u

Estoy de acuerdo con los compañeros ajaja no le dedicaron tiempo al proyecto y se ve algo feo. Pero bueno a adquirir los conocimientos y luego hacer mejores diseños jaja

f

En esta grafica podemos ver como a ganado popularidad, casi todos quienes lo prueban están conformes y mas gente se interesa por Tailwind, tiene buena punta la verdad!
https://2020.stateofcss.com/en-US/technologies/css-frameworks/

Las personas se quejan es del diseño, aquí se viene es aprender nada más.