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

🔗 Links

Get a YT membership: Join this channel to get access to perks:

⌚ Timestamps
00:00 - Introduction
00:39 - Getting the assets and a quick look at the design
02:47 - Getting started with Astro
05:08 - Exploring what Astro starts us with and adding the assets
07:52 - Creating a template layout
12:44 - Creating and importing our CSS file
14:12 - Thinking about how we'll organize our page
19:17 - General styling with CSS
32:20 - Creating the header
37:40 - Scroped styling in Astro
40:05 - The visually-hidden class
41:03 - Styling the navigation (more on this later)
42:18 - The featured article
45:23 - Heading levels and their impact
47:30 - Read more buttons are bad
48:57 - Using grid instead of a .container or .wrapper
52:54 - Improving the styling of the featured article
57:15 - Styling the button
1:00:45 - Adding spacing
1:03:19 - Creating the three columns
1:08:18 - Passing a class into a component
1:12:01 - Improving the breakpoints
1:14:49 - Adding the three articles on the bottom
1:22:16 - Using a counter for the numbers
1:26:51 - Spacing things out
1:31:58 - Styling the inverted section
1:41:36 - Styling heading links
1:45:41 - Skip to main
1:49:53 - Creating the mobile version of the navigation
2:06:26 - Getting started with Wix Studio for the headless CMS
2:07:25 - Adding a content collection to the CMS
2:11:05 - Connecting Wix Studio's headless CMS to our Astro project
2:14:33 - Getting our articles from Wix Studio
2:17:07 - What we get from our fetchArticles() function
2:20:49 - Adding an option for how many articles to fetch
2:22:12 - Adding a featured article filter
2:24:33 - Pulling the featured article into our site
2:28:00 - Generating pages for each article
2:36:30 - Creating a list of articles
2:40:16 - Limiting the amount of lines of text with CSS
2:42:33 - Bringing in content for the bottom articles

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[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 Youtube I've watched in a very long time.

[johnjobling]

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.

[JeroenReumkens]

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

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

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

[Username-emoe]

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.

[georgigalechyan]

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

[koppdotwork]

Please do more content on Astro, its amazing

[joaquingarcia]

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

[melvillespence]

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.

[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!!

[darealmexury]

No need to hate on Kevin, good video.

[amynagtegaal]

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

[jrcologne]

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?

[frozentoy]

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 <section> element...

[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 🙏

[SavanSanandiya-py]

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

[gabrielhartley]

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!

[jonathanliu-chan]

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

[davidllanes]

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?