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

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


Duration: 2:30:01
138,573 views
5,400

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



Other Videos By midulive


2023-06-26#4 Conceptos: Streaming de Datos UI, Headers y más | Next.js 13
2023-06-26#3 Desarrollando El Componente Chat | Next.js 13
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]


Tags:
midudev
midudev twitch
desarrollo web
javascript
astro build tutorial
astro build
astro build tailwind
aprende astro build
html y css
html
tutorial de astro.js
javascript tutorial
efecto hover css
velada del año
velada del año 3
landing page html css
landing page html css javascript
landing page astro
construye landing
que es una landing page y como hacerla
html desde cero
efectos javascript para paginas web
sitio web moderno