Astro makes websites faster & easier to build

There’s been a lot of hype around Astro in the frontend community, and with good reason! It has a fantastic dev-experience, ships zero-JS by default, and maybe what I love the most about it, it super easy to get started with!
It’s incredibly powerful and you can do some amazing things with it, but unlike some other solutions out there, you don’t need to get knee-deep into all of that before you can start using it. It feels like a very natural progression from vanilla HTML, CSS, and JS, and you can start slow and slowly level up your game with it over time.
In this one, I’m looking more at some of the simple things that you can do to work faster (and hopefully show you how easy it is to do!), rather than a look at starting a project from zero, but if you’d like to see a project where we build it starting from scratch, please do let me now 🙂.
🔗 Links
✅ The video where I made this with HTML & CSS:
✅ Astro’s site: astro.build/
✅ Astro’s documentation: docs.astro.build/en/getting-s...
✅ Astro extension for VS Code: marketplace.visualstudio.com/...
⌚ Timestamps
00:00 - Introduction
00:32 - A quick look at the benefits of Astro
02:15 - Adding my CSS through an import
03:12 - Creating a component with scoped CSS
07:50 - Creating components that use props
12:05 - Creating content from markdown files
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

I've had a few people ask, and no, this isn't an ad, I just really like Astro a lot and thought I'd share it with you. If ever I do a sponsored video, it'll be marked as one and I will also mention it during the video... but I also don't do sponsored content anymore. Most I'll do is maybe have an affiliate link if the service has one, and it's a product I actively use and believe is good.

[@codokit]

It looks like ad because other opinions are cleaned from comments.

[@joachimd9586]

Hey Kevin, just wanted to let you know that I seriously appreciate all the effort you've put into making these videos. Sending warm greetings from Denmark! 💗

[@NECOdes]

@@codokit weird logic. Also, they're just buried under new comments, nothing's cleaned.

[@codokit]

@@NECOdes Thanks for letting me know. Dont know about this behavior.

[@KevinPowell]

​@@codokit I never remove any comments from my videos, with maybe a rare exception of something that's offensive, which luckily doesn't happen often at all. If a comment doesn't show up, it's been filtered by YT automatically.

[@Morrile1]

What I like about this video is Kevin has gone into more detail with examples (the only way I can learn) and would love to see building a multiple website using templates and more components.

[@andrewrea2799]

I’d be interested in more videos re building with Astro. I’m particularly interested in how I could use data files like Jason or csv and how I would handle multiple image files for responsiveness and performance and using a cdn. Hooking it all up to a CMS would be cool too.

[@zalodias]

Nice to see you jumping into a framework. I really appreciate you keeping it vanilla & simple in most videos, but a component-based environment with props is a must-have for web dev. Astro looks very lightweight, which is great!

[@Issvor]

Holy crap I didn't realize that Astro did this! I started with React and all but don't really take advantage of a lot of it, so I usually just use it to make components and scoped styling. Turns out Astro is right up my alley:)

[@arielspalter7425]

By far the clearest and well paced tutorial of Astro. Subscribed!

[@cedrictheveneau9141]

As someone who started working with React 3 months ago, it now feels way easier to understand, while watching the video I was like « Okay, this makes sense because in React… » Sometimes, looking at someone coding really helps getting the hang of a concept, plus you’re a wonderful teacher Kevin, thank you for your hard work !

[@cindrmon]

i have grown so much interest in SSGs (especially Hugo, since I used it the most), and by far, this seems like one of the best SSGs I have ever found! Thanks for the wonderful introduction, and I think I wanna try astro right now

[@elhaambasheerch7058]

You explain complex javascript topics so well, looking forward to more framework tutorials in the future!

[@diesieben07]

I love Astro! It has transformed how I work on websites, nice to see you looking at it! One thing I want add though: At about 6:40 you talk about just using element selectors in your components and how Astro keeps the specificity low using :where. This has actually bit me in the past, because the order of CSS from different components is not really guaranteed. So you might have your global ul styles overwrite your local component styles, which can be really nasty to debug. That's why I stick to using classes within my components still.

[@juanferrer5885]

I like it so match that you're talking about Astro, please make more videos about it! Great content as always!

[@avidworkslol]

