Curso primeros pasos con Laravel Livewire + Alpine.js y Tailwind.css

25-04-2022 - Andrés Cruz

Curso primeros pasos con Laravel Livewire + Alpine.js y Tailwind.css

Precio mínimo:

$7.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

En este curso vas a aprender Laravel Livewire desde cero, hasta conocer sus detalles más importantes; recuerda que debes de saber programar en Laravel para ver este curso.

Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.

Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.

Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.

¿Qué es Laravel Livewire?

Livewire es un scaffolding para Laravel, el cual no es más que un esqueleto o capa que agregan ciertas funcionalidades extras en Laravel mediante el uso de componentes de Livewire; los mismos componentes de Laravel básico, pero con añadidos muy interesantes que son los que conforman a Livewire.

Además de esto, un proyecto en Livewire ya nos trae configurados Tailwind.css y Alpine.js

Con todo estos conocimientos podrás emplearlos para crear tus propias aplicaciones en Flutter.

¿Qué nos ofrece Livewire?

Crear aplicaciones web modernas es difícil, herramientas como Vue y React son extremadamente poderosas, pero la complejidad que agregan al flujo de trabajo de un desarrollador de pila completa es una locura.

Pensando en lo anterior, Laravel Livewire es un marco completo para Laravel que simplifica la creación de interfaces dinámicas, sin dejar la comodidad de Laravel; en pocas palabras nos permite usar esquemas similares a los de Vue y React directamente en Laravel.

Podemos trabajar con esquemas similares a los de Laravel y Vue, pero de una manera más directa y simple; el desarrollo de Laravel está fuertemente ligado al uso de componentes; los mismos componentes de Laravel pero con agregados importante de Laravel Livewire lo que permite escalar enormemente el uso de componentes:

  1. Vincular mediante el archivo de rutas.
  2. Comunicación sencilla basada en acciones, eventos y funciones entre el cliente y el servidor.
  3. Agrega funcionalidades como paginación, carga de archivos, query string entre otras.

En definitiva, con Livewire, podemos hacer lo mismo que hacemos con Laravel y sus controladores, pero de una manera más sencilla en la cual podemos usar los componentes y reutilizar piezas de código que nos ofrece Livewire para hacer una comunicación muy sencilla entre el servidor con el cliente.

Aparte de que, dependiendo como decidas instalar a Laravel Livewire, puedes habilitar opciones que ya vienen de gratis como:

  1. Sistema de autenticación con registro, recuperación de credenciales.
  2. Vista de perfil con carga de usuario.
  3. Manejo de roles mediante equipos.
  4. Manejo de la API Tokens mediante Laravel Breeze con una interfaz administrable.

En definitiva, Livewire no es un framework, lo puedes ver como un paquete más que agrega funcionalidades extras a algunos elementos de Laravel que en definitiva lo convierten en un scaffolding o esqueleto para nuestras aplicaciones.

Para esta tecnología, tenemos que emplear dos documentaciones aparte (sin contar con la de Laravel).

La que nos ofrece la estructura del proyecto:

https://jetstream.laravel.com/2.x/stacks/livewire.html

Y la que nos ofrece Laravel Livewire al momento de desarrollar:

https://laravel-livewire.com/

Estructura del curso

La lista de reproducción la puedes ver por aquí:

https://www.desarrollolibre.net/academia/free/primeros-pasos-con-laravel-livewire

