Astro 3.0 Crash Course (View Transitions, Image, Content Collections, and More!)

Astro 3.0 is HERE! Here's what you'll learn
- Astro components and page based routing
- installing and working with Tailwind
- Content Collections with Markdown and MDX
- dynamic routes
- image optimization
Astro 3.0 Blog Post - astro.build/blog/astro-3/
Learn Astro 3.0 - astrocourse.dev/
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
*STAY IN TOUCH 👋*
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
00:00 - Intro
00:30 - Introduction to Astro
02:10 - Creating a New Astro Project and Code Overview
09:00 - What You'll Build
11:00 - Setting Up Tailwind
12:00 - Astro Components (Layout, Header, and Footer)
17:00 - Page Based Routing
18:00 - View Transitions
20:30 - Content Collections
24:30 - Querying and Displaying Content
27:30 - Image Optimization
31:00 - Get Static Paths for Dynamic Routes
36:00 - Tailwind Typography Plugin
37:40 - Working with MDX
40:00 - Recap and Wrapup

[@codewithguillaume]

I stop everything I am doing now - and start this course. Thanks James!

Awesome content here, thanks James Q Quick, you did good thing clearing up my mind on what to use on my current test project - Astro it is!

[@mrnzdev]

Great Course, thanks James.

[@attracdev]

Nice work! I've been wanting to play around with Astro for a while now.

[@theMrM_]

Great video, the content still applies as is for astro 4.0. I followed your instructions with no issues. Great explanation!

[@FlorianBinder]

Great tutorial! Astro shows nice exceptions! :-) Great dev expirience

[@sabuein]

Thank you, James.

[@juanferrer5885]

Great idea to go with ts and tw, great video!

[@JesusContrerasG]

I´m a NextJS fan but you make me see Astro as a great great choice, thanks for sharing

[@jochenr9885]

Hey James, this helped me tremendously to get going with astro! Thx!

[@JamesQQuick]

So glad to hear that!

[@AndreasWalter1984]

Svelte Yes sir! 🙋‍♂️

[@naranyala_dev]

huge thanks

[@alanrutter3273]

Another excellent tutorial James and Astro looks really good. Can Astro support a micro-frontend methodology or Module Federation?

[@hari9321]

Nice tutorial James

[@JamesQQuick]

Thank you! Hope you're enjoying Astro :)

[@twd2]

That was really quick, to launch a crash course for V3, big thanks for your efforts, and I do not really like TS😅,Svelte yes !!!

[@user-bn5eb9um4x]

When Astro home page was updated on the same day as 3.0 released, I tested it's 100/100 PageSpeed score!

[@alwaysgrowww]

I have this question. How to configure astro to pull posts dynamically instead of storing the content in webapp and this will lead pushing the website everytime we write a new post. In that case, how content collection will work?

[@user-xu7jz4li7e]

you will need to buy the full course for that 😂

[@sajithar99]

you'll need a CMS integration for that. Astro does support a number of them

[@Goyo_MGC]

Astro could be for me the next big framework. Compared to other solution such a Qwik, the adoption of astro is really easy whatever your previous prefered language might be !

[@kirso]

Svelte yes!

[@shamscorner]

svelte yes 🙌

[@jaymartinez311]

yes typescript 😊

[@ceralguy85]

Great crash course James, very well explain about the new features on this 3.0 release. Quality content as usual

[@brancode404]

When are you releasing your Astro Course?

[@julianbustos3079]

So would these image optimizations work with images that are hosted somewhere else?

[@aldoyh]

I am totally PHP!

[@aventyrskonsulterna]

Great video! Would love to see the Svelte-stuff!

[@LawrenceDCodes.]

Oh snap you did *THE OFFICIAL* course! Nice work James 💪💪💪

[@quickfixportal]

you are amazing

[@JamesQQuick]

Thank you!

[@stylrart]

Sveltekit yes!

[@Yesar1]

Will you make a small project video on Astro with Svelte framework? It will be helpful for me and also for those who're interested in astro.

[@MrKeliv]

I knew astro is good for SEO. But.... I have confuse between using gofiber html + HTMX or using astro+gofiber (API) Do you have suggestion what best solution for an e-commerce website ? Thanks

[@Nevalkar_]

Hi James, when would the course be released? I am in the waiting list excitedly awaiting 😅

[@demetrycode]