I used Astro once and instantly fell in love. Its simplicity is such a breath of fresh air compared to the other frameworks out there.

[@xorbite]

Kinda nice to see what the possibilities are using Astro. Thanks a lot for the great explanation! As always, very clear and easy to understand :D

[@iohn8688]

This has been great to help me understand Astro better, look forward to hopefully seeing more videos on it in the future, thanks.

[@artu-hnrq]

I've never saw Astro in depth before. It was nice to know it from your clean and calm explanation... Thankz

[@radvilardian740]

so glad you introduce this astro man, I am gonna use it to create my personal project's documentation.

[@maurosquare1243]

Super easy and simple for who's (like me) don't know react/vue. Seems very easy to understand and use.

[@shayanzamani9907]

Event though I know some Vue, Astro is still a better choice for some kinds of websites (like the one I mentioned in another comment); specially performance-wise.

[@ko-Daegu]

@@shayanzamani9907 can i make a webapp like a chatapp with astro ? is it recommended or go with sveltkit

[@shayanzamani9907]

Thanks for this cool video. I had heard about Astro here and there, but never had the time to go check it out to see the problems it solves for myself. Actually, I need to refactor my old, personal website using almost vanilla everything and bring in some new features, but TBH, I was concerned about the performance since it needed lots of JS-related stuff, from multilingual features to components; And this video right here, opened the door to a way better solution for all that. :)

[@TytusDubel]

i think I'd learn really well Astro if you'd be The Teacher. Seriously, you got a wonderful talent to explain things, easily..you make them look so obvious. Thank You Kevin.

[@spencerkeene]

I love this! I wanted something with reusable components that was easy to update for my personal website. This solution is much more lightweight than React and is insanely easy to update! The ability to add markdown so effortlessly is pretty cool as well.

[@kieranbarker1902]

Great video! I've been meaning to look at Astro for a while and this was a really nice intro. ✨

[@antontsvil245]

This is so cool. Im learning React a few weeks and seeing how everything related and linked with Js actually so useful!

[@ocratest]

Brilliant! This is a nice toe dip into the very overwhelming world of frameworks.

[@ember2081]

Love to see you making a vid on Astro, thought it'd be in your ballpark, not too divorced from plain HTML

[@KevinPowell]

Yeah, feels like a really nice natural progression instead of a steep learning curve, which I really appreciate :D

[@EamonnCottrell]

Scoped styling = very cool! Thanks for this quick overview 👍👍

[@and_rotate69]

Bro makes 22min feel like 5min, i totally enjoyed the video, same goes for ur other videos.

[@arabiccola]

It must be mentioned that ASTRO competes in the "meta framework" space, which is basically a framework on top of another framework (or library) such as React/Vue/Svelte. Thank you for bringing your excellent teaching skills outside of Vanilla HTML/CSS

[@pebcak]

Great intro tutorial. I'm excited to start working with Astro.

[@oguching8379]

I like 11ty but as simple as it is, it can take some learning to get set up. These days most people know React or Vue, what Astro does well is go a step beyond 11ty and allow you use patterns you are already used to in React or Vue. I really like it. It feels like less to learn, like I already know how to use it. Thanks for the quick overview.

[@borbelyviktor3057]

Very good content. Keep going! I just started with Astro and as an experienced developer I like its concepts.

[@nielslytzdk]

Astro is a fantastic tool, I fell in love with it right away 🙂. I would love a video about content collections, as I seem to struggle getting it to work.

[@maptastik]

Thank you for exploring Astro with plain old HTML/CSS/JS. Web dev is a small part of my job, but I do enough that something like Astro could be useful. I don’t think that would have been as clear to me if you’d used, for example, React or Svelte.

[@denizorsel1029]

I like the initiative eventhough the projects I am involved in requires much more complexity yet for simple things I will give it a try.

[@Anth-ony]

MOARRRRRRR! This was great and I'd love more videos using Astro starting from scratch with examples of different types of templates we could use.

[@jadinethomas8935]

Damn those *MD files are amazing. I feel like they would be so easy to import/export. Knowing a bit of view js definitely made it easier.

[@mucookul]

Thank You, this is actually what I needed to know about astro and you actually explained Props in a way I could understand.

[@_Saike]

Kevin! you made my design life just a little bit less frustrated. Thank you for simple explanation.

