Kevin Powell | Create a blog with a headless CMS // Full 3-hour course // Astro + Wix Studio @KevinPowell | Uploaded September 2024 | Updated October 2024, 4 minutes ago.
Check out Wix Studio 👉 wix.com/studio/cms
🔗 Links
✅ The Frontend Mentor challenge: frontendmentor.io/challenges/news-homepage-H6SWTa1MFl
✅ Getting started with npm: youtu.be/UYz-9UaUp2E
✅ Astro: https://astro.build/
✅ Wix Studio: wix.com/studio/cms
✅ Wix Studio headless docs: dev.wix.com/docs/sdk/backend-modules/data/introduction
✅ More on using @font-face: youtu.be/zK-yy6C2Nck
✅ More on font-display: developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
✅ More on visually-hidden: a11yproject.com/posts/how-to-hide-content
✅ More robust version of the .base-layout: youtu.be/c13gpBrnGEw
✅ Container queries: youtu.be/2rlWBZ17Wes
✅ Counters: 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:
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
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
📽️ Join as a channel member: youtube.com/@KevinPowell/join
💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
Check out Wix Studio 👉 wix.com/studio/cms
🔗 Links
✅ The Frontend Mentor challenge: frontendmentor.io/challenges/news-homepage-H6SWTa1MFl
✅ Getting started with npm: youtu.be/UYz-9UaUp2E
✅ Astro: https://astro.build/
✅ Wix Studio: wix.com/studio/cms
✅ Wix Studio headless docs: dev.wix.com/docs/sdk/backend-modules/data/introduction
✅ More on using @font-face: youtu.be/zK-yy6C2Nck
✅ More on font-display: developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
✅ More on visually-hidden: a11yproject.com/posts/how-to-hide-content
✅ More robust version of the .base-layout: youtu.be/c13gpBrnGEw
✅ Container queries: youtu.be/2rlWBZ17Wes
✅ Counters: 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:
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
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
📽️ Join as a channel member: youtube.com/@KevinPowell/join
💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