Vamos a evaluar uno a uno cada una de las secciones que veremos en el curso:

  • 2 Primeros pasos con Livewire

    En este primer capítulo nos enfocaremos en mencionar el ecosistema empleado para Windows, Mac y Linux, crearemos el proyecto en Laravel Livewire, conoceremos su estructura, que trae cada módulo principal del scaffolding y conoceremos qué estructura trae por defecto.

    CRUD Categorías
    CRUD Categorías
  • 3 Conociendo los componentes

    En este apartado conoceremos cómo crear los primeros componentes en Livewire como "reemplazo" de los controladores de Laravel, su vinculación en las rutas, y los famosos CRUDs para administrar datos, conoceremos cómo hacer el upload, las propiedades "reactivas" además de otros atributos de Laravel Livewire.

    Aparte de que vamos a trabajar con componentes existentes de Livewire para reutilizar lo ya existente.

  • 4 Formulario paso por paso

    En este apartado, vamos a crear un formulario paso por paso empleando las características de Livewire; aprenderemos a:

    • Incluir componentes de Livewire dentro de componentes.
    • Manejo de eventos.
    • Comunicar componentes.
    • Registrar eventos.
    • Un poco del JavaScript de eventos.
    Formulario paso por paso
    Formulario paso por paso
  • 5 Práctica: Crear CRUD para los Post

    En este apartado, vamos a crear un CRUD para los post, poniendo en práctica parte de los conocimientos que aprendimos en secciones anteriores.

  • 6 Definir filtros y campo de búsqueda

    En este capítulo vamos a emplear otro enfoque para los wire:model, indicando estos tipos de campos para filtrar en la lista.

    Blog y filtros
    Blog y filtros
  • 7 JavaScript de Laravel Livewire

    En este capítulo, vamos a trabajar con el JavaScript de Livewire y su comunicación directa con el servidor, por lo tanto, mediante métodos y propiedades podremos invocar eventos, consumir y cambiar propiedades y estar al tanto de eventos y ciclo de vida del componente desde el cliente con JavaScript.

  • 8 Blog: Listado y detalle de post

    En esta sección vamos a construir un módulo para un Blog de cara al usuario final muy sencilla, con un listado de post y vista de detalle empleando claro está, componentes de Livewire.

    Blog y filtros
    Blog y filtros
  • 9 Carrito de compras

    Siguiendo con la creación de pequeños proyecto para la aplicación y poniendo en práctica y conociendo variaciones sobre el uso de eventos, comunicación entre componentes y componentes padres e hijos, entre otras lógicas aplicadas, vamos a crear un carrito de compras para las publicaciones de tipo publicidad.

    También en varias secciones, vamos a extender el componente de shopping cart para replicar en la base de datos, comunicación vía mensajes para mostrar actualizaciones y definir un botón para mostrar el total de ítems en el carrito.Carrito de compras

  • 10 Introducción a Alpine JS

    Para conocer Alpine JS que es el framework empleado internamente por Livewire, vamos a conocer una introducción para dar los primeros pasos; tambien hay una sección en la cual se crean pequeños proyectos en Alpine para poner en practica los componentes básicos de este.

  • 11 TodoList con Alpine JS

    Vamos a crear un proyecto pequeño, un todoList con Alpine.js en la cual podemos crear, actualizar, eliminar, reordenar, filtrar nuestros todos empleando Alpine.js.

  • 12 To do List con Alpine JS y Livewire

    Vamos a ocupar el proyecto anterior del To do List en Alpine.js, para que funcione con Livewire; inicialmente se trabajará con la app de To do List con Boostrap 5 para luego ser migrada a Tailwind.css usando componentes de Livewire para reutilizar existentes como botones.

    Todo List Alpine y Livewire
    Todo List Alpine y Livewire

Requisitos previos y requisitos

Para tomar este curso, es importante que sepas programar en Laravel básico.

Como aprender Laravel

En mi blog, encontrarás múltiples recursos de interes; actualmente tengo publicaciones, vídeos en Youtube y un curso sobre Laravel 10 junto con un libro que sigue la misma temática.

Aquí las secciones y clases completas del curso:

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

  • 1 Introducción

  • 2 Sobre el curso

  • 3 Laravel Livewire Libro

  • 4 Requerimientos para tomar el curso

  • 5 ¿Qué es Laravel Livewire?

Primeros pasos con Livewire

  • 1 Introducción

  • 2 Mac y Linux: Crear un proyecto con el instalador de Laravel y Sail

    Vamos a crear un proyecto en Laravel.

  • 3 Mac y Linux: Ejecutar el proyecto son Laravel Sail y Docker

    Vamos a preparar todo para poder usar Sail con Docker para nuestro proyecto.

  • 4 Windows: Crear un proyecto con el instalador de Laravel y Laragon

    Vamos a crear un proyecto Laravel Livewire en entorno Windows.

  • 5 Crear un proyecto en Laravel Sail, desde un proyecto base

    Vamos a crear un proyecto en Livewire partiendo de un proyecto base de Laravel.

  • 6 Crear un proyecto en git

    Vamos a subir el proyecto a git.

  • 7 Características de un proyecto Livewire

    Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.

