Тёмный

Astro Crash Course 

Traversy Media
Подписаться 2,3 млн
Просмотров 157 тыс.
50% 1

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 250   
@astrodotbuild
@astrodotbuild 2 года назад
We made it!!! 🥳🥳🥳🥳 What an amazing video, first class as always, Thank you Brad, From Astro with 💚
@Arabian_Abomination
@Arabian_Abomination 2 года назад
You just got the best endorsement ever 💯 congrats
@PenguinCrayon269
@PenguinCrayon269 2 года назад
Senpai notices
@TraversyMedia
@TraversyMedia 2 года назад
Thanks so much! And great job!
@ahmad-murery
@ahmad-murery 2 года назад
I really don't use any static website generator, but this was a different story, Well done Astro and Brad 👍
@harvirreturn
@harvirreturn 2 года назад
Make a laravel admin panel management system video , can use packages like filament. Thank you!
@AlfredAyache
@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!
@Av1234100
@Av1234100 11 месяцев назад
Your answer saved me a lot of time. Thanks a lot!
@CodeCrafterChannel
@CodeCrafterChannel 11 месяцев назад
I spent 3 hours on this. Lol. Next time, I'll definitely look into the comments first
@Breslima
@Breslima 9 месяцев назад
To add the images to the "Showcase" section
@kenirwin5538
@kenirwin5538 3 месяца назад
Thank you so much!
@fabiorodrigo3638
@fabiorodrigo3638 Год назад
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).
@aaa-my5xy
@aaa-my5xy Год назад
kinda like tailwind, we run away from inline styles for decades until people realize that if you tweak how inline styles work just slightly they're really good.
@XPLoXe
@XPLoXe Год назад
@@aaa-my5xy I still hate CSS though.
@TraversyMedia
@TraversyMedia 2 года назад
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!
@infomax807
@infomax807 2 года назад
Brad, github link is not working
@TheAdel136
@TheAdel136 2 года назад
hope that one day i will meet you in person and i'll say thanks face to face :)
@AzraiHasan
@AzraiHasan 2 года назад
been waiting for this video....!!!! Thanks, Brad..!!!
@EddyVinck
@EddyVinck 2 года назад
90+ minutes of free content, you’re a legend Brad 👏
@Thomasfrank
@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.
@suhaylmuminov3825
@suhaylmuminov3825 Год назад
Wow Thomas, didn't know you're into webdev
@JEsterCW
@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.
@male3399
@male3399 2 года назад
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
@davidbriggs8109
@davidbriggs8109 2 года назад
it shocked me also lol
@bookable7157
@bookable7157 Год назад
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.
@husnulaman
@husnulaman 2 года назад
Just today I was thinking of revamping my portfolio. This is exactly what I needed. Thank you Brad ❤
@TechBuddy_
@TechBuddy_ 2 года назад
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
@NiagaraThistle
@NiagaraThistle 2 года назад
I use Sublime for the same...there's at least 3 of us!
@ceralguy85
@ceralguy85 Год назад
Awesome tutorial with Astro Brad. This technology is very light as powerful for static html. Amazing video as always
@732brudder
@732brudder 2 года назад
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.
@truthteachers
@truthteachers 2 года назад
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.
@ontheruntonowhere
@ontheruntonowhere Год назад
Great advice. Works perfectly, ty!
@codehorror8076
@codehorror8076 Год назад
You don't need the !, so you don't need to do that. Just type: html and it will auto suggest 3 options. Hit the HTML5 one. The same when creating a tag div.card for example. Or am I missing something?
@nro337
@nro337 2 года назад
Incredible tutorial as always, thanks so much Brad!
@piwi7212
@piwi7212 2 года назад
A real Master gives a little "Masterclass". Thank you Brad. Greetings from Hamburg Germany
@patricksmith8262
@patricksmith8262 2 года назад
Perfect timing! Was planning to start playing with @astro for a new personal project.
@kubakazimierczak6646
@kubakazimierczak6646 Год назад
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
@heguer87
@heguer87 Год назад
Thanks Brad, you keep us up to date!!
@girornsveinsson7970
@girornsveinsson7970 2 года назад
I would love to see a full course from you about Astro development - I will buy it in a heartbeat!
@code_with_sheynet
@code_with_sheynet 2 года назад
Weldone Brad, I just love, thanks for all your have done for me
@dontmindme4009
@dontmindme4009 2 года назад
Damn Astro is awesome. I like how simple it is
@robhafemeister3100
@robhafemeister3100 8 месяцев назад
Awesome stuff like always, thanks much Brad
@rian438
@rian438 2 года назад
Woah! What A nice timing, I am about to gather learning resources about this and suddenly your video notification appear on my screen, What a nice timing.
@XPLoXe
@XPLoXe Год назад
Thank you so much for this amazing video. It's a 10/10 material.
@Mynameisdidi1997
@Mynameisdidi1997 2 года назад
Thanks Brad! Hope Astro gets some more attention to generate even more contributions.
@TraversyMedia
@TraversyMedia 2 года назад
Same here. I think people just think "great, another framework". But it is so simple and such a great modern way to create static sites
@WebDevEducation
@WebDevEducation 2 года назад
LOVE THIS ❤ thank you for another awesome tutorial! ⚡
@Allformyequine
@Allformyequine 2 года назад
So GREAT Brad and Astro YAY!! Thank you so nicely done!! Just luv this and can't wait to try Astro :)
@CyanidePierce90
@CyanidePierce90 Год назад
Brilliant course thanks Brad. Would there be the possibility of you doing a followup tutorial of adding to it with a NetlifyCMS (or similar) so we can add pages and blog posts that way?
@petipois28
@petipois28 2 года назад
Awesome tutorial - really love your teaching style. Thank you for creating such amazing content.
@johncarlosarmiento2666
@johncarlosarmiento2666 2 года назад
Thank you so much! It never cease to amaze me providing useful content!
@druharper
@druharper 2 года назад
Excellent work. Cannot thank you enough. I’m excited to get started 🙂
@gbrachetta
@gbrachetta 2 года назад
To get emmet working on .astro files (or any, really) just add "emmet.includeLanguages": {"astro": "html"} to your settings.json.
@youdjparents
@youdjparents Год назад
thank you for this course Brad! Request - a tutorial on ArchieML + Astro/Sveltekit? Or some kind of markdown that is more robust with a framework? A lot of editorial people use aml and it can be confusing to get set up
@smibssmibs
@smibssmibs Год назад
Top class tutorial. Definitely worth the time. You provide amazing service. Thanks.
@Dameworth
@Dameworth 2 года назад
Awesome tutorial thank you, I might have to try this out some more it's actually really nice for static sites
@riveralonzo
@riveralonzo Год назад
at around 26 minutes when the css is applied, my hello world did not center and it was driving me crazy. I watched step by step twice and reviewed the css, but I ended up just added a text-align: center style. Also, awesome tutorial. Excited to be learning this while I finish up school and go into a dev position next summer.
@Helix_22
@Helix_22 Год назад
in the style sheet, check for h1, h2 { text-align: center; } Make sure to place it above the @meda and .element tags, just place it right below the other style section for the h1/2 classes.
@-0-__-0-
@-0-__-0- Год назад
It gives me back the nostalgic feeling of writing jinja templates😅
@pedroserapio8075
@pedroserapio8075 2 года назад
Great video Brad. Cannot say the same about Astro, or in particular the plug-ins that become useless after Astro 1.0.0 went out. Staying with Gatsby for now.
@outpost31737
@outpost31737 Год назад
Agreed. Astro is pretty terrible.
@EricShans
@EricShans Год назад
Thanks as always. Planning on using this from now on!
@prodigymuj
@prodigymuj 2 года назад
Amazing tutorial Brad! Thank you for sharing this. I did want to point out that the Tabs component doesn't work on Safari but it does on Chrome.
@prodigymuj
@prodigymuj 2 года назад
I built the website and got it hosted on Netlify as well but it's the same result on Safari. The tabs don't work. Not sure what the issue is though
@ztcanada_1
@ztcanada_1 2 года назад
@@prodigymuj Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️
@trinkel8
@trinkel8 2 года назад
Excellent content Brad!
@syberiaok
@syberiaok Год назад
Best course ever, thank you so much!!!!
@johnnymags
@johnnymags Год назад
Great tutorial, thank you!
@harvirreturn
@harvirreturn 2 года назад
If possible please make a react front end for Laravel. This is a nice combination that is not seen often. Naturally, thank you for for all the videos you provide. They are immense help.
@motoboy6666
@motoboy6666 Год назад
Could Astro replace react in like most cases with only using built-in Astro components and such? (Not including/importing React)
@janzenfaidiban
@janzenfaidiban 2 года назад
Thank you Brad... You lessons really easy to follow.
@giovannicarosa8819
@giovannicarosa8819 Год назад
I was having trouble with my blog posts frontmatter not being read. I read through the Astro Docs and seen theirs was enclosed in “ “ and that is what I had to do to make it work. So it would be title: “Your title” and so on. You didn’t seem to have to do that on yours but it wouldn’t work for me till I went back and put everything in parentheses.
@JamalKhan-dq4nz
@JamalKhan-dq4nz 2 года назад
I can't express the way i want to thank you brad sir
@Karrnfr
@Karrnfr Год назад
Thank you for this tutorial Brad 👊🏾🙏🏽
@cabanford
@cabanford Год назад
Hey Brad - you should run lighthouse, at the end of your video, to show how your Astro site does...
@Helix_22
@Helix_22 Год назад
I really enjoyed this guide, and it is honestly making it painful to find and watch other Astro videos due to the lack of foresight. You've always seem to bring that into the guides. Do you have any more Astro projects or guides in the pipeline? I really do hope you make some more begginer friendly guides on Astro.
@davitgogidze4310
@davitgogidze4310 2 года назад
As always with high quality and relevant content 🎓 ⚡ 🔥
@user-he8qc4mr4i
@user-he8qc4mr4i Год назад
Another priceless jewel!
@blessdarah1256
@blessdarah1256 2 года назад
If Brad says he's impressed then know that's the way to go!
@ztcanada_1
@ztcanada_1 2 года назад
Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...
@jamesgrubb
@jamesgrubb Год назад
Fantastic tut as always. Thank you.
@-0-__-0-
@-0-__-0- Год назад
Finished the video my guy. Its up and hosted. Thank you so much 😉
@codehorror8076
@codehorror8076 Год назад
I didn't even know about copilot. I just installed it as I'm following along and damn this is amazing. Edit: Now I want to remove it because it's genuinely scaring me lol
@CodeLitDev
@CodeLitDev 2 года назад
A high quality content as always. 🔥
@rolf-s
@rolf-s Год назад
An Astro SSR-only video/tutorial would be cool! 👍(To see the possibilities)
@alittlegreyhair1104
@alittlegreyhair1104 2 года назад
Another great tutorial, thank you Brad
@lakshitsagar6299
@lakshitsagar6299 2 года назад
Dude, I didn't even knew that something this powerful also existed....It has so much to explore🔥🔥🔥🔥🔥🔥.....If astro is so useful then why it is not popular than react and other frameworks...??
@jaspreetmaan121
@jaspreetmaan121 2 года назад
we went from loading js with html to loading html with js to generate html with js and back to loading js in html. Now we will repeat this cycle again with web assembly and pyscript.
@PeterChapman-py
@PeterChapman-py Год назад
Thank you for this tutorial! Astro is pretty great!
@verticeva
@verticeva 4 месяца назад
Thanks a lot for the video, it is really good!!
@maskman4821
@maskman4821 Год назад
Awesome tutorial 😍
@cmnweb
@cmnweb 2 года назад
Ufff, estaba esperando esto, saludos desde México.
@it-s-me-mohit
@it-s-me-mohit 2 года назад
Awesome stuff Brad as always 😉😉. Apart from blogs what usecases can be there for Astro??
@owaraigeinin
@owaraigeinin 2 года назад
Just what I needed, thank you sir!
@Daaboo
@Daaboo Год назад
O M G why have i spent so much time trying to learn React when Astro make its 10x simpler!
@chronosceptor
@chronosceptor Год назад
thanks Brad this was fun
@Stowy
@Stowy Год назад
This was very clear, thanks a lot !
@MrBioneto
@MrBioneto Год назад
Thnaks Brad, it has been usefull. Astro looks amazing!
@kimbapslayer1995
@kimbapslayer1995 2 года назад
Looks fun. I find it so funny that I can't really stand the look of gigantic CSS files anymore ever since I started using tailwind lol
@paulehrig6414
@paulehrig6414 Год назад
Excellent video!!! Question/Issue: > when I run the 'npm run build' command > i don't get a useable dist directory > How do I get a directory like astro-website-theme on your githb ?>? Thanks ahead of time for your help!
@champorado2131
@champorado2131 Год назад
I hope you do an updated tutorial using ver 3.0
@wusswuzz5818
@wusswuzz5818 2 года назад
I think you can re-enable emmet in newer versions of vscode, but the new way is just to start typing "html" and a list of options will appear one of which is "html:5"
@JamesQQuick
@JamesQQuick 2 года назад
Amazing!!
@julianvelez6563
@julianvelez6563 2 года назад
Nice work bro
@ChristianKolbow
@ChristianKolbow 2 года назад
Good Job. 😊 @TraversyMedia There is no reason for Fragments in Astro. Only when you map an Array is Fragment recommended or needed.
@slandrei
@slandrei 2 года назад
You are the best!! Waiting to see more from you. Thanks! :)
@pastuh
@pastuh 2 года назад
Can we deploy in to Hostinger?
@ztcanada_1
@ztcanada_1 2 года назад
Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️
@SilvaOnTube
@SilvaOnTube 2 года назад
I love all of Brad's tutorials. They're awesome! At 26:45 here, I couldn't get the styles to take effect. "Hello World" remained on the left margin and did not center. I can't find what I missed.
@JavaScriptJolt
@JavaScriptJolt 2 года назад
I'm having the same problem. Did you find a fix to this?
@SilvaOnTube
@SilvaOnTube 2 года назад
@@JavaScriptJolt Not yet. I moved on to another tutorial. The problem is that the final repo is nothing like the process along the way. I have to start it all over again and go step by step. My plan is to create a github repo (private to start) and make tiny steps with commits at each step as something works. I'll come back and let you know what I find out.
@JavaScriptJolt
@JavaScriptJolt 2 года назад
@@SilvaOnTube Thanks for the update!
@SilvaOnTube
@SilvaOnTube 2 года назад
@@JavaScriptJolt I'm doing it all slowly and making commits at every code advance. The first thing I notice is that his server updates automatically. You can see the styling take effect immediately when he changes the name from style.css to global.css. I have to kill my server and restart it on almost every saved code change. And still, even with the right name for the css file, none of the styling is taking effect for me. Even if I copy the styles/global.css file from his repo it does not center the Hello World h1 element in the "Hello World". Is nobody else having this problem?
@JavaScriptJolt
@JavaScriptJolt 2 года назад
@@SilvaOnTube I did everything for the website. Everything worked for me but the global style sheet. I am going to troubleshoot it for a while; I will move on to another project if it does not work soon. I will let you know if I find a solution.
@lpanebr
@lpanebr Год назад
Great content, thank you! At 21:55 what's the advantage of setting the interface for the props? Sorry if you answer that later. I'll keep watching but just didn't want to forget.
@lpanebr
@lpanebr Год назад
Ah, one thing is to enable the optional/require validation on vs code.
@naveenbelandur7269
@naveenbelandur7269 2 года назад
Hi Brad I have been following your videos from past months as i am a newbie to web development i have a doubt , the crash course you have made on react express dom are they covered most part of the topics or only the main things or basic
@zoro9878
@zoro9878 2 года назад
Brad, you are awesome!
@ztcanada_1
@ztcanada_1 2 года назад
Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..
@bartez8018
@bartez8018 Год назад
When to use Astro files and when use React (or other framework) files?
@AHRienks
@AHRienks Год назад
Did anyone also experience this: unquoted excerpts do not work! But single- or double quoted does it! Strange - no one else seen that?
@PeterFelis
@PeterFelis 2 года назад
hai Brad, is Astro not like sveltekit? I see lot's of similaries. And, thanks for the video. You are a real good instructor.
@damagee8141
@damagee8141 2 года назад
Perfect timing!
@benacker8525
@benacker8525 2 года назад
Hey Brad, great video. You can disable postCSS extension for prettier formatting and autocomplete in css files. I had the same issue and it was driving me nuts
@galinahappy6919
@galinahappy6919 Год назад
Большое Вам спасибо 🙏
@diego0ji
@diego0ji 2 года назад
Thanks brad🖤
@devchabek8728
@devchabek8728 2 года назад
Thank you !
@kimbapslayer1995
@kimbapslayer1995 Год назад
I kinda wish tuts were just in JavaScript and not typescript. Let us do the typescript on our own!
@riccardoguitar
@riccardoguitar 2 года назад
A wonderful video again, always a first class content!! I'm wondering if there is a guide to use md files to dynamically fill html tags as you do in the video. I'm searching with a lot of key words but nothing comes up, do you have any suggestion to go deep on this topic? I'd like to see if it could be a nice solution for small personal sites, before to use a headless cms to fetch the data.
@rajeshag7884
@rajeshag7884 2 года назад
Thank you
@Zagoorland
@Zagoorland 2 года назад
Amazing! BTW which vs code theme do you use? :)
@ztcanada_1
@ztcanada_1 2 года назад
Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...
@denniszenanywhere
@denniszenanywhere Год назад
How do I make the blogging part dynamic? Where does the content live? Or is the markdown sufficient?😊
@cebuanoninoy
@cebuanoninoy Год назад
Astro feels like React. Is it made in React? There's some svelte there too with .
Далее
Astro Crash Course in 20 Minutes!
22:07
Просмотров 57 тыс.
Watermelon magic box! #shorts by Leisi Crazy
00:20
Просмотров 2,7 млн
Kenji's Sushi Shop Showdown - Brawl Stars Animation
01:55
А Вы за пластику?
00:31
Просмотров 12 тыс.
Astro makes websites faster & easier to build
22:55
Просмотров 121 тыс.
Node.js Crash Course
2:06:35
Просмотров 183 тыс.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
What is Astro?
9:57
Просмотров 8 тыс.
HTMX & Go with ThePrimeagen | Preview
15:58
Просмотров 154 тыс.
Master React JS in easy way
12:18
Просмотров 93 тыс.
Astro Quick Start Course | Build an SSR Blog
2:44:04
Просмотров 60 тыс.
Astro Explained
9:59
Просмотров 29 тыс.
Watermelon magic box! #shorts by Leisi Crazy
00:20
Просмотров 2,7 млн