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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 6
Preguntas 1
Main.svelte
<main class="Main">
<div class="Main-container">
<div class="Main-content">
<slot />
<div class="Sidebar">Sidebar </div>
</div>
</div>
</main>
<style>
.Main-container {
display: grid;
grid-template-columns: minmax(auto, 1024px);
justify-content: center;
align-items: center;
}
.Main-content {
margin: 2em 0 0;
display: grid;
grid-auto-columns: 3fr 1fr;
gap: 68px;
justify-content: space-between;
}
</style>
Recuerden que el grid-gap ya no es una etiqueta válida, actualmente es solo gap ✌
👌
Armando la estructura del proyecto. Sigamos
Como se llama esa terminal Oscar?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?