MENU

Fun & Interesting

Curso de Astro, Generador de Sitios Web Estáticos

Fazt 421,286 lượt xem 2 years ago
Video Not Working? Fix It Now

Astro es un generador de sitios web estáticos, es decir sitios web que en su mayoría están conformados por solo archivos como HTML, CSS, Javascript, Imágenes y contenido similar. Solo que Astro ofrece una experiencia de desarrollo mucho mas cómoda para desarrolladores web que quieren tener una herramienta similar a los Frameworks de Javascript (React, Vue, Svelte, etc) solo que al final produzca contenido enfocado en HTML. Este Static Site Generator (SSG) también permite cargar componentes de otros frameworks de Javascript en una misma pagina, y también soporta Typescript, gracias a que esta desarrollado encima de Vitejs. Ademas en este curso usaremos el Framework de CSS llamado TailwindCSS y desplegaremos gratuitamente nuestro sitio en Github pages.

Codigo del Landing Page: https://github.com/fazt/astro-landing

Índice del Curso
00:00 Introducción
00:57 ¿Qué es Astro?
02:34 Entorno de desarrollo
18:55 Estructura del Proyecto
29:28 Paginas en Astro
34:49 Extensión de VSCode para Astro
43:00 Sintaxis JSX en Astro.build
58:46 Fetch (Javascript API)
01:07:10 Astro Components
01:25:19 Layouts
01:37:09 Markdown
01:54:27 Imágenes en Astro
01:59:53 Integraciones en Astro
02:19:52 Landing Page en Astro
02:33:37 Landing components
02:43:30 Hero Component
02:52:42: More Component
03:00:52 Features component
03:09:11 Projects component
03:20:11 Deploy en Github Pages

🎥 Videos Recomendados:
Curso de HTML ⮕ https://youtu.be/rbuYtrNUxg4
Curso de Javascript ⮕ https://youtu.be/RqQ1d1qEWlE
Curso de Javascript para React ⮕ https://youtu.be/rLoWMU4L_qE
Curso de CSS ➜ https://youtu.be/W6GTDfrWjXs
Curso de JSON ➜ https://youtu.be/LJzDHKPLWYw
Curso de Git ➜ https://youtu.be/HiXLkL42tMU

Variables de entorno Nodejs ➜ https://youtu.be/U6st9-lNUyY
Javascript Orientado a Objetos ➜ https://youtu.be/N_t1A39IB_8
Arrays en Javascript ➜ https://youtu.be/qqR1enOceVg
ES Modules ➜ https://youtu.be/0t-Le4kdaMg
Curso de React ➜ https://youtu.be/rLoWMU4L_qE
Curso de Nodejs ➜ https://youtu.be/i3OdKwuBjeM
Curso de Express ➜ https://youtu.be/JmJ1WUoUIK4

Curso de Python ➜ https://youtu.be/chPhlsHoEPo
Excalidraw (Herramienta de dibujo) ➜ https://youtu.be/KjyBL60uFL0

👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ https://bit.ly/3ijsVNW
SiteGround ➞ https://bit.ly/31u9ZEk
DigitalOcean ➞ https://m.do.co/c/8ef261d77de5
Expo ➞ https://bit.ly/2WpYKtx
Cloudinary ➞ https://bit.ly/3ohNlJ7
Notion ➞ https://notion.grsm.io/yj9uc7bi3miq

#desarrolloweb #html #javascript

Comment