Que buena clase, buena forma de darle estilos y mantener un orden para que sea más cómodo leer el código y editarlo.
Herramientas para trabajar con Svelte profesionalmente
Proyecto del curso y estado del arte de Svelte
Setup inicial con Sapper
Estructura de un proyecto en Sapper
Estructura de rutas con Sapper
Sistema de rutas y rutas dinámicas en Sapper
Layout y estructura principal de nuestro blog
Ruta 404 con animaciones
Rutas principales del blog: about, contact y tags
Construye el Layout y Newsletter del blog
Diseño y maquetación del Header
Diseño y maquetación del Nav
Diseño y maquetación del Sidebar y Footer
Construye un Newsletter para el blog
Estructura de los blogposts
Sección principal del blog y blogposts
Integración de analytics, comentarios y tiempo de lectura en tu blog
Integración con Google Analytics
Calcula el tiempo de lectura de cada blogpost
Muestra un emoji aleatorio en cada blogpost
Manejo de fechas dentro del blog con JavaScript Vainilla
Estructura del blogpost con comentarios
Integración con Disqus para agregar comentarios
Construye tu API usando Ghost CMS
Instalación de Ghost
Configuración de Ghost en Heroku
Ghost Core API
Integra la API de Ghost en tu blog con Svelte
Guardando la información de nuestros blogposts
Terminando la integración
Despliega tu aplicación
Compra de un dominio y manejo del DNS con Cloudflare
Deploy a Netlify
Deploy a Heroku
SEO y optimización de tu sitio web
Metadatos y optimización del SEO
Transforma tu blog en una PWA
RSS
Terminando el RSS
Sitemap
Agrega pruebas de integración con Cypress
Cómo continúa tu camino profesional con Svelte
Siguientes pasos con Svelte
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 4
Preguntas 0
Que buena clase, buena forma de darle estilos y mantener un orden para que sea más cómodo leer el código y editarlo.
Con este curso me di cuenta que necesito mejorar mi html y css ahora solo tengo que llegar a ese nivel de maquetado y estilos.
Styles
<style>
margin-top: 5px;
padding: 0;
}
.comments {
margin: 2em 0 0 0;
}
</style>
[slug].svelte
<script context="module">
export async function preload({ params }) {
// the `slug` parameter is available because
// this file is called [slug].svelte
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import readingTime from './../../utils/readingTime'
import formatIsoTime from './../../utils/formatIsoTime'
export let post;
</script>
<style>
h2 {
color: #22215b;
font-size: 28px;
margin: 0;
padding: 0;
}
.Post-title {
color: #555;
font-size: 14px;
font-weight: 300;
margin-top: 5px;
padding: 0;
}
.comments {
margin: 2em 0 0 0;
}
</style>
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<div class="Post">
<div class="Post-title">
<h2>{post.title}</h2>
</div>
<p class="date">
<time datetime="{post.createdAt}">
📅 {formatIsoTime(post.createdAt)}
</time>
<span>{readingTime(post.html)}</span>
</p>
<div class="content">
{@html post.html}
</div>
<div class="comments">
</div>
</div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?