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

⌨️ (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

--

[JamesQQuick]

Hope you all enjoy Astro as much as I do 🥰 It's such a powerful framework, and I think it's only going to get better and better!

[anony]

Employers right now are already typing "Experience Required: Astro - 6 years"

[iga]

Thank you, was stuck with unprofessionally written code for months and struggled with reading the documentation. The video made everything clear. Works perfectly.

[ichiroutakashima]

This is a good introduction. Might purchase the full course some time soon. I really feel like Astro is the better NextJS.

[Art-yk]

Love James he's such a good instructor

[doriomer]

Following the tut import <Image /> component ended with an ERROR :
error: Cannot find module 'astro:assets'
After pulling my hair i've finaly found solution that works for me:

1. Open file 'astro.config.mjs'
2. Add to experimental Object assets: true
3. export default defineConfig ( {
integrations: [tailwind()],
experimental: {
viewTransitions: true,
assets: true
},
})

[henriqueamaral]

40:22 It doesn't work that way, because PostList component should not be inside a "map". But you still did pretend that it worked.

[nielslytzdk]

Very nice tutorial, you do a super job and thanks for that! I don't have the "download directory" option in Github, do you have to pay for that feature to be enabled?

[druzlee]

in my case when i deploy in minute @1:14:46 i have a problem with the image not found what type of problem should be?

[f.t.]

This crash course looks like a storm of confusion and doubts.

[Tronki]

@jamesQQuick really nice video, but i want your terminal intelisense how did you set that up

[yvonvieville]

a really interesting video ! You're a great instructor, thanks

[philip]

my tailwind is not loading i followed the instrucitons in the setup but it still doesnt load, no errors when i run npm run dev or in console. the classes are ofcourse in the html but no styling

[tresero]

Maybe something changed in V4, but 'CollectionEntry' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. is an error I get.

Also, Images isn't working.

Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received ./images/Truss down.jpg.

[memaimu]

I've never seen a presentation go so beginner-friendly to "all right we're just going to copy and paste everything and I will summarize some lines in a sentence or two... yeahp, that should do it." Gotta buy that full course...

[vedadtr]

Where can we find the Header code you paste ? Github only provides the completed result

[SametSamyeli]

Where are you copying the codes from? Can you put a link? (Components/Header - H1 etc.)

[MrJfergs]

Is this still applicable to Astro 4.0?

[BobbyBundlez]

for the creating dynamic routes i thought you could do something like [...slug].astro no?

[tnypxl]

Can it not do traditional web applications? Can someone explain why its NOT good for web app development?