Creando Sitio Web Velada Del Año – HTML TailwindCSS y JavaScript (Educativo)

En este tutorial educativo, aprenderás a construir un sitio web utilizando Astro build, una poderosa tecnología web. Nuestro objetivo es facilitar el aprendizaje de Astro build y proporcionar una introducción completa por medio de un proyecto web estátic y moderno. Para ello se usara también HTML, CSS, JavaScript y TailwindCSS para lograr increíbles efectos estilizados, así como técnicas avanzadas de optimización de imágenes y tipografía para mejorar la experiencia del usuario (UX).

⚫ Demo: https://646526e3906c57079154c976–lucky-profiterole-9dd47a.netlify.app

Únete a nuestra comunidad para descubrir cositas y cómo crear Sitios web o Landing Pages completas como esta para La Velada Del Año 3 con Astro build y más tecnologías web modernas

🌟 Discord de la comunidad: https://discord.com/invite/midudev
🎥 Sígueme en Twitch para más directos: https://www.twitch.tv/midudev
list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29
📂 Repositorio de La Velada del año 3: https://github.com/midudev/la-velada-landing
Aprender más:
📺 Curso de ReactJS: https://www.youtube.com/playlist?list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29
📺 Curso de TypeScript: https://youtube.com/playlist?list=PLUofhDIg_38pNCZe9ptj72exbFjzyePxT
🐱‍👤 Mi Repositorio: https://github.com/midudev

Marcadores del video:
0:00 Moviendo las manitas 🐱‍👤
1:41 Iniciando Proyecto con Astro.js
5:00 Extraer Imágenes con JavaScript
8:37 Creando Secciones
9:27 Dividir Luchadores
15:00 Estilando Luchadores
20:13 Biblioteca de TailwindCSS
22:45 Transición a Luchadores
28:00 Integrando Header
31:24 Fuente-Boxing Font
35:21 Gradiente h1
37:55 Fondo Gradiente
40:00 Información
49:50 Efecto Hover
54:38 Explicando el Efecto Hover
01:05:38 Clip-Path
01:13:22 Creando El VERSUS
01:31:35 Creando Repositorio
01:33:13 Líneas de fondo
01:40:10 Optimizar Imágenes 1
01:47:10 Optimizar Imágenes 2
01:51:24 Webp y Svg
01:52:03 Prebuild
01:57:21 Checkeo 1 en Lighthouse
02:01:19 Optimizar Fuentes
02:16:00 Priorizar Imágenes
02:21:19 “Cambiar” Fuente por Otra
02:26:50 Deploy en Netlify
02:29:00 fin

#astro #astrobuild #astrojs #html #css #tailwindcss #javascript #desarrolloweb #frontend #programacion #midudev #midulive