[@danatronics9039]

Oh this is awesome. I had previously been using Express + EJS for this, but this looks like a good modern alternative.

[@maddsua]

Before even watching the video, I want to point out that Astro is awesome! Been using it in productions for the last 2 months and I can't be more happy about it!

[@NECOdes]

Been hearing about it so much lately, but I was hesitant to use it because I'm still improving my vanilla js/css and html skill. But this looks nothing like other frameworks, and not much different from the vanilla. Passing parameters between components kinda reminds me of Ejs, I like it, I may try Astro for my next side project. Thank you for this video.

[@lmd4881]

fantastic, Astro is so cool :) would love to see a full project as a paid course and perhaps bring in some cool animations and how you do those in astro? would be nice :)

[@cseymour97]

I come from the world of wordpress and advanced custom fields. A lot of process and structure felt very familiar and I absolutely love astro! If at any point a client want something light and static it's my go-to!

[@cryptoboy1461]

Astro is one of my favorite frameworks. Simple and easy to use. Love your videos👍👍

[@thesearcher4892]

Thanks for the awesome tutorial. If you would do more tutorials about Astro, that would be just amazing. For example, it would be interesting how to integrate a headless CMS like Directus into Astro. PS: I love your channel :)

[@chrizzzly_hh]

Great beginner tutorial for Astro! One thing: the drawback using the components with md like you did in your example is that you haven't shown a way to actually sort those entries by date - which is mostly always the use case for blogs or - like in your example - job positions. It would be great to show of how to use templating properly with astro to achieve this with MD files (otherwise you would need to rename every file which would make it way more complex than the traditional way :) )

[@MsRobynM]

Great video! And yes, I'd like to see some more content on Astro.

[@JoeTower]

Thank you for the video, Kevin! I would love to see more Astro videos from you. You explain things so well! I've started using Astro and love it, as well. One challenge I've found is: responsive images. Specifically, out-of-the-box responsive images. I'm always looking for a modern replacement to use for a Jekyll site, however, that replacement needs a responsive image setup that supports markdown use along with page-based use (.astro files, .mdx, etc). Anyway, do you have recommendations around creating a solid responsive image setup in Astro? I know Cloudinary is an option, but I'd prefer local asset image optimization and re-sizing.

[@brentjackson6966]

Hi Kevin, Like yourself, lean towards writing vanilla HTML, CSS and JS. I'm generally dubious about frameworks and libraries. They take time and effort to learn, and then they add technical debt to a project - anyone coming to the project (even if it's yourself 6 months down the track) has to understand the framework and what it's doing to the code or they'll mess up what you've done. That said, you have sold me. Astro looks light enough and useful enough that it definitely merits further investigation. Thank you!

[@briankgarland]

Astro is great. In one week I learned how to use it then re-created on of our company's web sites as a proof of concept (used Contentful api to pull in product data). Awesome.

[@AMoktar]

Awesome 👏, thanks bro. Pretty straight forward ❤

[@nagymihaly8072]

Thank you for this! Could you (or have you) done a video about front-end frameworks, comparing them and which one should you use as a beginner?

[@chrishanthacosta4093]

Best astro intro!

[@Niksorus]

Great intro to Astro! I've moved to it for my portfolio website, and I keep using too much React 🤣 The Astro components look better, but it's so great I can bring so much old code over.

[@Action2me]

Instantly liked this video the second you mentioned Svelte

[@JimKernix]

Definitely more videos on Astro!

[@Tausif_Khan_07]

We loved it we need more Astro content

[@kollinmurphy]

I've been using Astro since it became stable. It's amazing!

[@Dafty23]

Wow, what an amazing video, thank you sir!

[@EmericOwczarz]

OMG ! Just the content i was hoping you'd do someday ❤ It's been quite some time i'm using Astro now, and i'm loving it. A pleasure to see it featured here so many people can discover and make things with this great tool

[@brentgreeff1115]

This was amazing - I would love to see more. - I have used React, Vue but I really dont think they compare to my bread-and-butter - which is Rails. - Astro reminds me of web-components. - For content that should not change after deploy - this seems like a perfect choice. How about a contact-us page video, with Email provider integration, or anything where you are requesting data from or posting data to an API.

