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: https://astrocourse.dev/

💻 Code: https://github.com/jamesqquick/astro-course-demo

Astro Docs - https://docs.astro.build/
SSG vs SSR Diagram - https://app.eraser.io/workspac....e/CmsSg90ShrgnuACWRs

⌨️ (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: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news