Astro Web Framework Crash Course

Learn to use Astro in this beginner's tutorial. Astro is an all-in-one web framework for building fast, content-focused websites like landing pages, blogs, technical documentation, and more.
✏️ This course was developed by ‪@JamesQQuick‬
🔗 Longer Astro Course: astrocourse.dev/
💻 Code: github.com/jamesqquick/astro-...
Astro Docs - docs.astro.build/
SSG vs SSR Diagram - app.eraser.io/workspace/CmsSg...
⌨️ (0:00:00) Intro
⌨️ (0:00:35) What We'll Cover
⌨️ (0:01:23) Creating an Astro Project
⌨️ (0:06:23) Astro Overview (components, file based routing, css, and more)
⌨️ (0:13:23) Astro Setup in VS Code
⌨️ (0:16:23) Setting Up Tailwind
⌨️ (0:18:23) Updating the Site Layout
⌨️ (0:27:23) Working with Markdown and Content Collections
⌨️ (0:34:23) Querying and Displaying Blog Posts Using Content Collections
⌨️ (0:40:23) Creating Dynamic Routes For Individual Blog Posts
⌨️ (0:46:38) Tailwind Typography Plugin
⌨️ (0:47:53) Optimizing Images
⌨️ (0:52:43) Using the ViewTransitions API
⌨️ (0:54:03) Adding Support for MDX
⌨️ (0:56:23) Deploy to Netlify and Vercel
⌨️ (0:59:23) Enabling SSR in Astro
⌨️ (1:08:53) Astro Server Endpoints
⌨️ (1:12:23) Deploying SSR to Netlify and Vercel
⌨️ (1:16:23) Wrap Up
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news