Creating Website: Event of the Year - HTML, TailwindCSS, and JavaScript (Educational)
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: https://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: https://github.com/midudev/la-velada-...
Learn more:
📺 React Course: • ⚛️ CURSO DE REACT 2024
📺 TypeScript Course: • TypeScript - curso desde cero 2023
🐱👤 My Repository: https://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