according to his site it is this summer so just two weeks left therefore

[@Nevalkar_]

@@demetrycode you mean two long weeks! 😅

[@demetrycode]

@@Nevalkar_ true 😆

[@johns2551]

What is the terminal plugin that you recommend? I cannot find it without knowing the spelling. Thanks.

[@JamesQQuick]

Fig.io Go check it out :)

[@slackstation]

svelte yes

[@anthillca3665]

SVELTE YES!!!!!!!!!!!!!!!!!

[@MetalRoast]

Typescript for the win

[@JamesQQuick]

Yeahhh!!

[@TheCbrands]

Svelte Yes

[@AdamMietlicki]

Svelte yes

[@ManuelChagoyan]

Regarding Typescript. Not sure yet. Would’ve been nice to see the crash course without dependencies of having to know Typescript, Tailwind, etc. It allows beginners to focus on one technology at a time. Some people just want to learn Astro.

[@JamesQQuick]

Fair enough. That's great feedback!

[@stln768]

My head is spinning. Any thought on how this compares to Remix?

[@thefoamingbrain2469]

remix, astro, next, vue... ugh to much

[@chintanudani5631]

Being an typesafe language TS gives edge over js

[@yogyyconst]

how to shorter path when changes file? my terminal showing full path C:/..

[@stevasc]

What theme is this? I love it!

[@ramimhossainantor3747]

did you find it?

[@stevasc]

no : / ..... could you tell me?@@ramimhossainantor3747

[@ondrejhavazik4124]

any luck with theme? I'd like know theme name as well. Thx

[@ramimhossainantor3747]

@@ondrejhavazik4124 James Q Quick theme

[@stevasc]

@@ondrejhavazik4124 noo = /

[@abhijeetmeshram3762]

I want to deploy site to sub folder. does astro support that ?

[@JamesQQuick]

I'm not sure what you mean. can you help clarify that?

[@abhijeetmeshram3762]

@@JamesQQuick I want to site run on temporarily sub folders like ://Hostname/test/version1 Is there any configuration available ?

[@philip9677]

how do i create the page for the category, im getting a 404 when i click the category link in the post

[@raj080288]

where is the repo link for the code?

[@adeonirkohl]

Yes, TypeScript please

[@husidev]

I prefer coding instead of wasting my time making typescript happy.

[@ramabie8557]

astro supabase?

[@MikeNugget]

At first glance content data flow looks pretty messy.

[@PabloGaraguso]

No Typescript, thank you.

[@JamesQQuick]

You prefer to not use typescript?

[@PabloGaraguso]

@@JamesQQuick exactly. Loose typing is a strength when used properly. Other than that, "warning" you about types should be part of code assist/intellisense in either case. With that out of the way, why add another layer on top? Typescript is hands holding for those coming from other languages, but it limits you greatly in using JS to its potential.

[@nomad100hd]

This tutorial is impossible to follow. I get "TypeError: posts.map is not a function"

[@IanZamojc]

Good video, but saying "way too many javascript frameworks" at the start is a really negative take. We're spoiled for choice; that's a good problem to have. They all do different things too; Astro (static site generator) and Vue (reactive MVVM) are basically unrelated in terms of their use cases. The only downside is having to do some research when deciding which is the best fit, which is a lot better than having to compromise on fewer options.

[@mvargasmoran]

I hate typescript.

[@JamesQQuick]

Fun times. Prefere regular JavaScript?

[@arberstudio]

did u just delete my comment? wow, open mindedness not a thing here?

[@JamesQQuick]

Don't think I've deleted any comments here. What did you say?

[@existentialquest1509]

No you should not - Astro is not fit for purpose - i repeat it’s not UNTIL it stops asking you to turn off Content Security Policies that prevent javascript eval - i love the framework feature but it will create a security vulnerability - James should point out the trade offs that Astro requires you to implement - I have 24 years as CTO , Chief Architect etc and i am telling you these frameworks are taking us back to PHP days -or reinventing the wheel

[@metinemiroglu1936]

Could you share where did you get this information?

[@kurwacherry]

had to stop after you chose typescript :(

[@matttech3911]

Why? He barely used it in this tutorial and it really isn't that hard

[@JamesQQuick]

Anything I could do to help with that?

[@prograshed]

svelte yes

[@calebredus6948]

Svelte yes