Learn to use Astro in this beginner's tutorial. Astro is an allinone web framework for building fast, contentfocused 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...

Astro Docs https://docs.astro.build/
SSG vs SSR Diagram https://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
jediorsith
南宮千影
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