Creación de una Landing Page con JavaScript y Tailwind CSS

Clase 7 de 23 • Curso de Introducción a Empaquetadores Web

Clase anteriorSiguiente clase

Resumen

¿Cómo crear un proyecto tipo Linktree con HTML y JavaScript?

La combinación de creatividad y programación puede resultar en proyectos impresionantes y personalizados, como un sitio web al estilo Linktree. Este proyecto te permitirá consolidar y compartir enlaces de manera efectiva a través de un solo link. En esta guía, exploraremos cómo configurar un proyecto personalizado utilizando HTML, JavaScript y Tailwind CSS. Prepárate para sacar el máximo provecho de tus habilidades de desarrollo web mientras trabajamos con una aplicación de Vanilla JavaScript y herramientas de empaque como Webpack.

¿Qué elementos incluye el sitio web?

El proyecto culminará en una landing page sencilla, pero efectiva. Aquí tienes los elementos clave que deberías considerar:

  • Información personal: Incluye tu nombre, sobrenombre, una breve descripción y una foto.
  • Enlaces a redes sociales: Añade enlaces a tus redes sociales preferidas, como Twitter, Instagram o LinkedIn, usando íconos SVG.
  • Contenido recomendado: Posibilidad de agregar enlaces a blogs, artículos o cursos.

El resultado será una interfaz similar a Linktree, pero completamente bajo tu control.

¿Cómo adaptar la estructura HTML a tus necesidades?

Arrancaremos pegando en nuestro editor de código el HTML proveniente de un repositorio. Sin embargo, necesitarás hacer varios ajustes personales:

  1. SEO y personalización: Cambia las etiquetas del título, descripción y nombres a los tuyos.
  2. Configuración visual: Asegúrate de que tus redes sociales estén correctamente enlazadas y reflejen tu información personal.
  3. Uso de Tailwind CSS: Esta herramienta provee un diseño optimizado sin necesidad de desarrollar CSS desde cero.
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <title>Tu Nombre</title>
</head>
<body>
  <header>
    <h1>Nombre Completo</h1>
    <p>Breve Descripción</p>
  </header>
  <main id="links">
    <!-- Los enlaces se insertarán aquí dinámicamente -->
  </main>
  <footer>
    <!-- Tu mensaje en el footer -->
  </footer>
</body>
</html>

¿Cómo manipular el DOM con JavaScript?

Ahora, entramos a la parte emocionante: trabajar con JavaScript puro para hacer nuestro sitio dinámico. Aquí utilizaremos JavaScript para iterar sobre la lista de enlaces que quieras compartir y añadirlos al DOM.

const links = document.getElementById('links');

const loadLinks = () => {
  const linkList = [
    { name: 'Mi Blog', url: 'https://mi-blog.com' },
    { name: 'Curso en Platzi', url: 'https://platzi.com' }
  ];

  linkList.forEach(link => {
    const anchor = document.createElement('a');
    anchor.href = link.url;
    anchor.textContent = link.name;
    links.appendChild(anchor);
  });
};

// Llama la función para cargar los enlaces
loadLinks();

¿Cómo personalizar el proyecto con Webpack?

Finalmente, para que tu proyecto sea más profesional y manejable, vale la pena automatizar el desarrollo utilizando Webpack. Aunque la instalación específica dependerá de las necesidades del proyecto, el objetivo es facilitar la importación y modificación de recursos, así como mejorar el desempeño del sitio.

A medida que implementes estos pasos, sigue adaptando y experimentando con la estructura para hacerla completamente tuya. Comparta tu versión final en las secciones de comentarios y preséntala a otros para obtener retroalimentación y continuar aprendiendo. Nunca subestimes el poder de la personalización y la automatización en el desarrollo web. ¡Adelante, desarrolla y aprende!