Herramientas para trabajar con Svelte profesionalmente

1

Proyecto del curso y estado del arte de Svelte

2

Setup inicial con Sapper

3

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

4

Sistema de rutas y rutas din谩micas en Sapper

5

Layout y estructura principal de nuestro blog

6

Ruta 404 con animaciones

7

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

8

Dise帽o y maquetaci贸n del Header

9

Dise帽o y maquetaci贸n del Nav

10

Dise帽o y maquetaci贸n del Sidebar y Footer

11

Construye un Newsletter para el blog

12

Estructura de los blogposts

13

Secci贸n principal del blog y blogposts

Integraci贸n de analytics, comentarios y tiempo de lectura en tu blog

14

Integraci贸n con Google Analytics

15

Calcula el tiempo de lectura de cada blogpost

16

Muestra un emoji aleatorio en cada blogpost

17

Manejo de fechas dentro del blog con JavaScript Vainilla

18

Estructura del blogpost con comentarios

19

Integraci贸n con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

20

Instalaci贸n de Ghost

21

Configuraci贸n de Ghost en Heroku

22

Ghost Core API

23

Integra la API de Ghost en tu blog con Svelte

24

Guardando la informaci贸n de nuestros blogposts

25

Terminando la integraci贸n

Despliega tu aplicaci贸n

26

Compra de un dominio y manejo del DNS con Cloudflare

27

Deploy a Netlify

28

Deploy a Heroku

SEO y optimizaci贸n de tu sitio web

29

Metadatos y optimizaci贸n del SEO

30

Transforma tu blog en una PWA

31

RSS

32

Terminando el RSS

33

Sitemap

34

Agrega pruebas de integraci贸n con Cypress

C贸mo contin煤a tu camino profesional con Svelte

35

Siguientes pasos con Svelte

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
7H
48M
19S

Secci贸n principal del blog y blogposts

13/35
Recursos

Aportes 5

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Estilos de Post.svelte

.Post-item{
        color: #191a22;
        position: relative;
    }
    .Post-content{
        font-size: 16px;
        font-weight: 300;
        display: grid;
        justify-content: space-between;
        grid-gap:5px;
        grid-template-columns: 1fr ;   
     }
     .Post-title{
         font-size: 20px;
         margin: 0;
         padding: 0;
     }
     .Post-title p{
         color: #333;
         font-size: 13px;
         font-weight: 300;
         margin-top: 5px;
         padding: 0;
     }

     a{
         text-decoration: none;
         color: #22215b
     }
     .Post-desc p{
         color:#333;
         font-size: 16px;
         line-height: 28px;
         margin: 0 auto;
         word-break: break-word;
     }
     .dot{
      font-weight: 700;
     }```

Que buena clase!

Post.svelte

<script>
  export let post; 
</script>

<div class="Post-item">
  <div class="Post-content">
    <div class="Post-head">
      <div class="Post-title">
        <h2>
          <a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
        </h2>
        <p>
          <time datetime={post.createdAt}>{post.createdAt}</time>
          <span class="dot">.</span>
          <span>5 min</span>
        </p>
      </div>
      <div class="Post-tags" />
      <div class="Post-desc">
        <p>{post.desc}</p>
      </div>
    </div>
  </div>
</div>

<style>
  .Post-item {
    color: #191a22;
    position: relative;
  }
  .Post-content {
    font-size: 16px;
    font-weight: 300;
    display: grid;
    justify-content: space-between;
    grid-gap: 5px;
    grid-template-columns: 1fr;
  }
  .Post-title {
    font-size: 20px;
    margin: 0;
    padding: 0;
  }
  .Post-title p {
    color: #333;
    font-size: 13px;
    font-weight: 300;
    margin-top: 5px;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #22215b;
  }
  .Post-desc p {
    color: #333;
    font-size: 16px;
    line-height: 28px;
    margin: 0 auto;
    word-break: break-word;
  }
  .dot {
    font-weight: 700;
  }
</style>

驴Ya se unieron a la comunidad de Svelte?

Oscar tiene un typo en la fecha de los posts, por eso le aparece como 鈥渦ndefined鈥. Escribi贸 鈥渃reatedAT鈥 y no 鈥渃reatedAt鈥 en la siguiente linea del archivo Post.svelte:

<time datetime="{post.createdAt}">{post.createdAt}</time>