Clon del sitio web de Tesla con HTML, CSS, JavaScript y Tailwind

Channel:
Spain midulive
Subscribers:
266,000
Published on ● Video Link: https://www.youtube.com/watch?v=S_oLr_np4S8


Duration: 1:27:42
85,188 views
3,303

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: https://www.twitch.tv/midudev



Other Videos By midulive


2023-06-26#2 Creando el Cliente de OpenIA SDK | Next.js 13
2023-06-26#1 Introducción al AI SDK de Next.js 13 | proyecto Chat-GPT
2023-06-23VERDADES INCÓMODAS EN EL MUNDO DE LA PROGRAMACIÓN 🔥
2023-06-22Portfolios Web de la Comunidad: FeedBack y Tips para mejorar 💻
2023-06-21JS Noticias: ChatGPT Genera Keys Windows, React en Declive, Novedades Angular
2023-06-20Tutorial práctico: React y TypeScript paso a paso, crea tu primera aplicación
2023-06-17Resultados de la Encuesta StackOverflow 2023
2023-06-15De Novato a Ninja: Aprende TypeScript - curso intensivo (#2)
2023-06-15Creando Sitio Web Velada Del Año - HTML TailwindCSS y JavaScript (Educativo)
2023-06-10De Novato a Ninja: Aprende TypeScript - curso intensivo (#1)
2023-06-02Clon del sitio web de Tesla con HTML, CSS, JavaScript y Tailwind
2023-05-30¿Qué es y cómo funciona useEffect? Hooks de React
2023-05-27¡Desarrolla el juego del 3 en Raya en 1 hora con React!
2023-05-23React vs. Angular vs. Vue vs. Svelte - Mesa redonda con expertos de programación
2023-05-22¡Maneja los errores de JavaScript como un senior!
2023-05-15¡Aprende a crear React Router desde cero y publica el paquete!
2023-05-03Tienda y Carrito con React + Estado Global con useContext + Manejo de estado con useReducer
2023-04-22¡El futuro de CSS! Con Carmen Ansio
2023-04-18Aprende a pasar una Prueba Técnica de React. Entiende useMemo, useCallback y useRef [Curso de React]
2023-04-12Custom Hooks + Testing con Playwright: Curso de React desde cero - Parte 4
2023-04-11¡Adiós useState! useSignal es el futuro de los Frameworks Web


Tags:
midudev
midudev twitch
tesla landing
landing tesla
programacion web tesla
tesla css
tesla web css
tesla html css javascript
clon pagina tesla
como hacer la pagina de tesla