Check out Wix Studio 👉 https://www.wix.com/studio/cms

🔗 Links 
✅ The Frontend Mentor challenge: https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl
✅ Getting started with npm: https://youtu.be/UYz-9UaUp2E
✅ Astro: https://astro.build/
✅ Wix Studio: https://www.wix.com/studio/cms
✅ Wix Studio headless docs: https://dev.wix.com/docs/sdk/backend-modules/data/introduction
✅ More on using @font-face: https://youtu.be/zK-yy6C2Nck
✅ More on font-display: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
✅ More on visually-hidden: https://www.a11yproject.com/posts/how-to-hide-content/
✅ More robust version of the .base-layout: https://youtu.be/c13gpBrnGEw
✅ Container queries: https://youtu.be/2rlWBZ17Wes
✅ Counters: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters

Get a YT membership: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

⌚ 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
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
📽️ Join as a channel member: https://youtube.com/@KevinPowell/join
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!

Kevin Powell

Learn how to elevate a single-page design from Frontend Mentor into a multi-page blog powered by a headless CMS. This guide covers starting with design analysis, building out with Astro, and connecting to Wix Studio's headless CMS to effortlessly manage new posts. The course provides modern CSS techniques and step-by-step instructions for significant enhancements and structuring content dynamically.

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

This guide was just what I needed.

Hi Kevin,
I’m eagerly waiting for a Astro + WordPress headless CMS video…
Can we also somehow incorporate MemberPress or WooCommerce’s features and funtions with Astro…?

i understand WHY they do it but i really wish these devs would stop doing paid sponsorship tutorials. i have ZERO interest in tutorials that use proprietary services (most of which eventually require money from you).
teach how to do that stuff WITHOUT the crutch. teach us HOW to make the stuff you want us to pay for (and that you get paid to push). it’s gross and it’s why i’ve unsubbed from MANY of the devs i have been following.
i get it. money is yummy. but please, respect the audience that put you here.