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: astrocourse.dev/
💻 Code: github.com/jamesqquick/astro-...
Astro Docs - docs.astro.build/
SSG vs SSR Diagram - 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
👾 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@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!

[@gameboyv1790]

Awesome tutorial. Thanks!

[@talkdatrue]

What browser are you using?

[@user-hr2ju8pm9n]

No hard feelings buddy but IMHO 11ty rules

[@adriablancafort]

Thank you very much! I LOVE astro, use it in a lot of my projects and in my opinion it's going to become something big. Your videos covering astro are awesome and very necessary in my opinion.

[@JamesQQuick]

@@talkdatrueThis is the Arc Browser. It's pretty neat!

[@anony88]

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

[@ankushkuchankar55]

😂😂😂😂😂

[@redgeburns7635]

😅😅😂😂😂

[@alexanderkomanov4151]

😂😂😂😂😂😂😂

[@addytechie6948]

😂😂😂😂

[@JamesQQuick]

lmaooo spot on!

[@mayurbhirud7998]

Most revolutionary framework ever❤

[@iga1720]

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

[@calebefant]

Oh yeah, I have problems with getting stuck on it as well.

[@ichiroutakashima4503]

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

[@iGhostr]

Are they even comparable?

[@JamesQQuick]

Let me know if there are any questions about the full course I can answer for you!

[@JamesQQuick]

Moreso than you might think :)@@iGhostr

[@iGhostr]

@@JamesQQuick cool, I thought Astro is just for static site creation with very fast performance

[@BearDigitalStudios]

Love James he's such a good instructor

[@freecodecamp]

Agreed.

[@JamesQQuick]

Thank you so much!

[@scigama71]

Agreed

[@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...

[@yvonvieville]

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

[@kinkyolga9668]

Love Astro!!!!

[@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?

[@alexanderkomanov4151]

Thanks!!!

[@bdbikepagla8962]

😂😢😮😅😊

[@grotsunfull]

Nice!

[@richardbray]

Yess James 🔥🔥🔥

[@JamesQQuick]

YEAHHHH!!

[@alwayssomewhere716]

great tutorial, where do I get the API key

[@SametSamyeli]

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

[@brandonzane519]

That was a Quick course

[@freecodecamp]

🤣

[@JamesQQuick]

nicely done! 🤣

[@philip9677]

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

[@MrJfergs]

Is this still applicable to Astro 4.0?

[@vedadtr3509]

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

[@dhanushm444]

மகிழ்ச்சி ❤❤❤

[@waifucodes]

i would love a remix crash course

[@BobbyBundlez]

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

[@doriomer]

Following the tut import 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 }, })

[@MichaelAlhilly]

Great tutorial! Thanks!

[@tresero2862]

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.

[@Feenskee]

Astro's beautiful

[@druzlee1]

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?

[@shrdn2960]

Same, didn't look into it yet though. You found out why?

[@soumadip_skyy_banerjee]

💖

[@prabhakaran5083]

❤❤❤

[@matheusestevao9870]

wich browser is he using?

[@foupax]

Thanks to upgrade to V4.

[@tnypxl]

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

[@davordebrecin3999]

You can, but then you’re just better off with some other framework if you’re building a SaaS, since you’re not concerned about quick loading of content.

[@tnypxl]

@@davordebrecin3999 I didn't know SaaS apps were absolved from caring about quick loading content. Why wouldn't I want everything to load fast in a SaaS?

[@BobbyBundlez]

its for statically generated websites. not dynamic ones that web apps almost always use its like gatsby. Ssg (static site generator)

[@abhikbanerjee3719]

"Dwight Schrute" at @28:22? IDENTITY THEFT IS NOT A JOKE JAMES!!

[@JamesQQuick]

lmaooo sorry!!

[@jay__762]

Hey is having a degree is necessary to get a web developer job 😢

[@santoshmore2953]

Nope

[@cslearn3044]

Naw, doubt anyone cares, but it can help. In the end all it matters is skill, not matter what coding field

[@perezident14]

A degree will make your initial job hunt easier, but 100% possible to get a job without one.

[@ZeyadMohamed-xs9ew]

It depends on where you are from.

[@jay__762]

@@ZeyadMohamed-xs9ew 🇮🇳

[@Ramzankhan-ql4nt]

Hi ,very good i need course of searched clients Mean clients hunting crash course for every purpose with extremely deeply techniques and things which you know and even have made anyone this course tell me. Thanks ❤❤❤

[@nurbolatsansyzbay9998]

another new javascript framework

[@JamesQQuick]

Too many right? lol

[@chadjones4255]

I wish there was a non-typescript version of this course. I'm not a fan of typescript.

[@fullpreteristnow]

Don't include Typescript and either keep your styles as they were in the original setup or import then all from one file. Other than that, you don't need to really know anything different.

[@f.t.5859]

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

[@nomad100hd]

The Astro ext is broken

[@henriqueamaral4017]

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.

[@sotecluxan4221]

Oooo....

[@isaacmandell-seaver7223]

Jacksflims

[@amanjotsingh001]

how can i use a bootstrap theme i bought with astro?

[@oosmanbeekawoo]

Haha! “No views”

[@nickdhrones6425]

I'm a noob with respect to Web-Dev. I was loving Astro and this content until Tailwind was applied. Lost me! If that's what the course is about, I'm out!

[@MrBrady95]

In my opinion, you need to indicate that it is a 'crash course' for intermediate-advanced level programmers. For me it was another huge waste of time and I realized this at about @38:00 minutes into the video. Normally I'd say, 'thanks for offering the free content' but times are evolving. I'm actually recognizing that I'm spending pretty much all of my time, simply "parroting" what an instructor does in their code editor. Respectfully, but unapologetically giving this a thumbs down.

[@keemkorn]

Im sorry but I can’t trust anyone that pronounced favicon like that……..

[@BobbyBundlez]

I pronounce is favicon. not like faveicon (favorite)... can't find timestamp for this lol so which way does he say it?

[@piyusharyaprakash4365]

What browser is he using ?

[@JamesQQuick]

This is the Arc browser