Conociendo los componentes

  • 1 Introducción

  • 2 Creas las migraciones

    Vamos a crear las migraciones para el proyecto.

  • 3 Crear los componentes

    Vamos a crear los componentes iniciales.

  • 4 Configurar las rutas

    Vamos a crear las rutas para las categorías.

  • 5 Crear los modelos

    Vamos a crear los modelos.

  • 6 Save: Crear una categoría

    Vamos a crear el proceso para crear una categoría.

  • 7 Pantallas de errores

    Vamos a conocer la pantalla de errores de Livewire.

  • 8 Atributos wire:x

    Vamos a presentar otros atributos que tenemos disponibles.

  • 9 Más pruebas con Livewire

    Vamos a realizar pruebas con Livewire.

  • 10 Save: Aplicar validaciones

    Vamos a realizar validaciones del lado del servidor y mostrar las mismas en la vista.

  • 11 Usar componentes de Livewire corrección

  • 12 Usar componentes de Livewire

    Vamos a usar los componentes de Livewire del lado de nuestro componente.

  • 13 Ciclo de vida de un componente

    Explicaremos el ciclo de vida de los componentes de Livewire.

  • 14 Save: Actualizar una categoría

    Trabajaremos en el apartado de actualizar un registro existente.

  • 15 Index: Crear listado básico

    Vamos a crear un componente de listado.

  • 16 Index: Listado paginado

    Vamos a adaptar la paginación.

  • 17 Index: Eliminar

    Vamos a eliminar una categoría mediante un botón.

  • 18 Index: Eliminar con diálogo de confirmación

    Vamos a crear un diálogo de confirmación para eliminar.

  • 19 Diálogo de Mensaje

    Vamos a mostrar un componente para mostrar información sobre las operaciones CRUDs.

  • 20 Carga de imagen

    Vamos a hacer el upload de una imagen.

  • 21 Publicar en git

Componentes y estilos

  • 1 Introducción

  • 2 Formulario

    Vamos a adaptar el diseño del formulario con el componente de Livewire.

  • 3 Carta

    Vamos a crear un componente de carta.

  • 4 Header del layout

    Vamos a definir el header para el layout.

  • 5 Container

    Vamos a crear un contenedor.

  • 6 Tabla

    Vamos a mejorar la presencia de la tabla.

  • 7 Diálogo de alerta para eliminar: Componente de confirmación

    Vamos a trabajar en un componente de alerta.

  • 8 Mensaje de acción realizada

    Vamos a hacer un box para los diálogos de confirmación.

  • 9 Menú: Componente Dropdown (Modo PC)

    Vamos a colocar la opción para el menú.

  • 10 Ajuste del menú anterior

    Vamos a realizar un pequeño cambio en el menú anterior.

  • 11 Menú: Componente Dropdown (Modo Móvil)

    Vamos a crear el menú para el modo móvil.

  • 12 Enlace para crear una categoría

    Vamos a crear la opción para crear el enlace para la categoría.

  • 13 Publicar en git

