Just a note that if you get syntax CSS errors when copying and pasting the CSS, you can remove those by getting a PostCSS syntax extension. Because I'm using some more modern CSS (or future CSS) features, without a PostCSS extension it will show you errors (even though following the tutorial instructions will still make the CSS actually work). I’m definitely regretting this choice and should have just stuck with a more simple solution so it wasn't confusing. Thanks for those who have mentioned this!
Astro’s awesome! Each has its place. Since it isn’t full stack, it still leaves some spots the others fill. But each has its own magic. Glad Astro is one of those!
Hi guys, if any of you are having problems with the tutorial there are a couple outdated things: 1. For the Icons to work you need to include the integration on the astro.config.mjs (also you need to install the iconify icon packs using npm) 2. @astrojs/image is now deprecated and Sharp is now the default image service. Also some things like the fit property and aspectRatio are now not supported. If you want to use images now you need to use "import { Image } from 'astro:assets';"
thanks for the amazing tutorial. In lesson 7, when we console.log frontmatter we get the url also. Can we use the title or other slug as url, instead of file name?
Working through this tutorial, getting errors on Lesson 5, and becoming more familiar with Astro prompted me to scoot back to WP. I have looked at static site generators for quite some time- but for regular content websites, nothing beats WP, sure its "slower" (throw an extra $100 a month at hosting- all issues go away) but Astro introduces a level of complexity that is complex for complexity sake vs a straight flat-file CMS like grav or the way better Publii. It took me quite a while to make a form and landing page for an old site in Astro on Netlify. It introduced WAY more complexity than a static html page with some CSS for styling, and formspree. Now I have to keep the code updated because I had to build it Visual basic studio and get all these npm's to make it work with Netlify. I couldn't add the JS code for statcounter on the Netlify side because of Astro. It's just shit. My old form/landing needed NONE of this and had analytics injected into it on the Netlify side. Why learn this stuff when it's so much more complex than a static site with fewer integrations and no upside? A basic site needs analytics, robots.txt, XML sitemap, schema/meta, a blog, and some pages, header/footer, and it's a total pain in the ass in Astro- all with zero flashy flash or wow factor. To create a site with the same functionality I had in '97? MS frontpage was the bomb. A $20 WP theme is more exciting and animated, and I can schedule posts. If the whole point of having a website is just to get eyeballs, then why fuss with Astro?
Thanks for the great tutorial! Just wanna ask, at 45:00, I'm not sure if you deliberately put Footer.astro in the components folder to make a point about components. Isn't it better to put the Footer.astro in components folder as MainFooter.astro in layouts folder? I believe the same goes for Nav.astro? Noobie here trying to learn best practices, not trying to shit on your hardwork.
Yeah, I'd probably put those in the layouts folder now. Either is totally fine; just depends how you'd want to organize it. Thanks for the question! Glad you've enjoyed the course so far!
Completed!! Thank you so much. I plan to use tailwindui templates and integrate them to astro. I'm still searching for the ultimate stack. I know that Astro + TW + Markdown is at the core of what I'm looking for. Thank you very much ♥
Wonderful! So glad it was such a help. If you haven't checked out my content collections video, that's a great improvement that came out in 2.0. ruclips.net/video/zUmqmuSvJMs/видео.html (I even update this site with content collections)
Thank you for your Astro videos! Very helpful! This particular course/tutorial seems out of date now as I cannot get the Icons to work. Can you please tell me if the full course you are offerinbg will be on version 4 or 3? thanks!
lol well, I'm actively learning TS, but I figured if I included it, I'd be teaching two things at the same time and I was trying to stick with Astro. Plus, my poor TS skills would almost certainly land me in jail…
Yes, you'd just obviously use those packages in the react files. Remember to use a client: directive so the React component is interactive when needed.
I'm just switching my system to dark/light mode using a tool called Raycast. It's a macOS keyboard launcher (a replacement for Spotlight). I set the “toggle to dark/light mode” option to a keyboard shortcut so I can quickly jump back and forth. Hope that helps! :)
Yes! It’s all still relevant and up to date. And if you want to use content collections for the project, my content collections video updates this project to use content collections in about 20 minutes.
I have never used NextJS to build anything really production-grade, so I'm not sure I'm the best person to address this? But generally speaking, since Next is full-stack and Astro isn't, that would be my divide. I'd use Astro whenever possible and Next for things that I know will be full stack.
Thanks a lot! Amazing tutorial. But I have a question: Is there any CSS property that maintains equal height for cards? I can change "align-items" to "stretch" instead of "start," but it stretches the content too, changing the internal alignment within the card.
So start with what you’ve done and then internally set the align-content on the card to start. This is from memory on how the project is set up, but I think that’ll get you in the right spot. Not sure you’re gonna like that look but let me know :) So glad you enjoyed the tut!
Hi, thank you so much for this course, I'm doing it from astro 2.5.6 and is working fine so far. I just wanted to ask you one thing that i've looking for in so many astro tutorials and I still don't have figure it out. How can we put an active class in one page, but without JS in the client side ? Is something we can do easily in static pages without SSGs, but of course it's very laborious to make a site without a SSG. Anyway this course is working great for my websites, so again thank you for doing this.
So glad it was a help! I'm not sure I understand your question. What do you mean by "put an active class in one page"? What would you like to put the active class on?
@@CodinginPublic Sorry I didn't explain myself clear. I mean like you did in lesson five with de JS putting the aria-current="page", but instead putting like a class="active" or even the aria-current="page" but without using JS in the client side. Doing a static website manually without using a SSG you can do that, you have to copy the nav in each html file and cut the class="active" from one link to paste it in another link. I hope that's more clear 🙂 Thanks
@@josucode5048 You can see an example in this project, basically you have to compare the "href" of the link with "Astro.url.pathname": 34L-34LA3%ortsa.vaNF2%stnenopmocF2%crs=elif?oiloftrop/selpmaxe/tsetal/eert/ortsa/ortsahtiw/buhtig/moc.ztilbkcats//:sptth You have to reverse the characters in the link because I'm afraid posting the real link will hide my comment, sorry about that.
The course was brilliant, thank you very much! I was wondering... has anyone tried to add a Search Bar to the template, integrating it in a nice way with the pagination? Any ideas where to start from?
So glad you enjoyed the course! I did do a search tutorial for Astro that would get you a good deal of the way there: ruclips.net/p/PLoqZcxvpWzzdlyJMZOGB5aYt8ImxzRxYs
Didn’t use one on this project. Just kept it to md files to keep things simple. But there are some great tuts on Sanity and Astro by Jayden Urwin (sp?).
A question, @@CodinginPublic. I'm workin on a new Astro + MongoDB project. When I npm run dev Vite doesn't resolve my .env vars, as in "import.meta.env.URI" You ever get this?
The link in the description should contain everything you need. Just make sure you go to the lesson-4 branch and grab the code for either the POSTCSS one or the plain old CSS one :)
@Coding in Public so I install luge and import that luge on Astro file, the I use luge module to make animation. I Followed step from luge documentation. But when I build or run Astro js, it's always fail and I got messages like this "@waaark/luge doesn't appear to be written in CJS, but als doesn 't appear to be a valid ES module (i.e. it doesn't ave "type": "module" or an .mjs extension for the entry p int). Please contact the package author to fix.".
I get [postcss] Cannot read properties of undefined (reading 'nodes') and it points to global.css. Without understanding how postcss works, I now have to figure out what's going wrong. I agree with others, that PostCSS provides some headaches, as I need to focus on that instead of the Astro tutorial :) But apart from that it's a great tutorial.
I'd love to see something where Astro is being styled with something like Pico CSS. Astro is already fantastic for small side projects, whereas Tailwind is a beast for large-scale development. Thus Pico CSS is more "in line" with Astro, IMHO.
Hello, in lesson 4 I felt a little discouraged seeing you set up postcss. I had indeed heard about it but now I feel I need to find a postcss tutorial to keep up. Couldn't you just have sticked with vanilla css instead of complexifying the project? What do I do now?, do I watch a youtube tutorial on postcss and then come back here or what? Anyway, of course I'm gonna be watching a postCSS tutorial now! what gives?! XDD
Hey, Alex! Sorry that was a frustration! It's such a common workflow, I thought it would be helpful to show how to setup, but I certainly didn't want to make the project more complex. The good news is, after this lesson, we don't touch CSS again (because I wanted to keep the course CSS-free), so you shouldn't actually need to understand postcss to get things up and running and continue with the tutorial. If you do want a quick overview of postcss before you finish the Astro course, here's a brief overview of why it's helpful and how to set it up: ruclips.net/video/nx8XgnJNvec/видео.html
If you do look at the CSS file I've had you copy in, postcss basically enables just two core things in the file: custom media query statements and native CSS nesting. Then it adds some autoprefixers for older/other browsers on build. So the code itself is all standard vanilla CSS aside from those two things (the media query statements and nesting). Anyhow, hope that helps explain my thinking. I'll keep that in mind for other tutorials.
@@CodinginPublic some added feedback. So far the tutorial has been flowing great. But, yeah, hit the css section, paste in the content from github and have 85 errors pop up unexpectedly in VScode. Start browsing through the file and see the ampersands. Then, I'm like, "Wait, I thought he said we were using vanilla css." Threw a wrench in everything while I started trying to figure out if I was missing something. While I learned that native CSS nesting is coming, I also learned it isn't really supported yet. Just something that came out of left field with no warning. Would have been no problem with a little heads up in advance. But, being told "just CSS" and then running up against new features with limited support that take config (which isn't discussed until after the fact), certainly threw a wrench into things and caused confusion. Everything else though, has been top notch so far.
@@patricksmith8262 Thanks, Patrick. Yeah, like I mentioned up above (and I think on some other comments on the #4 video), I do wish I would have set it up differently. When I originally designed the site, I was going to have people write CSS with me for each component, but it quickly became a CSS course. That being said, I'd already spent probably 5-6 hours developing it with CSS (using PostCSS since it's such a popular addition for many) and didn't want to take the time to reverse it. I'd forgotten that if you don't have a PostCSS syntax extension it gives you visible errors (even though if you’re running the PostCSS plugin I walk you through in the series, it shouldn't actually cause any real errors). I figured because you'd never touch the file again, it wouldn't be a problem, but those errors have thrown a lot of people and I didn't think about my syntax extension until after I'd recorded. So yeah-sorry for the bad experience. Hopefully the rest of the series makes up for it. Thanks again for the feedback! It's been a good learning lesson for me :)
Bro, thank you so much for the full video on the course. Great Job. Only one sad reservation. Why no one ever talks about deploying to VPS Servers using CPanel? Many of us beginners have bought our own VPS servers to host our customers who are small-medium enterprises. Netlify is free in some respects but change a bomb when we want to extend the configuration. Can you add a video on this? We, many of us, will be eternally grateful.
Hey, you’re welcome! Yeah-I think probably the most time people don’t talk about setting up servers is it costs money to purchase server space just to show someone how to do it. For me personally, with the several sites I have hosted all over, I don't have ANY currently running on paid servers (that aren't just clients paying for servers). The updating experience is so much cleaner through modern hosting solutions, too, and I have yet to need more than what they offer. If I ran bigger sites (like it sounds you do) and had a server, I would have certainly considered it. For most servers I do end up using for small clients, I just SSH into them and uploaded the built files Astro gives me in the finalized dist folder. So there's not too much to show I guess? But if I get some server space sometime, I'm happy to consider doing a video on it. I'm wondering if there are things like that? It shouldn't much matter what the framework is; if it's static, it should work the same way.
@@CodinginPublic Thank you for the update. Unfortunately, its not the developers having own servers, its their clients who have these servers. I heard the same being said for nuxt3 but the problem is setting up Nodejs for these apps. We would like to just upload the build into a folder in the server and just execute using URL. But, every time we do that we get this errors like it is unable to locate the .js and .css files.
@@truthteachers Yeah, that definitely makes sense. I will say, if you’re having particular problems with Astro, the Discord community is amazing. There are MUCH smarter people than me in there who will almost always get you an answer to nearly any question you have (no matter how specific) within a few hours. They're awesome!
![The Complete Frontend Developer Roadmap [2024]](http://i.ytimg.com/vi/Tef1e9FiSR0/mqdefault.jpg)
Just a note that if you get syntax CSS errors when copying and pasting the CSS, you can remove those by getting a PostCSS syntax extension. Because I'm using some more modern CSS (or future CSS) features, without a PostCSS extension it will show you errors (even though following the tutorial instructions will still make the CSS actually work). I’m definitely regretting this choice and should have just stuck with a more simple solution so it wasn't confusing. Thanks for those who have mentioned this!
I've worked with angular, react, Vue, svelte, next, nuxt e kitemmurt but nothing feels as powerful as astro.
Astro’s awesome! Each has its place. Since it isn’t full stack, it still leaves some spots the others fill. But each has its own magic. Glad Astro is one of those!
this is so well taught. the channel deserves much more recognition.. 💯
Thank you, my friend.
This channel is kinda fire, thank you RUclips algorithm!
Lol 🔥 Glad you enjoy it!
This course is well delivered by you and it seems you put a lot of effort into it.
Thank you so much, I learned a lot 🙏
Glad it was helpful! Thanks for saying something!
Thank you for the course, I'm learning about Astro, and your tutorials are very helpful.
Thank man just completed this course.
Thanks for sharing knowledge for free this channel and you are very underrated.
Glad you enjoyed it 😄
Hi guys, if any of you are having problems with the tutorial there are a couple outdated things:
1. For the Icons to work you need to include the integration on the astro.config.mjs (also you need to install the iconify icon packs using npm)
2. @astrojs/image is now deprecated and Sharp is now the default image service. Also some things like the fit property and aspectRatio are now not supported. If you want to use images now you need to use "import { Image } from 'astro:assets';"
Ah I was having problems with these two things.. You saved me, thank you!!
thanks for the amazing tutorial.
In lesson 7, when we console.log frontmatter we get the url also. Can we use the title or other slug as url, instead of file name?
You can with the new content collections!
Man, I already commented, but this is just a beatiful framework. And you are just awesome as a teacher.
Hey, that's so kind! So glad you enjoyed the course!
Working through this tutorial, getting errors on Lesson 5, and becoming more familiar with Astro prompted me to scoot back to WP. I have looked at static site generators for quite some time- but for regular content websites, nothing beats WP, sure its "slower" (throw an extra $100 a month at hosting- all issues go away) but Astro introduces a level of complexity that is complex for complexity sake vs a straight flat-file CMS like grav or the way better Publii. It took me quite a while to make a form and landing page for an old site in Astro on Netlify. It introduced WAY more complexity than a static html page with some CSS for styling, and formspree. Now I have to keep the code updated because I had to build it Visual basic studio and get all these npm's to make it work with Netlify. I couldn't add the JS code for statcounter on the Netlify side because of Astro. It's just shit. My old form/landing needed NONE of this and had analytics injected into it on the Netlify side.
Why learn this stuff when it's so much more complex than a static site with fewer integrations and no upside? A basic site needs analytics, robots.txt, XML sitemap, schema/meta, a blog, and some pages, header/footer, and it's a total pain in the ass in Astro- all with zero flashy flash or wow factor. To create a site with the same functionality I had in '97? MS frontpage was the bomb.
A $20 WP theme is more exciting and animated, and I can schedule posts. If the whole point of having a website is just to get eyeballs, then why fuss with Astro?
Seriously one of the best courses I've taken, thank you so much for putting this together!
So glad it was such a help! Thanks for taking the time to say something!
Your teaching style is one the best its so informative, Thx for tutorial.
You're very welcome! Glad it was a help!
Thanks for the great tutorial! Just wanna ask, at 45:00, I'm not sure if you deliberately put Footer.astro in the components folder to make a point about components.
Isn't it better to put the Footer.astro in components folder as MainFooter.astro in layouts folder? I believe the same goes for Nav.astro?
Noobie here trying to learn best practices, not trying to shit on your hardwork.
Yeah, I'd probably put those in the layouts folder now. Either is totally fine; just depends how you'd want to organize it. Thanks for the question! Glad you've enjoyed the course so far!
I liked the video before watching it because, I already know it's gonna be good! 😊
Haha! Thank you!
Completed!! Thank you so much. I plan to use tailwindui templates and integrate them to astro. I'm still searching for the ultimate stack.
I know that Astro + TW + Markdown is at the core of what I'm looking for.
Thank you very much ♥
Wonderful! So glad it was such a help. If you haven't checked out my content collections video, that's a great improvement that came out in 2.0. ruclips.net/video/zUmqmuSvJMs/видео.html (I even update this site with content collections)
this great man, I will learn this, and I want to add headless cms like Strapi or supabase to manage my blog content, thanks man
Awesome! Let me know how it goes!
Very good series!
I modified the blog sites to use a content collection after I found out they exist.
So glad to hear! Yes! Did a video right after this series showing how to convert it to content collections. Super powerful feature!
Thank you for your Astro videos! Very helpful! This particular course/tutorial seems out of date now as I cannot get the Icons to work. Can you please tell me if the full course you are offerinbg will be on version 4 or 3? thanks!
I'm stuck on the same section. Can't get a resolution. Keeps throwing an undefined error
Really helpful tutorial. Thank you :)
Glad it was helpful!
Very chaotic rhythm, but unfortunately there are too few people talking about astro
Sorry you'd didn't enjoy the pacing, but I'm totally with you when it comes to Astro! I think it'll be a big year for Astro in 2024!
I couldn't able to install dependancie it's showing error idk why
Hmm. Do you have node installed?
Awesome. Can you make a tutorial about adding search functionality to astro blog?
I've got plans to do that :)
@@CodinginPublic thanks . I am waiting for this tutorial ❤❤
Hopefully in the next month or so :)
Looking forward to the Spring 2024 additional content...
This is awesome, thank you!
You're very welcome!
The code doesn't seem to be in the GitHub repo linked?
Check the branches!
Prefect tut for Astro. Thank you very much.
So glad you enjoyed it!
Thanks, nice introduction to Astro land. Someone should put you in jail because you skipped using typescript (js without typescript is horrible)
lol well, I'm actively learning TS, but I figured if I included it, I'd be teaching two things at the same time and I was trying to stick with Astro. Plus, my poor TS skills would almost certainly land me in jail…
Just a simple question can i use react packages in astro like react dnd and react-query?
Yes, you'd just obviously use those packages in the react files. Remember to use a client: directive so the React component is interactive when needed.
@@CodinginPublic thank you for the clarification good job on the course!
Thank you my dear for this video. ❤
My pleasure 😊
Absolutely fantastic series, great content, I really learned a lot and appreciate how in depth and yet how easy it was to follow. Thank you 🙏
You're so welcome, my friend. Thanks so much for the kind words!
great tutor
So glad you enjoyed it!
At 3:24:37 you do something in the browser "changing to dark mode". But it is done so quick, that I can't see how you do that.
I'm just switching my system to dark/light mode using a tool called Raycast. It's a macOS keyboard launcher (a replacement for Spotlight). I set the “toggle to dark/light mode” option to a keyboard shortcut so I can quickly jump back and forth. Hope that helps! :)
Have the astro a Routing
Could you rephrase your question? I’m not sure I understand.
I haven't started watching this tutorial yet so my apologies. But is this tutorial still usable with Astro 2.0 release?
Yes! It’s all still relevant and up to date. And if you want to use content collections for the project, my content collections video updates this project to use content collections in about 20 minutes.
I've never heard about astro. That styling feature to import lang it's just awesome.
Astro is 🚀
can u compare next js and astro i want to switch to astro and what are the Disadvantages of using astro
I have never used NextJS to build anything really production-grade, so I'm not sure I'm the best person to address this? But generally speaking, since Next is full-stack and Astro isn't, that would be my divide. I'd use Astro whenever possible and Next for things that I know will be full stack.
Is there a way to connect a CMS to Astro so whenever I create a new post Astro automatically regenerate pages?
With SSR! The docs are really helpful here!
Thanks a lot! Amazing tutorial. But I have a question: Is there any CSS property that maintains equal height for cards? I can change "align-items" to "stretch" instead of "start," but it stretches the content too, changing the internal alignment within the card.
So start with what you’ve done and then internally set the align-content on the card to start. This is from memory on how the project is set up, but I think that’ll get you in the right spot. Not sure you’re gonna like that look but let me know :) So glad you enjoyed the tut!
@@CodinginPublic Thank you!!
RUclips's algorithm is loving your channel 👀
🙏
Hi, thank you so much for this course, I'm doing it from astro 2.5.6 and is working fine so far.
I just wanted to ask you one thing that i've looking for in so many astro tutorials and I still don't have figure it out.
How can we put an active class in one page, but without JS in the client side ?
Is something we can do easily in static pages without SSGs, but of course it's very laborious to make a site without a SSG.
Anyway this course is working great for my websites, so again thank you for doing this.
So glad it was a help! I'm not sure I understand your question. What do you mean by "put an active class in one page"? What would you like to put the active class on?
@@CodinginPublic Sorry I didn't explain myself clear. I mean like you did in lesson five with de JS putting the aria-current="page", but instead putting like a class="active" or even the aria-current="page" but without using JS in the client side.
Doing a static website manually without using a SSG you can do that, you have to copy the nav in each html file and cut the class="active" from one link to paste it in another link.
I hope that's more clear 🙂
Thanks
@@josucode5048 You can see an example in this project, basically you have to compare the "href" of the link with "Astro.url.pathname":
34L-34LA3%ortsa.vaNF2%stnenopmocF2%crs=elif?oiloftrop/selpmaxe/tsetal/eert/ortsa/ortsahtiw/buhtig/moc.ztilbkcats//:sptth
You have to reverse the characters in the link because I'm afraid posting the real link will hide my comment, sorry about that.
The course was brilliant, thank you very much! I was wondering... has anyone tried to add a Search Bar to the template, integrating it in a nice way with the pagination? Any ideas where to start from?
So glad you enjoyed the course! I did do a search tutorial for Astro that would get you a good deal of the way there: ruclips.net/p/PLoqZcxvpWzzdlyJMZOGB5aYt8ImxzRxYs
@@CodinginPublicThanks again then! ;-) I will look into it... and by the way.. I also joined the waiting list for your course! ;-)
@@CodinginPublicthanks a lot! I watched the video and it was very easy to integrate it into your template.
What CMS did you use for this project?
Didn’t use one on this project. Just kept it to md files to keep things simple. But there are some great tuts on Sanity and Astro by Jayden Urwin (sp?).
Am enjoying your tutorial, tx.
Do you have any preferences as to CMSs that would pair well w Astro? tx.
Glad you found it helpful! I haven’t done much with CMSs, but heard good things about Contentful with Astro.
Tx,@@CodinginPublic.
A question, @@CodinginPublic. I'm workin on a new Astro + MongoDB project.
When I npm run dev Vite doesn't resolve my .env vars, as in "import.meta.env.URI"
You ever get this?
I'd look into Astros env stuff. If you want those .envs available in client-side logic, you have to prefix them with PUBLIC_ @@ijimmoore
From where did u paste those css codes in lesson 4?
The link in the description should contain everything you need. Just make sure you go to the lesson-4 branch and grab the code for either the POSTCSS one or the plain old CSS one :)
Very informative, thank you so much
You're very welcome!
Hi, how to install and integrate npm app outside astro integration. I install and always error "doesn't appear to be written bla bla..."
Hmm…I'm not sure I understand. Do you mind explaining a little more of the trouble you’re running into?
@Coding in Public so I install luge and import that luge on Astro file, the I use luge module to make animation. I Followed step from luge documentation. But when I build or run Astro js, it's always fail and I got messages like this "@waaark/luge doesn't appear to be written in CJS, but als
doesn 't appear to be a valid ES module (i.e. it doesn't
ave "type": "module" or an .mjs extension for the entry p
int). Please contact the package author to fix.".
I want to make an animation component with Luge library. I still confuse to solve this problem. 😕
Dude really cool video! Keep goin!
Thanks so much, my friend. Glad you enjoyed it!
smooth explanation, thank you for this great material. interesting framework indeed.
Glad you enjoyed it!
@@CodinginPublic it was a great encouragement for me. because I am about to finish building my blog with astro.
@@khalidben9940 🙌
what terminal you use?
and how the autocomplete work?
Warp :) And in VSCode, I use Fig.io; autocomplete is awesome!
@@CodinginPublic thanks man
This might be the best Astro course on the internet. ❤❤
Thanks, my friend. Glad you found it so helpful!
I get [postcss] Cannot read properties of undefined (reading 'nodes') and it points to global.css. Without understanding how postcss works, I now have to figure out what's going wrong. I agree with others, that PostCSS provides some headaches, as I need to focus on that instead of the Astro tutorial :) But apart from that it's a great tutorial.
I got the same issue. :D The error is in the box-shadow variables ---shadow-sm, --shadow-lg etc,.
Sorry for the trouble. I've added a plain CSS file in the repo for Lesson 4 that doesn't require postcss for those having trouble with the setup.
Sorry for the trouble. I've added a plain CSS file in the repo for Lesson 4 that doesn't require postcss for those having trouble with the setup.
@@CodinginPublic Perfect it worked. Much appreciated!
🙌
clean and clear , best astro tutorial
So glad you enjoyed it!
This course was great! Thank you!
You're very welcome! Thanks for saying something!
❤🙏@@CodinginPublic
Great!
🙌
All of them.... As one!
One video to rule them all!!!
@@CodinginPublic And in Astro bind them
Lol deep quote
I'd love to see something where Astro is being styled with something like Pico CSS. Astro is already fantastic for small side projects, whereas Tailwind is a beast for large-scale development. Thus Pico CSS is more "in line" with Astro, IMHO.
Haven’t used Pico before. I’ll check it out! My general preference is vanilla CSS, but not opposed to finding a place for frameworks.
Subscribed! Your channel is going to grow up fast :)
Thanks for the sub!
Hello, in lesson 4 I felt a little discouraged seeing you set up postcss. I had indeed heard about it but now I feel I need to find a postcss tutorial to keep up.
Couldn't you just have sticked with vanilla css instead of complexifying the project? What do I do now?, do I watch a youtube tutorial on postcss and then come back here or what?
Anyway, of course I'm gonna be watching a postCSS tutorial now! what gives?! XDD
Hey, Alex! Sorry that was a frustration! It's such a common workflow, I thought it would be helpful to show how to setup, but I certainly didn't want to make the project more complex. The good news is, after this lesson, we don't touch CSS again (because I wanted to keep the course CSS-free), so you shouldn't actually need to understand postcss to get things up and running and continue with the tutorial.
If you do want a quick overview of postcss before you finish the Astro course, here's a brief overview of why it's helpful and how to set it up: ruclips.net/video/nx8XgnJNvec/видео.html
If you do look at the CSS file I've had you copy in, postcss basically enables just two core things in the file: custom media query statements and native CSS nesting. Then it adds some autoprefixers for older/other browsers on build. So the code itself is all standard vanilla CSS aside from those two things (the media query statements and nesting). Anyhow, hope that helps explain my thinking. I'll keep that in mind for other tutorials.
@@CodinginPublic some added feedback.
So far the tutorial has been flowing great. But, yeah, hit the css section, paste in the content from github and have 85 errors pop up unexpectedly in VScode. Start browsing through the file and see the ampersands. Then, I'm like, "Wait, I thought he said we were using vanilla css." Threw a wrench in everything while I started trying to figure out if I was missing something. While I learned that native CSS nesting is coming, I also learned it isn't really supported yet.
Just something that came out of left field with no warning. Would have been no problem with a little heads up in advance. But, being told "just CSS" and then running up against new features with limited support that take config (which isn't discussed until after the fact), certainly threw a wrench into things and caused confusion.
Everything else though, has been top notch so far.
@@patricksmith8262 Thanks, Patrick. Yeah, like I mentioned up above (and I think on some other comments on the #4 video), I do wish I would have set it up differently. When I originally designed the site, I was going to have people write CSS with me for each component, but it quickly became a CSS course. That being said, I'd already spent probably 5-6 hours developing it with CSS (using PostCSS since it's such a popular addition for many) and didn't want to take the time to reverse it. I'd forgotten that if you don't have a PostCSS syntax extension it gives you visible errors (even though if you’re running the PostCSS plugin I walk you through in the series, it shouldn't actually cause any real errors). I figured because you'd never touch the file again, it wouldn't be a problem, but those errors have thrown a lot of people and I didn't think about my syntax extension until after I'd recorded. So yeah-sorry for the bad experience. Hopefully the rest of the series makes up for it. Thanks again for the feedback! It's been a good learning lesson for me :)
Bro, thank you so much for the full video on the course. Great Job. Only one sad reservation. Why no one ever talks about deploying to VPS Servers using CPanel? Many of us beginners have bought our own VPS servers to host our customers who are small-medium enterprises. Netlify is free in some respects but change a bomb when we want to extend the configuration. Can you add a video on this? We, many of us, will be eternally grateful.
Hey, you’re welcome! Yeah-I think probably the most time people don’t talk about setting up servers is it costs money to purchase server space just to show someone how to do it. For me personally, with the several sites I have hosted all over, I don't have ANY currently running on paid servers (that aren't just clients paying for servers). The updating experience is so much cleaner through modern hosting solutions, too, and I have yet to need more than what they offer. If I ran bigger sites (like it sounds you do) and had a server, I would have certainly considered it. For most servers I do end up using for small clients, I just SSH into them and uploaded the built files Astro gives me in the finalized dist folder. So there's not too much to show I guess? But if I get some server space sometime, I'm happy to consider doing a video on it. I'm wondering if there are things like that? It shouldn't much matter what the framework is; if it's static, it should work the same way.
@@CodinginPublic Thank you for the update. Unfortunately, its not the developers having own servers, its their clients who have these servers. I heard the same being said for nuxt3 but the problem is setting up Nodejs for these apps. We would like to just upload the build into a folder in the server and just execute using URL. But, every time we do that we get this errors like it is unable to locate the .js and .css files.
@@truthteachers Yeah, that definitely makes sense. I will say, if you’re having particular problems with Astro, the Discord community is amazing. There are MUCH smarter people than me in there who will almost always get you an answer to nearly any question you have (no matter how specific) within a few hours. They're awesome!