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