Componentes comunicar: Formulario paso por paso

  • 1 Introducción

  • 2 Crear migraciones principales

    Vamos a crear las migraciones para los formularios.

  • 3 Crear componentes principales

    Vamos a crear los componentes de Livewire para los formularios

  • 4 Crear modelos principales

    Vamos a crear los modelos.

  • 5 Crear formulario general

    Vamos a crear el formulario para crear el contacto general.

  • 6 Tarea: Crear formulario persona

    Vamos a crear el formulario para crear el contacto por persona.

  • 7 Probar relaciones generales y personas

    Vamos a probar la relación entre general y persona y su inversa.

  • 8 Tarea: Crear formulario empresa

    Vamos a crear el formulario para crear el contacto por empresa.

  • 9 Probar relaciones generales y empresas

    Vamos a probar la relación entre general y empresa y su inversa.

  • 10 Tarea: Crear formulario detalle

    Vamos a crear el formulario para crear el contacto por detalle.

  • 11 Probar relaciones generales y detalles

    Vamos a probar la relación entre general y detalle y su inversa.

  • 12 Lógica inicial del formulario paso por paso

    Vamos a crear los condicionales para manejar un paso o el otro.

  • 13 Directiva @livewire para renderizar componentes

    Vamos a aprender a renderizar componentes de Livewire desde un archivo blade.

  • 14 Eventos: Comunicación de los componentes hijos al componente padre

    Vamos a conocer la comunicación entre componentes.

  • 15 Crear layout base

    Vamos a crear el layout base para la sección de contacto.

  • 16 Definir step en clases

    Vamos a pasar el diseño a clases.

  • 17 Objeto $wire

    Vamos a conocer el objeto $wire para trabajar desde el bloque de script en Livewire.

  • 18 Demo: evento click con $wire

    Vamos a realizar una demostración del evento click en Alpine.js y su uso con Livewire.

  • 19 Regresar a los pasos anteriores

    Vamos a crear el botón para paso atrás.

  • 20 Enviar el id del contacto general a los componentes hijos

    Vamos a definir el PK del componente padre (general) y se lo pasamos a los hijos.

  • 21 Habilitar el guardado

    Vamos a realizar el proceso para guardar los comentarios en la base de datos.

  • 22 Habilitar la actualización

    Vamos a habilitar el proceso de actualización.

  • 23 Detalles finales

    Pequeños detalles de CSS.

  • 24 Publicar en git

    Publicar en git

Práctica: Crear CRUD para los Post

  • 1 Introducción

  • 2 Post/Save: Crear formulario de creación y actualización

    Vamos a crear el proceso de crear y actualizar.

  • 3 Post/Index: Crear listado

    Vamos a crear el listado de los posts y la opción de eliminar.

  • 4 Publicar en git

Filtros y campos de búsqueda

  • 1 Introducción

  • 2 Seeders para los post

  • 3 Filtros

    Vamos a crear la opción de los filtros para los seleccionables.

  • 4 Campo de búsqueda

    Vamos a crear un campo de búsqueda para varios campos.

  • 5 Query String

    Vamos a implementar el queryString de los filtros y campo de búsqueda.

  • 6 Filtrar por rango de fecha

    Vamos a crear un filtro por fechas.

  • 7 Publicar en git

Ordenación

  • 1 Introducción

  • 2 Ordenación manual

    Vamos a crear el esquema para la ordenación.

  • 3 Ordenación por definición de columnas

    Vamos a crear la estructura para la ordenación de las columnas del listado.

  • 4 Acomodar CSS de las columnas, recomendaciones

    Vamos a acomodar unos aspectos de alineación de los th en la columna.

  • 5 trait: Extender el esquema de ordenación a otros componentes

    Vamos a crear reutilizable el componente de ordenación.

  • 6 Tarea: Replicar ordenación para las categorías

    Vamos a replicar el esquema de ordenación para las categorías.

  • 7 Publicar en git

JavaScript en Livewire:

  • 1 Introducción

  • 2 Hooks en JavaScript

    Vamos a presentar el uso de los hooks en JavaScript.

  • 3 Extender Livewire con plugins de JavaScript, CKeditor

    Vamos a instalar y configurar CKEditor.

  • 4 Comunicación inversa: De la propiedad a CKEditor

    Vamos a realizar la actualización desde la propiedad a CKEditor.

  • 5 Otras funciones de Livewire en JavaScript

    Vamos a conocer otras funciones de JavaScript útiles para el desarrollo.

  • 6 Node y JavaScript de Livewire

    Vamos a hablar de si podemos usar Node con el JavaScript de Livewire.

  • 7 Publicar en git

Propiedades en Livewire

  • 1 Introducción

  • 2 Personalizar la actualización de las propiedades en el wire:model

    Vamos a trabajar con las propiedades del lado del wire:model para diferir las actualizaciones al servidor.

  • 3 Propiedades computadas

    Vamos a presentar las propiedades computadas.

  • 4 Publicar en git

Blog: Listado y detalle de post

  • 1 Introducción

  • 2 Página de listado: Estructura inicial

    Vamos a crear el esqueleto de la app.

  • 3 Página de listado: Diseño

    Vamos a trabajar en el diseño de la página de listado.

  • 4 Layout

    Vamos a crear y configurar un layout para el módulo de blog.

  • 5 Página de listado: Reducir tamaño y alineado

    Vamos a realizar un acomodo extra.

  • 6 Página de detalle

    Vamos a crear la página de detalle.

  • 7 Botón de navegación

    Vamos a crear el botón de navegación.

  • 8 Colocar formulario paso por paso en detalle

    Vamos a colocar el formulario paso por paso en el detalle del post.

  • 9 Publicar en git

