Tailwind CSS 3.0: Fundamentos

Aprende a crear una web moderna con TailwindCSS 3.0 paso a paso y con ejemplos.

4.55 (82 reviews)
Udemy
platform
Español
language
Web Development
category
instructor
4,332
students
1.5 hours
content
Jan 2022
last update
$94.99
regular price

What you will learn

Instala y configura el entorno ideal para trabajar con Tailwind CSS

Construye una página desde cero, siguiendo los últimos estándares de desarrollo web

Adapta la página a diferentes tamaños de pantalla (responsive design)

Aplica estados CSS

Implementa un modo oscuro automático

Reutiliza clases (principio don't repeat yourself)

Usa los 4 plugins oficiales del creador de Tailwind CSS

Configura y usa el nuevo motor Just-in-Time

Description

Aprenderás en qué consiste Tailwind CSS, el framework CSS que está cambiando la forma de trabajar con CSS. Descubrirás y experimentarás qué es lo que lo hace diferente a los demás.

Este curso te ahorrará el trabajo de estudio e investigación, y aprenderás los fundamentos desde cero hasta ser capaz de hacer cualquier web que te propongas.

Aprende a usar Tailwind CSS en este curso exhaustivo.

  • Adapta la página a diferentes tamaños de pantalla (responsive design)

  • Aplica estados CSS

  • Diseña un modo oscuro

  • Reutiliza tus estilos (principio don't repeat yourself)

  • Aprende a instalar y usar plugins

Tailwind CSS es el framework CSS más popular del momento, con un enfoque muy diferente al CSS estándar.

Normalmente, cuando quieres aplicar estilo a tus páginas web, has escrito CSS. Tailwind CSS te da clases predefinidas que puedes incluir en tu HTML directamente.

El framework abarca todo lo que puedas necesitar: colores, tamaños, tipos de fuentes, márgenes, espaciados, flexbox, esquinas redondeadas, sombras, etc. Así puedes escribir un diseño totalmente personalizado sin necesidad de escribir nada de CSS.

Esta forma de trabajar te aporta varias ventajas. Por ejemplo:

  • No gastas energía en elegir nombres de clases.

  • No tienes un archivo CSS que mantener.

  • Los estilos son locales en cada página.

Los frameworks basados en clases de utilidad, como Tailwind CSS, ya están siendo usados por empresas tan conocidas como GitHub, Heroku, Twitch o Kickstarter. Netflix incluso ya está usando Tailwind CSS en su página de series y películas más vistas. La tendencia de uso es cada vez mayor en el mercado.

Como proyecto del curso, construirás una landing page de una web tipo Netflix, usando las clases de utilidad de Tailwind CSS. La irás mejorando y completando

poco a poco.

Resumen del curso:

  • Empezarás instalando Node. Es la base para instalar los paquetes necesarios.

  • Configurarás Visual Studio Code, y te enseñaré los plugins que uso para trabajar cómodamente.

  • Instalarás Tailwind CSS y sus dependencias, dejándolo todo listo para empezar a trabajar.

  • Construirás una landing page tipo Netflix, optimizada para móviles.

  • Adaptarás la página a diferentes tamaños de pantalla. Lo que se conoce como responsive design.

  • Añadirás estados CSS, como por ejemplo cuando pasas el ratón encima de un botón.

  • Sabrás configurar tu página con un modo oscuro automático.

  • Para evitar repetir código, sabrás crear clases personalizadas que podrás reutilizar.

Controlarás, además, los 4 plugins oficiales de Tailwind CSS:

  • Typography: para poner estilo a textos (por ejemplo, los que vienen de una base de datos)

  • Forms: para dar forma a los formularios

  • Aspect-Ratio: para controlar la relación de aspecto de las imágenes

  • Line-Clamp: para limitar textos y conseguir una buena armonía visual

Además:

  • Tras cada módulo de lecciones, harás un test de conocimientos para comprobar que no se te haya escapado nada importante.

  • El curso está vivo, y lo iré actualizando a medida que Tailwind CSS evolucione. También tienes acceso al repositorio donde publico el código fuente de las páginas.

Con este curso te lo pongo fácil y práctico para que tengas una buena base y puedas construir cualquier página que te propongas, con lecciones claras y prácticas.

Si aún no te has decidido, puedes ver gratuitamente la lección donde construimos una página desde cero. Así ves todo el proceso.

Y por supuesto, si tienes dudas puedes exponerlas en la sección de preguntas y respuestas, donde las iré respondiendo.

¡Nos vemos dentro!

Screenshots

Tailwind CSS 3.0: Fundamentos - Screenshot_01Tailwind CSS 3.0: Fundamentos - Screenshot_02Tailwind CSS 3.0: Fundamentos - Screenshot_03Tailwind CSS 3.0: Fundamentos - Screenshot_04

Content

Introducción

Introducción

Instalación y configuración

Instalando Node.js
Configurando Visual Studio Code
Configuración básica de Tailwind CSS
Test de configuración básica

Construyendo la página

Construyendo una página desde cero
Haciendo la página adaptable a la pantalla
Aplicando estados CSS
Añadiendo modo oscuro
Reutilización de clases con @apply
Test de conocimientos generales de Tailwind CSS

Los 4 plugins oficiales

Usando el plugin Typography
Usando el plugin Forms
Usando el plugin Aspect Ratio
Usando el plugin Line Clamp
Test sobre los plugins oficiales de Tailwind CSS

Seguir aprendiendo

Un vistazo a conceptos avanzados
Siguientes pasos

Reviews

Santiago
March 8, 2022
He de decir que cambiaron la forma aplicar los temas para el plugin typography, sin embargo, con la documentación pude cambiar todo fácilmente. Fuera de eso, me ha encando la forma en que se explica, muy ameno y demasiado tranquilo.
Germán
March 3, 2022
Buena enseñanza, al grano y sin extender los videos de manera innecesaria. La pega que le pongo es que compré el video teniendo en cuenta que como titulo dice "Tailwind 3.0" y nada más instalarlo en los videos aparece la versión 2, y algunas de las configuraciones no son validas para la v3.
Juan
February 18, 2022
Muy bueno, capaz demasiado resumido y va muy rapido sin explicar tanto. Pero es excelente si ya se tiene algo de idea y quieres agregar tailwind a tu repertorio
Ovidio
February 11, 2022
Es un gran curso para aquellas personas que quieren conocer de 0 este framework y sobre todo con buenas prácticas usando plugins oficiales de tailwind, no importa si tengas mac o windows, este curso te ayudará.
Nicolas
February 10, 2022
Fue una gran elección porque me ayudó a iniciar mis conocimientos en Tailwind y el profesor esplica muy bien
Victor
February 7, 2022
Te lleva de la mano, estoy tratando de aprender el concepto para hacerlo funcionar con Blazor pero gracias a este curso he podido lograr una instalacion en html al menos. Excelente curso muy preciso y a la vena,.
Jesús
February 5, 2022
Los elementos visuales que se utilizan, la forma de presentar el contenido son muy buenos. Todos los temas se explican con detalle y paso a paso.
Jose
January 6, 2022
Buen Curso, explicaciones claras. Recomiendo este curso a todos los que quieran conocer este fantástico framework.
Arturo
December 29, 2021
Justo cuando empece el curso recien salio la version 3.0 de tailwind, por lo cual creo que lo adecuado seria rehacer el curso para aquellas personas como yo no anden tan perdidas. Gracias al ultimo tutorial del curso fue que descubri algunos errores que tenia al usar comandos de la version 2 en la version 3. Mas que todo la calificacion es culpa de la nueva actuliazacion, vos explicas muy bien.
Pablo
November 6, 2021
Me gustó mucho, la explicación es muy buena y las dudas que se me iban generando eran respondidas en la misma clase.
Gabriel
October 21, 2021
El curso es bueno, básico y creo que está bien explicado, ya será de cada quien meterse mas a la documentación.
Gerardo
October 7, 2021
Buen curso. básico pero lo de los plugins no lo sabía. Es altamente recomendable si o si leer la documentación oficial de TailwindCSS
Andres
October 7, 2021
Es un curso bastante corto que integra todo lo necesario para esta maravillosa tecnología, sin duda alguna el profesor sabe enseñar y lo hace de una manera que genial...

Charts

Price

Tailwind CSS 3.0: Fundamentos - Price chart

Rating

Tailwind CSS 3.0: Fundamentos - Ratings chart

Enrollment distribution

Tailwind CSS 3.0: Fundamentos - Distribution chart

Coupons

DateDiscountStatus
9/30/2021100% OFF
expired

Related Topics

4305329
udemy ID
9/17/2021
course created date
9/30/2021
course indexed date
benjaminsucasaire@gmail.com
course submited by