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/workspace/CmsSg90ShrgnuACWRsPH?origin=share ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⌨️ (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