Carrito de compras: Estructura inicial

  • 1 Introducción

  • 2 Listado de productos: Esquema inicial

    Vamos a crear el esqueleto del módulo.

  • 3 Item de carrito

    Vamos a implementar la opción de agregar un producto al carrito.

  • 4 Agregar un producto

    Vamos a implementar la opción de agregar un producto al carrito.

  • 5 Gestión del ítem

    Vamos a crear la gestión del ítem.

  • 6 Detalles finales

    Vamos a definir los detalles finales del carrito de compras.

  • 7 Publicar en git

Carrito de compras: Replicar en la base de datos

  • 1 Introducción

  • 2 Crear migración y modelo

    Vamos a crear la estructura para trabajar con la base de datos.

  • 3 Registrar cambios en la base de datos

    Vamos a guardar la sesión del carrito en la base de datos.

  • 4 Establecer sesión en el login

    Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

  • 5 Publicar en git

Carrito de compras: Eventos y mensajes

  • 1 Introducción

  • 2 Plugin de mensajes toast

    Vamos a instalar y configurar un plugin de toast.

  • 3 Escuchar eventos en Livewire JavaScript

    Vamos a escuchar los eventos desde el ítem del carrito desde JS.

  • 4 Múltiples escuchadores

    Vamos a escuchar en varios lugares los eventos.

  • 5 Publicar en git

Carrito de compras: Total de items

  • 1 Introducción

  • 2 Calcular total

    Vamos a calcular el total de elementos en el carrito.

  • 3 Issue o Bug

  • 4 Mostrar carrito con el total

    Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

  • 5 Publicar en git

Extra: Alpine JS, Introducción

  • 1 Introducción a Alpine.js

    Vamos a hablar un poco sobre el framework.

  • 2 Livewire y Alpine

    Vamos a comparar ambos frameworks.

  • 3 Preparar un proyecto

    Vamos a crear un proyecto para trabajar con Alpine.

  • 4 Mostrar contenido HTML con variables reactivas: x-data, click y x-show

    Vamos a conocer el esquema básico, con un componente para mostrar u ocultar bajo demanda.

  • 5 Campos de textos y variables: x-model y x-text

    Vamos a mapear una variable a un campo de texto.

  • 6 Atributos: x-bind

    Vamos a presentar el bind de atributos.

  • 7 Atributos: múltiples valores

    Vamos a trabajar con múltiples valores para los atributos.

  • 8 Atributos: style

    Vamos a trabajar con el atributo de estilos.

  • 9 Ciclos y condicionales: x-for y x-if

    Vamos a conocer el uso del for y condicional.

  • 10 Bloque de script

    Vamos a organizar el código anterior en un bloque de script.

  • 11 Introducción

    Introducción

  • 12 Aplicación de todo: Búsqueda

    Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

  • 13 Aplicación de todo: Crear Todos

    Vamos a crear todos.

  • 14 Marcar todo completada

    Vamos a realizar la opción marcar una tarea como completada.

  • 15 Eliminar todo

    Vamos a realizar la opción de eliminar un todo.

  • 16 Borrar todos los todos

    Vamos a realizar la opción de borrar todos los todos.

  • 17 Modificar un todo

    Vamos a realizar la opción de modificar un todo.

  • 18 Configurar Bootstrap 5

    Vamos a adaptar el estilo de B5 en la app.

  • 19 Extra: Guardar de manera persistente

    Extra: Guardar de manera persistente

  • 20 Publicar en git

  • 21 Atributo ref

Alpine y plugins externos: Sortable

  • 1 Introducción

  • 2 Sortable: Ordenable

    Vamos a instalar y configurar un plugin para hacer ordenable el listado.

  • 3 Publicar en git

