Create a blog with a headless CMS // Full 3-hour course // Astro + Wix Studio

[@WarrenGroom]

Just freaking awesome. I've played with headless a few times, but this is by far the most useful resource. The most valuable 3 hours of KZbin I've watched in a very long time.

[@johnjobling3692]

Looking forward to this because as a frontend freelancer Wix Studio is probably something I should have in my toolkit (or at least be familiar with) rather than just focusing on WordPress.

[@bmehder]

Never thought I would watch a 3 hour video, but I did it, and I am happy I did. A headless CMS like Wix Studio is what I need for 95% of my projects, and I had no idea it existed.

[@JeroenReumkens]

Great seeing you using Astro! Such a wonderful framework. Loved the video!

[@georgigalechyan4392]

Большое спасибо! Интересно смотреть какие подходы к написанию и организации когда вы используете. Мне нравится ваш стиль кодирования и подача информации.

[@markuskopter]

2:01:17 I think it's a good practice to render mobile navigation links with padding instead of gap and margin to enlarge the touchable area of the nav items. So you won't run into the problem that you have to tap precisely on the text to select a link.

[@koppdotwork]

Please do more content on Astro, its amazing

[@ilikeygreenshoes]

New subscriber - Thanks Kevin. I am finding your videos to be really helpful in my learning and I have already started implementing some of these ideas into my learning projects (and for the stuff that goes over my head - I know where to come back to). From a trainee dev - keep up the great work, it is so very appreciated!!

[@joaquingarcia7075]

Great content! Keep going with this kind of videos related to headless CMS using JavaScript frameworks!

[@melvillespence6768]

Astro is good tool that should be in a web dev’s toolbox. The methodology for componentising a design, works equally well for say, Laravel blade components, or Vue, React etc.

[@mieras]

More Astro! 🎉 But with Sanity 😎

[@frozentoy4209]

1:31:00 - section-spacer with clamped margin values maybe? section-spacer-sm. section-spacer-m section-spacer-xl . Just to clearly separate it from the normal element...

[@amynagtegaal6941]

About the browser support thing.. i always build the layout with stuff that are supported by older browsers and stuff, and then i make it pretty with the modern stuff, i do that with everything that is part of my organization and every child-organization and my own personal projects. I do this because i want to use the modern features so that i know how to use them.. and often i can get things prettier way easier, but without ruining the usability

[@SavanSanandiya-p5y]

Loved the video! Make a video on how to reduce LCP and FCP.

[@everurstruly]

Kevin had 400k+ followers the last time I was here. I'm very happy he didn't quit and kept growing ❤️

[@Username-em1oe]

You're a great teacher

[@kennethauwers1448]

Would be nice to see a video of Astro + Directus. And also how you would deploy these kind of solutions.

[@jrcologne2663]

Great video, thanks. :) Did you have a particular reason for using an unordered list (ul) rather than an ordered list (ol) for the popular articles component as it's meant to be ordered by popularity of the article and you used the counter to visually display the order?

[@jonathanliu-chan238]

Hi Kevin, thank you very much for this. Would you consider doing a follow up video of how and where to deploy this site. Thanks again

[@thatanimeweirdo]

Was looking forward to see how Wix Headless works, because I do appreciate some of their UI for the website builder... But wow does it look dated and directionless.

[@gabrielhartley5213]

I'm loving this tutorial so far and am excited about what this means for my future web page development, but I'm running into problems with VSCode scripting. Do you have this COMPLETE CODE AVAILABLE somewhere so that I can see where I ran into problems? I've gone back and forth several times but can't see what is probably a simple mistake on my part. Thanks for all of your videos!

[@gabrielhartley5213]

So far I've narrowed my problem down to the grid-column 2/3 in the .base-layout CSS, which shifts everything over to the right, leaving an empty column on the left. 1/3 seems to work so far, but that might cause other problems down the line..

[@junsu-ho]

Kevin GURU or Advanced challenge in the near future, please please please! I watch others youtuber sometimes and they are just sloppy when it comes to CSS, you're the👑 xD so make my wish come true Kevin 🙏

[@darealmexury]

No need to hate on Kevin, good video.

[@francisanyuru9286]

Kevin shines so bright!

[@palockocz]

Good video. I am using Astro but with Sanity CMS.

[@underroad]

I have great things about Sanity CMS. Do you know of any good tutorials for using Sanity CMS with Astro? Thanks!

