Astro Crash Course

Astro is an amazing static site generator that allows you to build really fast websites with little to no production JavaScript. You can use Astro components as we all have components from other frameworks such as React, Vue and Svelte.

TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.

💻 Github Repo:

⭐ All Courses

💖 Show Support

👇 Follow Traversy Media On Social Media:

Timestamps:
0:00 - Intro / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify

[astrodotbuild]

We made it!!! 🥳🥳🥳🥳
What an amazing video, first class as always,
Thank you Brad,
From Astro
with 💚

[fabiorodrigo]

Life is strange... We ran away from statics sites in the 2000`s, now we use the power of js to remove js to go back to static pages (and its very good).

[TraversyMedia]

One important thing I forgot to mention that you'll probably figure out anyway, is there is an Astro VS Code extension. You'll want to install that for syntax highlighting in Astro components. Hope you enjoy the course!

[AlfredAyache]

Caution: if you're following along with version 3.1.0 (or later) of Astro, about 30 minutes when you're doing the Header, the logo won't show up. You have to add `.src` to the logo variable being used in the `src` attribute of the `img` tag. My (very) little contribution. Thanks Brad!

[EddyVinck]

90+ minutes of free content, you’re a legend Brad 👏

[Thomasfrank]

Thanks so much for making this, and for including the API aside even though you weren't planning on using one for the content. I'm just learning Astro and this was extremely helpful.

[JEsterCW]

The most what I love about Astro is that it reminds me micro frontends, but in this case the "micro frontends" are the components. Idk but it feels amazing to me that you have the possibility to mix other technologies inside it. Micro frontends are smaller web apps in different frameworks/technologies made into one huge web app and thats why Astro reminds me micro frontends and i love it, overall the modern way of making stuff... you have separate components etc... its also lovely when you wanna to work with ur friend who works in different technology or stack or even maybe he doesnt likes some tools ure using, so u still can somehow cooperate together like each other in ur own stack and make it work, obviously it can be tricky, but this is the possibility and i love it.

[bookable]

Been following you for years. Great video as always. Thanks to the Astro team for creating this. Most small local businesses that I work with just want a static site, this really fits the bill.

[male]

What a coincidence, just a few seconds ago, I was wondering if Brad is going to do a crash course for Astro soon, and BOOOOM here's this video that shocks me right away

[husnulaman]

Just today I was thinking of revamping my portfolio. This is exactly what I needed. Thank you Brad ❤

[truthteachers]

Hi Brad, just add "astro' -> "HTML' under "include languages' in vscode built-in emmet extension. Seems to work. Also, need to install the Astro VS Code extension by Astro. Only then the syntax highlighting, file type identification and autocomplete will work.

[TechBuddy_]

I thought I am the only crazy kid using sublime text as a modern notepad replacement but now I see Mr. Traversy himself using it, I'm not that crazy after all. Love your work man. Thank you

[brudder]

Yes! Been waiting on my favorite youtubers to post about this framework that I've been using for a few months now. Going to love diving into what you say about it.

[kubakazimierczak]

18:16 - another way (instead of opening sublime) is to open new tab in vs code and select HTML as the language, then the Emmet will work

[ceralguy]

Awesome tutorial with Astro Brad. This technology is very light as powerful for static html. Amazing video as always

[patricksmith]

Perfect timing! Was planning to start playing with @astro for a new personal project.

[piwi]

A real Master gives a little "Masterclass". Thank you Brad. Greetings from Hamburg Germany

[christopheanfry]

We’re enjoying thanks. One thing regarding the emmet for the “!” to generate automatically html template. You can start typing html and you select html:5 it generates the same template as the “!”.

[girornsveinsson]

I would love to see a full course from you about Astro development - I will buy it in a heartbeat!

[nro]

Incredible tutorial as always, thanks so much Brad!