Published On Jun 2, 2023
En este tutorial, recreamos la landing web de Tesla y lo recrearemos paso a paso con tecnologías web.
Código fuente disponible aquí: https://github.com/midudev/landing-tesla
¿Alguna vez has admirado el diseño limpio y moderno de la página de Tesla? Si es así, este video es perfecto para ti. Te guiaré a través del proceso completo de la recreación de este impresionante sitio web utilizando tecnologías como HTML, CSS, JavaScript y Tailwind CSS.
Primero, analizaremos un poco la web, qué características únicas tiene y luego iniciaremos el proyecto con Astro.
Iremos paso a paso recreando la interfaz de la web y añadiendo el sistema de menú o el slider vertical.
Este video es adecuado para todos los niveles de habilidad. No importa si eres un principiante que busca aprender más sobre el desarrollo web, o un desarrollador experimentado buscando perfeccionar tus habilidades en estos lenguajes, encontrarás valor en este tutorial.
¡Prepárate para desatar tu creatividad y perfeccionar tus habilidades de desarrollo web!
Segmentos del vídeo 📹
00:00 - Introducción y por qué no usamos NextJS
03:00 - Instalación de Astro e inicio del proyecto
05:20 - Instalar Tailwind en Astro
07:00 - Creación del Header
19:30 - Añadir vídeo de fondo en la primera sección
37:15 - Crear slider de secciones
51:48 - Cambiar color del header según la sección
01:04:36 - Crear menu que sigue el cursor
01:19:48 - Reusar componentes en Astro
▶ No te pierdas más directos en: / midudev