[@palockocz]

@@underroad Unfortunately, no youtuber is taking Sanity CMS to any depth and if they are, they are paid. However, the documentation is good and most things can be found there.

[@underroad]

@@palockocz damn! I will look at the docs. Thanks!

[@mieras]

kzbin.info/www/bejne/p3bXhWWslMiEp5o

[@davidllanes1019]

Hey, great video!! I have a genuine question. Isn’t it bad idea using containing queries everywhere when there is no a fallback to media queries? What would happen if the user is accessing the web page in a not supported web browser?

[@knolljo]

Thanks for the video, it was fun to code along with you :D I might have found a bug in the mobile menu, when opening the hamburger and then clicking on a link to another site the hamburger doesn't work on the next site. I've tried this with creating an about.astro site and then referring to it in one of the anchors.

[@DonSepe]

Visually hidden can be defined as screen-reader (--sr-text)

[@davidllanes1019]

Why using .flow instead of flex and gap?

[@aaaa9r]

great video!

[@junsu-ho]

what FONT do you use for VS CODE Kevin?

[@SuperGylden]

Wouldn't it be possible to use popover for the hamburger menu and get the builded in functionality? Great video btw

[@YuukaleNarmo02]

Kevin, won't the visually-hidden class be a problem for SEO?

[@KevinPowell]

Not at all. It's all accessible, and if anything, more human readable links and better page structure with proper headings, etc is better for SEO

[@clevermissfox]

Is all of the styling just in one file of style.css ? Or is there something like css modules where you import a stylesheet for each component

[@francisanyuru9286]

Rare framework video am curious!

[@HuynhLuong227]

wow, thanks for sharing, I want ask you, Wix Stuido free for all?

[@fullpreteristnow]

Why would you create a slug in the backend when you can just slugify the title which you already have?

[@diegoalvarez437]

Hi Kevin. I have a question. What'd be the difference of using 3 columns with flexbox, each one with width of 100% and a max-width of X pixels or percentages according to the layout, with flex wrap, and then for mobile, flex direction to column and problem solved, instead of using grid with all that stuff going on? Just wondering. Is it a matter of performance or thinking in terms of escalating the project?

[@KOBE42__]

He’s covered this in a relatively recent video. Grid is easier and you do everything on the parent.

[@itssgokul]

I can't find a video about .env in the descriptions and your channel

[@Username-em1oe]

Don't listen to the people moaning about Wix. You're making great content that makes learning about coding more accessible. Hopefully you make more long form tutorials! I love seeing your workflow.

[@junsu-ho]

2:23:58 MASSIVE BUG! it doesn't search in the query by the name 'featured', but by Field ID which is boolean and cannot be changed ...

[@CookiesAndCremation]

If you don't have a backend look for some headless CMS's for Astro. They work well and work right in git so you don't need to actually pay for a backend or wix.

[@robinheyer708]

35:41 Iagree, Kevin. Ialso think the future of the web 3.0 is not going to be that header!

[@germantoenglish898]

Where is the best place to host such a project? Astro/wix studio

[@twoplustwoequals5733]

why this inverted section/class is not separated component? while others parts of layout are ??? confusing man 🤔

[@junsu-ho]

you should block vertical scrolling when menu is open on small screen 🤖

[@Maxelya]

About that h1 at 34:00 : On a design I was to integrate, I noticed most sections missed an h2 and figured out I could use a sr-only/visually-hidden class to have some kind of implicit title for sections or pages even when absent on the original design, making the purpose of these sections more apparent for any screen reader users... but I was forced to remove those after my colleagues warned me about how this could be considered as an attempt at exploiting and abusing Google bots and artificially boost SEO. The thing is that, as far as accessibility is concerned, I still believe this to be an elegant solution... but I can't afford to risk a client's SEO potential on it. Any takes on the matter ? Edit: I ask Gemini about this and it confirmed that this could be identify as malevolent Seo manipulation and recommended using aria-label for sections... which is (barely) fine for sections but doesn't work for a page title.

[@Vmungai]

Hey everyone, I had a slight issue deploying to vercel after using the Wix Headless cms, I got stack trace errors. Did anyone encounter the same issue? Anyone with a solution?

[@junsu-ho]

why do you use custom properties in custom properties? LOL how is that not confusing for you 🤔

[@stallswan]