Aplicación de TODO con Livewire y Alpine

  • 1 Introducción

  • 2 Adaptar la app de Todo de Alpine en Livewire

    Vamos a clonar el proyecto de Alpine en Livewire.

  • 3 Crear migración y modelo

    Vamos a crear el modelo y migración de los to do.

  • 4 Crear to do desde Livewire

    Vamos a crear un to do desde Livewire y la clase componente.

  • 5 Popular listado de todos desde Livewire

    Vamos a mostrar el listado de to do desde la base de datos en Alpine.

  • 6 Reordenación: Actualizar arrays en el cliente y servidor

    Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.

  • 7 Reordenación: Actualizar en la base de datos con un evento

    Vamos a guardar los to do en la base de datos.

  • 8 Reordenación: Segundo esquema, splice

    Vamos a presentar un esquema de ordenación, el de quitar y colocar el todo.

  • 9 Bug en Livewire y Alpine parte 1

    Hablaremos sobre un bug actualmente.

  • 10 Reordenación: Tercer esquema, solo IDs

    Vamos a presentar un esquema de ordenación.

  • 11 Bug en Livewire y Alpine parte 2

    Seguiremos hablando del bug.

  • 12 Eliminar un to do

    Vamos a eliminar un to do en la base de datos.

  • 13 Editar un todo

    Vamos a actualizar un to do.

  • 14 Marcar completado un to do

    Vamos a marcar como completado un to do.

  • 15 Eliminar todos los to do

    Vamos a eliminar todos los to do.

  • 16 Extra: Reordenación de los to do por axios

    Vamos a realizar la reordenación mediante una petición en axios.

  • 17 Publicar en git

Migrar de Bootstrap a Tailwind

  • 1 Introducción

  • 2 Migrar HTML

    Vamos a convertir el contenido de Bootstrap 5 a Tailwind.css.

  • 3 Publicar en git

Alpine JS: Otras características

  • 1 Introducción

  • 2 x-ignore, ignorar un bloque de HTML

    Veremos cómo ignorar un bloque de HTML.

  • 3 x-teleport, transportar un template

    Veremos cómo copiar el contenido de un componente en otra parte del DOM.

  • 4 x-effect, observar cambios en variables

    Veremos cómo detectar cambios en variables.

  • 5 $watch, observar propiedades

    Veremos cómo crear un observable.

  • 6 x-html, renderizar variables con HTML

    Veremos cómo imprimir contenido HTML.

  • 7 $id, crea IDs dinámicos y organizados

    Veremos cómo generar IDs dinámicos.

  • 8 $el, referencia al elemento

    Veremos cómo referenciar un elemento como si fuera un selector.

  • 9 $store, almacenar datos de manera global

    Veremos cómo almacenar datos en el store.

  • 10 $nextTick, Script luego de aplicar cambios en el DOM

    Veremos cómo verificar si los cambios fueron realizados por Alpine en el DOM.

  • 11 $dispatch, eventos personalizados

    Vamos a conocer como manejar eventos personalizados.

  • 12 $root, acceder atributos en el root

    Vamos a conocer como acceder a atributos del root del componente.

  • 13 Plugin, máscaras

    Vamos a conocer un nuevo plugin para manejar la máscara de los inputs.

  • 14 Publicar en git

Proyectos en Alpine.js con Tailwind.css

  • 1 Cart Api Rest

    Presentación

  • 2 Cards Api: Estructura inicial

    Crearemos el listado de usuarios.

  • 3 Cards Api: Tailwind

    Aplicaremos el estilo con Tailwind.css.

  • 4 Cards Api: Búsqueda

    Vamos a crear un campo de búsqueda para las cartas.

  • 5 Cards Api: Variar cantidad de cartas, estructura

    Vamos a crear la estrVamos a crear la parte funcional para variar las cantidades.uctura básica para variar las cantidades.

  • 6 Cards Api: Hover

    Vamos a crear un efecto hover.

  • 7 Cards Api: Variar cantidad de cartas, script

    Vamos a crear la parte funcional para variar las cantidades.

  • 8 Cards Api: Loading

  • 9 Cards Api: Deshabilitar input range

    Vamos a deshabilitar el input de tipo rango al momento de realizar una petición.

  • 10 Accordion: Estructura inicial

    Vamos a crear un nuevo componente, el cuerpo básico.

  • 11 Acordeón

  • 12 Accordion: Animación

    Vamos a desplegar y contraer el acordeón de manera animada.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!