[@paulorodriguez6288]

man i really do love Astro, thank you for making a tutorial about it,

[@deeprelaxgarden]

Thank you for the awesome tutorial! What is the best way to make responsive layouts on Astro? media query on each components? It can be confusing when you have many small components to reuse them later... ?

[@bobmarteal]

Great as usual. Would be interested in a short on points you might have for using Eleventy vs. Astro.

[@KevinPowell]

I love both. I just think Astro is easier to get started with, since you don't also need to learn a new templating language.

[@danieljayne8623]

Well, I'm sold!

[@drucifer6]

Great video Kevin. Astro hopefully will shift the mindset of devs that over-engineer the most basic of projects.

[@Tez_Tickle]

this comes at the exact right time for me.

[@vipe2383]

Was a really good video, could be cool to see more videos with technologies that you use like css framework (if you use one) or stuff like that

[@KevinPowell]

I don't use any frameworks, thankfully, but I also primarily work on my own projects these days, so I get to decide 😂

[@DanteMishima]

Whoop whoop ! My current site is built with Astro!

[@websitewalaofficial]

love it sir. big fan of yours

[@genaroibc]

Astro is pure love ❤

[@prodbybarn]

Big fan, always an inspiration

[@CMB696]

Just blown my mind 🤯

[@markuslanggeng]

Super awesome, I can't wait to try astro

[@herrlindner]

🎉 YES! Let's dig into Astro!

[@EugeneKoshelev]

Astro is pretty cool! Thanks!

[@dream_sounds]

Hi Kevin, amazing content. Thank you. Can you please make a full Astro video with fetching data from the API etc.

[@kirawesh]

Amazing. Reminds me of Hubspot language. Thank you for introducing ASTRO. I would like to know how it solves all the accessibility needs.

[@rickdeckard8002]

You're the man Kevin!

[@uniqueux]

I've been using Astro to build my site and while I'm struggling I feel like it's a good step in my front end dev/UX career

[@blokche_dev]

I'm in love with Astro!

[@hiroyukinumaguchi1984]

Great!

[@Allformyequine]

Ooooooh Luv this Astro is SO cool!

[@wooviee]

This is a lot like Vue, but even easier. That's great!

[@netssrmrz]

Great video! Saves me having to read the Astro docs. Regarding Astro, not my cup of tea. Am happy with vanilla Web Components, JSON, and JavaScript. Didn't feel the savings on the keyboard justify the ugly generated code and additional project dependency.

[@mhl_5]

tyvm i love your content

[@sebastian5100630]

Please more video like this!

[@phucnguyen0110]

I actually use Astro to learn and build scratch HTML + CSS sites, and even SASS/SCSS lol - it's just so convenient!

[@roswel47]

This exactly i'm looking for my personal project.

[@s1ckb0y100]

Cool stuff, thank you! What‘s the difference to something like Hugo in your opinion?

[@ThomasProsserZurich]

I managed to publish the front of my wordpress site with it and since it loads all the content, it is blazingly fast. If you like, some alpine JS can help you manage state but there is no overhead! Only thin is that when I publish content, I need to rebuild but I guess that can also go into a wordpress hook somewhere. Add git to the mix and you can basically make a lightweight CI/CD system for your site that deploys in lightning speed

[@mefesto_]

Nice to see using some frontend tools! Could you maybe show some good cases for Tailwind CSS? Where is this good where not? I saw some videos about Tailwind but my brain is blows up when I see so much classes on html tags 😄

[@CaliburPANDAs]

Kevin, please do more Astro content. Show how to use astro islands. please make video to build Blog website with CMS. thank u 🙏

[@le_wuerzingeer]

finite!!! more Astro videos, please

[@disaster_dog]

I really struggled getting the content out of markdown files. Glad to see it's not as straight-forward as the frontmatter bits!

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

[@nove1398]

Astro is pretty decent and not much indirection, i will definitely give it a try

[@bradleyandrews2444]

i really did learn alot of new things everthing in this video is new to me

[@DenisEneotescu]

This is the peak of tutorials.

[@lukas_berger]

The first part (with the components) looks a lot like how Pug (formerly known as Jade) works, just without the nicer syntax :P

[@wazzadev7209]

I'll definitely have fun with Astro