Hi kevin. Wondering if you could help. I purchased Learn JavaScript from Zell based on your recommendation and the course login doesn't work nor is there any contact or help page. Did I get scammed? Does anyone know how to get in contact with this guy Zell?

[@KevinPowell]

That's strange. He's very much active still! I'm in touch with him, I'll show him this 😊

[@stallswan]

@@KevinPowell all good thanks. He finally responded.

[@junsu-ho]

love that insecure laugh when he is not sure if it's going to work, but find it does xD

[@SousenOficial]

Kevin you kill me using Wix... i have to block this video jajaja because you are my PRO using Css but use something like Wix is like drungs n kids to play.

[@alexpanteli3651]

Typo in the title

[@KevinPowell]

Thanks, took me a minute to notice even after you mentioned it, I appreciate that :)

[@alexpanteli3651]

@@KevinPowell code reviewing makes you spots things like that easily :)

[@kvngevo]

Someone reffered me I'm early on this one 😅

[@alexway101]

It's sad. Normally I just click "don't recommend this channel" if it promotes Wix (independently if it's drag and drop or something else) or similar rubbish. Promoting such tools is a bad thing for ecosystem. Of course it won't happen to your channel. But since now definitely less trust to you when you recommend other tools.

[@rafaeldias8671]

First 🤪

[@hyperpocket.]

Mistake Wix studio

[@KevinPowell]

Thanks!

[@ember2081]

I wouldn't think bad of anyone for using Wix (it seems like a good tool) but the company is unfortunately based in Israel and wholeheartedly supports the ongoing offense against Palestine

[@maitre999]

NPC spotted

[@ember2081]

@@maitre999 those are just the facts dude, I'm not making claims against Kevin here

[@Victor-dd7el]

Then build you a better tool in the place you want

[@deiov]

ur sooo right and even elementor for wordpress is based in the apatheid regime, honestly it sucks that so much of tech is laced with apartheid and genocide in palestine- they do have big advertising money as usual. and even tech wise, theyre not that good... just unfoun popular.

[@essaadi_elmehdi6784]

Just wanted to say that, thanks. We are humans (read it again guys.)

[@dotak9663]

why to choose Astro

[@diegoalvarez437]

To create a web with a little of dynamism and good performance. You can use React or Vue on it if you want to.

[@mrgamerzyt3945]

bycott wix

[@deiov]

unfortunate being wix is the sponsor, it really shouldn't be one as endorsing the genocide little girls and mothers, and fathers, and granparents isn't by the israeli apartheid in palestine is horrfic, even if that's what tech endorses. not even 'hate', and if this fact concerns someone, that speaks volumes. People look up to you, and that comes with responsbility... a very bare minimum responsblity at the very least.

[@codernerd7076]

Include paid promotion.... disappointed to see you promote products of this company 😢

[@KevinPowell]

Wix Studio is a branch of Wix, but it's not the drag and drop editor that you're thinking of by any stretch. I'm honestly impressed with what they're bringing to the table on that end of things, otherwise I wouldn't have

[@angeloduqueee]

first? :>

[@arbijridi3112]

good but you using wix which is from israel so no

[@CulturalToast]

The dumbest people get influenced by politics the most

[@matheuspegorari1094]

Get a life

[@TheThirdWorldCitizen]

Wow that’s unfortunate, I now dislike Wix more

[@babymaker8986]

I will now use wix more

[@velocibadgery]

@@babymaker8986 When supporting genocide specifically draws you in as a customer, you might be a horrible person.

[@jaydeep-p]

Bruh, wix doesn't represent is**el or its actions... Stop hating on it lol

[@MisterSabazius]

I mean, a member of staff at Wix leaked an internal memo they sent around instructing employees to make pro-Israel posts on their personal social media accounts, which they reckoned would be effective because "unlike the Gazans, we look and live like Europeans or Americans", so... they have a pretty clear pro-Israel stance as a company.

[@ember2081]

they explicitly support Israel's actions in a LinkedIn post from 10mo ago

[@maitre999]

​@@ember2081 Mental

[@1337ghomri]

Yes they do. They fired employees for privately speaking supporting Palestine and speaking up against actions of IDF in Gaza.

[@choanlpoto]

@@ember2081 wow sick; good to know !

[@lyon-dev]

That's the KZbin super Premium?

[@mirimjam]

@face-face