Masterclass

Primeros pasos con Eleventy

Crea webs modernas con Jamstack.

Mira el trailer

Duración total: 01:41:18

Código descargable

Acceso 100% online

Descripción de la masterclass

Eleventy es una librería para crear webs de otra forma, de otra manera.

En este directo empezamos a trabajar con 11ty y descubrimos su simplicidad para conseguir el resultado final.

Suscríbete para disfrutar de todo el contenido de danielprimo.io.

Podrás ver a:

Imagen de Daniel Primo

Daniel Primo

CEO en pantuflas de Web Reactiva. Programador y formador en tecnologías que cambian el mundo y a las personas.

Explora los capítulos

1. Presentación y comunidad [03:03]

Presentación y comunidad

[03:03]

2. ¿Qué es eleventy? [21:47]

¿Qué es eleventy?

[03:50]

Instalación de eleventy

[02:15]

Primera página generada desde markdown 🔥

[03:02]

Fichero de configuracion eleventy.js

[04:06]

Crear el index.html de la web

[01:29]

Plantilla global del sitio web

[03:15]

Configuraciones dentro de cada fichero con Front Matter

[03:50]

3. Creando un blog [19:35]

Creando un blog

[03:43]

Plantilla para cada post del blog

[02:14]

Colecciones de posts 🔥

[03:20]

Rutas personalizadas para cada blog

[02:49]

Índice de posts

[07:29]

4. Creando un menú de navegación [07:25]

Creando un menú de navegación

[01:15]

Configuración general del sitio en site.json

[02:10]

Incluir un fichero de plantilla dentro de otro

[04:00]

5. Creando un filter para formatear las fechas usando la librería luxon [09:05]

Creando un filter para formatear las fechas usando la librería luxon

[09:05]

6. Creando un shortcode para mostrar un vídeo de YouTube por configuración [08:40]

Creando un shortcode para mostrar un vídeo de YouTube por configuración

[08:40]

7. Añadiendo estilos CSS [15:59]

Añadiendo estilos CSS

[03:14]

Copiar ficheros desde origen a destino con 11ty 🔥

[00:51]

Recarga automática al cambiar ficheros CSS 🔥

[03:40]

Añadiendo un componente dinámico llamando a una API externa

[06:26]

Explicando cuando el componente es dinámico 🔥

[01:48]

8. Desplegar la web en internet con netlify [15:44]

Desplegar la web en internet con netlify

[02:56]

Panel de control de netlify

[02:50]

Así está hecha la web de laselectanewsletter.com 🔥

[02:40]

Crear un feed RSS con eleventy

[07:18]

Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva

Contenido nuevo todas las semanas

Una comunidad de developers colegas en telegram

Desafíos y retos de programación para que mejores tus habilidades

400 horas de contenido en audio y vídeo

Entrevistas y masterclass en directo con los/las mejores profesionales

Precio

19€Matrículaplus10€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo