Creating Website: Event of the Year - HTML, TailwindCSS, and JavaScript (Educational)
HTML-код
- Опубликовано: 24 июл 2024
- In this educational tutorial, you will learn how to build a website using Astro.js, a powerful web technology. Our goal is to make learning Astro.js easier and provide a comprehensive introduction to its usage in building static and modern websites or landing pages in 2023. We will explore key topics such as HTML, CSS, TailwindCSS, JavaScript, and advanced optimization of images and typography to enhance the user experience, also known as UX.
⚫ Demo: 646526e3906c57079154c976--luc...
Join our community to discover tips and tricks on creating complete websites or landing pages like this one for La Velada Del Año 3 with Astro.js and other modern web technologies.
🌟 Community Discord: / discord
🎥 Follow me on Twitch for more live streams: / midudev
📂 La Velada del año 3 repository: github.com/midudev/la-velada-...
Learn more:
📺 React Course: • ⚛️ CURSO DE REACT 2024
📺 TypeScript Course: • TypeScript - curso des...
🐱👤 My Repository: github.com/midudev
Video Timestamps:
0:00 Moving hands 🐱👤
1:41 Initializing Project with Astro.js
5:00 Extracting Images with JavaScript
8:37 Creating Sections
9:27 Splitting Fighters
15:00 Styling Fighters
20:13 TailwindCSS Library
22:45 Transitioning to Fighters
28:00 Integrating Header
31:24 Boxing Font
35:21 h1 Gradient
37:55 Gradient Background
40:00 Information
49:50 Hover Effect
54:38 Explaining Hover Effect
01:05:38 Clip-Path
01:13:22 Creating the VERSUS
01:31:35 Creating Repository
01:33:13 Bottom Lines
01:40:10 Optimizing Images 1
01:47:10 Optimizing Images 2
01:51:24 Webp and Svg
01:52:03 Prebuild
01:57:21 Lighthouse Check 1
02:01:19 Optimizing Fonts
02:16:00 Prioritizing Images
02:21:19 Changing Font to Another
02:26:50 Deploying on Netlify
02:29:00 End
#astro #astrobuild #astrojs #html #css #tailwindcss #javascript #webdevelopment #frontend #programming #midudev #midulive 
Наука
Top Midu! Siempre aprendo contigo. Muchas gracias!!!!
Gracias a ti!!
Este muchacho es lo uno quiere llegar a ser 😃
Midu! Gracias por todo el aporte que das a la comunidad, es Chevere como aprendo hasta de rendimiento contigo.
Quiero llegar a tu nivel, verte escribir código de esa manera solo me emociona, gracias por estos videos.
Este dia he mejorado mas en mi experiencia con web performance.. gracias midu ❤🎉
Gracias Midu por ayudarnos a mejorar! Te quiero un montón 🌻
Excelente como siempre. Ojalá hagas más videos como éste. Aprendo una banda. Saludos desde Argentina.
me gusta muchob la pasion que le pones a lo que haces, muy inspirador!
Que bacano que subas los videos de Twitch aqui en Yt. Aqui en Bolivia es dificil ver el Stream, es por la velocidad del lnternet; entonces lo que hago es descargarlos y guardarlos en un disco duro muy antiguo; el cual cuido como a un bebe
SOS UN CRACK MIDU!!! me gusta como te emocionas cuando queres pillar algo a tu forma!! jajaja un abrazo siempre sumas cosas productivas aun que sea jugando
Midu eres la persona que siempre me hace seguir aprendiendo más, gracias crack!
Vi que muchos preguntaban en el directo, la terminal que utiliza en el video se llama Warp. Actualmente esta disponible solo para Mac
🎯 Key Takeaways for quick navigation:
00:00 🌐 En el tutorial, se busca mejorar una página web existente utilizando Astro build, HTML, TailwindCSS y JavaScript.
00:53 🖼️ Se identifican problemas en la página actual, como la calidad de las imágenes y el tiempo de carga, y se planea optimizar el rendimiento.
01:51 🚀 Se elige utilizar Astro, un framework sencillo, para el desarrollo web, con el objetivo de crear interactividad y una animación atractiva.
02:47 ⚠️ Se enfatiza que el proyecto es solo con fines educativos y no se buscará su publicación o compra de dominio.
04:34 💻 Se inicia la creación del proyecto con comandos para instalar dependencias como Astro y TailwindCSS.
08:29 🎨 Se comienza a diseñar la sección principal de la página, colocando imágenes de "boxeadores" en posiciones específicas con estilos personalizados.
19:18 🔄 Se plantea la necesidad de agregar animaciones a las imágenes para mejorar la presentación visual de la página.
21:23 🎨 Telwin CSS Animated es una biblioteca que facilita animaciones con Telwin de manera fácil y rápida.
21:49 🛠️ La instalación de Telwin Animated se realiza con `pnp install animated`, y es una dependencia de desarrollo.
22:16 🎭 Telwin CSS Animated ofrece un playground para probar animaciones con diferentes estilos y parámetros.
23:06 ⏰ Ajustar los tiempos de retardo (`delay`) en las animaciones es clave para lograr efectos deseados.
25:18 🚧 Problemas con `animate delay` se resuelven al aplicarlos a cada imagen individualmente en lugar de a nivel global.
26:44 🚀 Optimizar las animaciones para una experiencia de usuario rápida es esencial; evitar largos tiempos de carga.
28:12 🖼️ Agregar un logo al sitio web y estilizarlo con estilos y fuentes específicas.
30:02 🌈 Aplicar gradientes y efectos visuales para mejorar la estética del sitio.
35:21 📏 Utilizar gradientes radiales y colores oscuros para mejorar la apariencia de secciones específicas del sitio.
40:42 🌐 Crear una sección de información interactiva al hacer hover sobre elementos específicos del sitio, brindando detalles sobre eventos y enlaces relevantes.
44:12 🎨 Ajustando el diseño del sitio web, enfocándose en Flex display y colores para resaltar información clave.
45:33 🎟️ Personalización de elementos para destacar información sobre Twitch y la compra de boletos.
46:33 ✨ Agregando efectos de hover a los enlaces para una mejor experiencia visual.
49:16 🖼️ Exploración de ajustes visuales para el fondo y el logo del sitio web.
50:10 🖱️ Implementando una función de hover que destaca información específica al pasar el mouse sobre elementos.
51:56 🔍 Uso de JavaScript para gestionar eventos de hover y resaltar elementos relacionados.
55:38 🤔 Explicación detallada sobre la recuperación de imágenes y posicionamiento de elementos para efectos de hover.
57:57 🔄 Alternativa propuesta para la recuperación de imágenes y posición en lugar del uso de `array.from`.
59:43 🎭 Aplicación de efectos visuales al seleccionar imágenes específicas, mejorando la experiencia de usuario.
01:00:14 🎞️ Implementación de un efecto de ocultamiento y resaltado al interactuar con imágenes mediante eventos de hover.
01:07:19 🖌️ Se explora la aplicación de la propiedad `clip-path` para recortar imágenes en el tutorial.
01:08:52 🔄 Se muestra cómo ajustar la propiedad `clip-path` manualmente para lograr el recorte deseado en la imagen.
01:13:30 🔍 Se discute la posibilidad de implementar una función de detección automática para recortar imágenes de forma precisa.
01:14:53 🥊 Se comienza a trabajar en una interfaz de combate, explorando estilos visuales para indicar el enfrentamiento entre dos elementos.
01:17:12 📊 Se ajustan las propiedades de visibilidad y animación para mostrar y ocultar información específica durante el combate.
01:19:26 🛠️ Se utiliza JavaScript para dinámicamente cambiar los nombres de los luchadores en la interfaz de combate.
01:23:07 🎨 Se experimenta con la creación de un teclado visual para añadir un toque estético a la interfaz del juego.
01:30:49 🌐 La optimización de imágenes es crucial para el rendimiento de un sitio web. El tutorial explora métodos como WebP y herramientas como Squoosh para reducir el tamaño de las imágenes hasta un 90%.
01:33:03 🎨 Mejorar la apariencia con líneas de fondo y gradientes. Se discute la implementación de líneas en el índice Astro y se experimenta con gradientes y efectos visuales.
01:35:26 ⚙️ Configuración detallada de diseño con Tailwind CSS. Ajustes en el código para centrar elementos, agregar blur y ajustar opacidades para lograr efectos visuales específicos.
01:38:11 🚀 Se aborda la importancia de los créditos y la originalidad. Discusión sobre cómo evitar la copia de diseños y cómo agregar elementos personalizados sin perder la autenticidad.
01:42:51 🖥 Herramientas útiles para la optimización de imágenes. Se presentan aplicaciones como ImageOptim, Squoosh y el uso de Brew para instalar WebP, destacando la importancia de reducir el tamaño de las imágenes para mejorar la carga del sitio.
01:45:28 🔄 Métodos automatizados para convertir imágenes a formatos optimizados. Se explora el uso de comandos en la terminal, como cwebp, para convertir múltiples imágenes a formatos como WebP de manera eficiente.
01:46:43 🧩 Integración de optimización de imágenes en flujos de trabajo. Se sugiere incorporar la optimización de imágenes como parte del proceso de construcción del sitio para mantener un rendimiento óptimo.
01:53:30 🚀 Utilizar "pnpm Ram build" en lugar de "pnpm build" puede mejorar el rendimiento en la ejecución de scripts en Astro build.
01:54:22 🌐 Se pueden realizar optimizaciones detalladas, como la optimización de imágenes y fuentes, para mejorar el rendimiento de la página web.
01:56:54 🖼️ Reducir el tamaño de las imágenes, especialmente con formatos como webp, puede tener un impacto significativo en el rendimiento de la carga de la página.
02:02:30 📊 Pre-cargar fuentes utilizando "font-display: swap" puede mejorar la visibilidad del texto mientras se carga la página.
02:05:49 🔄 La pre-carga de activos críticos, como fuentes, puede acelerar la carga de la página y mejorar la experiencia del usuario.
02:09:28 🖼️ Optimizar imágenes grandes y evitar animaciones en las primeras cargas puede ayudar a reducir el tiempo de renderizado del elemento más grande en la vista del navegador.
02:13:30 🏞️ Priorizar la carga de imágenes mediante "fetch priority" puede influir en el orden en que se cargan y muestran en la página.
02:16:40 🔄 Optimización de carga de recursos web en diferentes navegadores.
02:17:35 🖼️ Priorización de recursos con preload para mejorar la velocidad de carga.
02:19:22 📏 Estrategias para evitar cambios bruscos en el diseño y mejorar la experiencia del usuario.
02:20:15 🚀 Uso de preload y ajuste de prioridades para optimizar la carga de recursos críticos.
02:21:43 🔄 Experimentación con técnicas avanzadas de fallback para mejorar la consistencia visual.
02:25:47 🧐 Evaluación del impacto de las fuentes en la velocidad de carga y estrategias de optimización.
02:26:40 📊 Monitoreo del rendimiento y consideraciones sobre la optimización de imágenes.
02:29:18 📈 Compromiso con la mejora continua y exploración de contribuciones de la comunidad en GitHub.
Made with HARPA AI
Te la rifaste hermano
Te pasaste xd
Hola Midu! Gracias por tus videos, sos un capo. Se que te consultaron varias veces, pero vengo siguiendo el curso de aprendiendo react desde 0 y para no quedarme atras, vi que faltan subir los vids del 8 al 11. Tenes mas o menos idea de cuando los subiras? Gracias!!!
Brutal!! mil gracias por compartir
este es un pedazo de video ❤❤🙌🙌
Estaria genial ver como se hace el mismo efecto de los boxeadores pero con react
Minimalismo y elegancia midu ❤️🔥
che mid sos un capo loco, muchas gracias por enseñar
Midu como siempre volandonos la cabeza excelente video brother.
Gracias! 😊
genial explicacion paso a paso.. sigue adelante.... si podrias compartir todas las extensiones que utilizas en Visual Studio Code, para asi simplificar el trabajo en el momento de picar codigo... gracias..
Me ha gustado mucho el tema del script en consola para extraer las imágenes
Gracias! 😻
pensar que me entretengo mas viendo esto que una película
Porque aprendes más 😊
duda: si es buena practica agregar eventos atreves de un loop como se muestra en el video, en la parte de foreach mouseenter ?
Hola Midu, Astro me esta pareciendo muy interesante y práctico, muchas Gracias por todo lo que aportas
Dios lo bendiga, saludos desde Bogotá Colombia, ojalá se de el live con Código 369
Astro esta tremendo, creo que tiene un gran futuro
Astro está interesante
Que genio miduuu
He visto varios videos tuyos y eres muy bueno no solo desarrollando sino explicandolo, una pregunta, estoy empezando a retomar despues de un par de años el desarrollo web y dentro de los framework que he visto esta bootstrap y tailwind entre los mas usados cual me recomiendas entre esos 2 y porque. Gracias.
que buenos recuerdos de cuando trabajaba optimizando imagenes :)
que genio, bueno cada dia aprendo mas
Gracias!
19:30 y pensar que enserió reventó a sus rivales 😂😂
grandes trucos! :)
nuevo suscriptor.. muy bueno
jajaja ese truquito me hizo la noche, y concuerdo, no se puede descargar de una forma si ya sabes una forma mejoor jaja
que buena
aunque ahora que lo pienso, tambien podria haberse guardado con el atributo "alt" de cada imagen, asi ya no lo renombrarias a cada una xd
varios trucazos
El puto amo 🎉
34:50 fffffck! se fue la luz en casa y después de que volvió olvidé que estaba esto puesto empezó a hablar de repente! que susto. Pensé que alguien se había metido a la casa T_T que buenas bocinas tienen las mac y que buen micrófono tienen mr Midu
Generalmente me caen mal dev que se dedican a ser streamer, pero debo admitir q de todos los q he visto, sos el que mas abarca codigo y terminología de la industria.
Astro la esta rompiendo 🎉
Un crack hermano
holaa midu, soy nuevo en todo esto, queria preguntar si esto se puede subir a github como una copia y presentar como "lo que se hacer" o es muy de pirata esto?
Que grande
Y si usas 2 cdn :1 Cloudflare y cómo segundo bunny y cargas las imágenes desde bunny eso podría ayudar
Nuevo sub, atrajiste mi atención
Esooooo
jajaja me cago de risa cuando la gente te pide cositas que les da TOC y vos lo arreglas quejandote 😂. Sos un cago de risa Midu, muchas gracias por el video
jajajajaj esa es la idea, pasárselo bien mientras aprendemos!
Vengo empezando con esto y he anotado varias cositas de este video, aunque no entiendo muy bien el tema de "Astro" tocará investigar.
Como haces el zoom en el puntero midu?
Estaría genial verte a ti en la próxima edición de la velada del año! Al cabo eres streamer tambien! jejejejejejeje
Ojalá! Que me inviten! Ibai, hazlo.
deberias hacer mas videos asi
Empece a ver el video diciendo "voy a poner de fondo algo entretenido y que al menos aprenda algo" y me quede enganchada y ya quiero hacerlo!
Será esta acaso mi oportunidad de aprender Astro?
Midu como asi configuraste tu consola, danos un tuto porfavor maestro
estas locoooo
Que Framework recomendáis para empezar?
Alguien sabe cómo se llama la extensión que utiliza para hacer scroll en una sola parte del código ?
Oue bro siempre te veo mas tiempo tratando temas de calidad de código, pero en este video veo que tienes también muchas skills de UI/UX, como puede alguien mejorar para hacer diseños y web con estilos muy bonitos, elegantes y profesionales?
Con suerte el año que viene tencintratan, tienes talento ahora te faltan contactos
Como se llama la herramienta que usa para medir pixeles en pantalla?
Te kiero
Es posible hacer un extracto de la fuente para que solo contenga las letras que necesitas ?
me parece una idea increible como tarea de aprendizaje pero yo la llamare la huevada del año jaja
q a pasao q despue de la hora tiene autotune XDDD buen video bro bastante interesante todo esto😋
Midu quiero ser como vos! Pero cuando quiero iniciar un curso se me abre solo el League of legends
jajaja seguro que se abre solo. JAJAJAJA
Lo veo a midu hipeado por las animaciones que esta metiendo y me siento identificado... ajajajajaja
jajajaja la pasión!
Nose no me interesa crear paginas web pero estoy aca mirando todo xd
Se puede crear una pagina tipo blog solo con HTML, CSS y de pronto JS? (Me refiero, o sea, a publicarla y todo así?)
Lo mejor ! La velada del ano es espectacular.
Los desarrolladores que cobraron 6 meses por hacer esa web viendo como la terminas (y mejor) en una hora 🫥
😅😅😅
Como vas a comparar algo que se hace desde cero, con que una persona copie ya un proyecto hecho?
Es lo mismo que Un pintor puede durar 1 mes haciendo una obra, y llega otro y hace una copia de esa obra viéndola en dos horas
Así que, no tiene sentido lo que dices
una maquina es este chabon
@@oxioxp cállese señora
@@oxioxp no leo lloros
Alguien sabe cómo se llama el tema de iconos que usa en visual code ?
esta bueno, pero creo que hubiera quedado mejor si hubieras hecho unos div para marcar las imagenes, ya que si pones hover en las imagenes algunas imagenes son mas dificiles de apuntar que las otras
No hace falta usar div. Eso lo ajustamos con clip path y quedó perfecto. :)
Hace unos días hice un script para descargar pdfs para ello tenía que hacer click en un botón por pdf y al momento de meterlo en un ciclo, no me descargaba todos. La solución fue crear una función de sleep, que esperara 3 segundos.
¿Y si hubiésemos hecho un contenedor por cada fila? Es decir, por pares de contrincantes. De esa manera sería sencillo iluminar cada par, ¿verdad?
Midu procede a ser demandado otra vez. Que crack
jajaja va a ser un hobby
como podria optimizar más aun las imagenes en plan heavy creo que "avif" es el limite :b
Cargarla por tamaños diferentes dependiendo del dispositivo.
un momento me siento perdido, eso de poner solo class sin hacer el css y hacer todo el estilo en el html eso es gracias a tailwindcss u astro, vaya tengo mucho que aprender, me parecio entretenido imagino que asi se trabaja en el campo del desarrollo.
tengo problemas con el fonts no me lo reconoce :C
Estoy descargando por si acaso lo vuelven a demandar 😂
JAJAJAJAAJ
No entendí eso de [&>img]:clases en html, como se llama eso? como es que funciona, es algo de tailwind o de css? nosabía que se podia hacer eso en html, lo que hizo en section class={' clases'}, porque las llaves? Favor, sin ego que todo mundo empieza no sabiendo, que ya me he topado a cracks olvidandose que empezaron sin saberlo, estoy en las mismas.
19:33 predict
54:58 despues sigo dejo marcador ajdjajdjak
lo de las imagenes lo deberias sacar a un video aparte
2:29:00 Es verdad, es bastante grande
Tengo 12 años, y en clase de Tecnología y Digitalización me miran raro por saber mucho, no se si es bullying, un halago o yo que se jajajaj. Lo que me impresionó, es que el profesor se quedó flipando pq le dije las potencias para calcular el paso de bytes a mb. Que es 2 elevado a x. Mi pregunta es, ¿cómo es profesor? jajaj
en *{user-select : none;
} nice
El desarrollador de la pagina real viendo que midu la hizo en 2hs y el pidio un mes de presupuesto: ☠️
Si se puede hacer en dos horas entonces no vale el presupuesto de 1 mes....entendés?
Solo esta replicando algo ya hecho
hola bro por cuasualidad no vendes cursos
Desde que entré me parece que la página base está hecha con WordPress
La pelada
Se nota que sabe quien es amoran minuto 12:11 hace las señas a visto el contendido de ella, 😂😂
Me he enredado al ver que programaba diseños en el index y no entendí nadajajaja, soy nuevo y estoy aprendiendo, me enredé todo con el css 😂
Quedaría mejor la "Helada del ano", grande Midu
Jajajajajajs
xD Cuidado miduuuuu !! Dalas viene por vos ! 😢
Que tryhard, me perdi a partir del minuto 1:45
xD Pues mal vamos
quienes son todos esos 😆
Ni idea jajaja
midu usa linux?
macOS
AEA
ola
falto squosh en las img
Nop, lo usamos. De hecho en otro directo usamos imágenes responsive que mejoró el rendimiento hasta 99. :)
Entre a la pagina de la velada y cambiaron las imagenes xD
2:28
ig de la minita?
😳
ese ASTRO no le veo nada de diferente q usar HTML, CSS y JS vanilla
Pues eso es bueno, no?
Esa es la parte buena 🤓
Si es bueno, pero de usar React se me olvida el vanilla js 😅😅
Mandenle este video a Ibai