Creating a Blog with Astro and Wix Studio Headless CMS - Full Course

Overview

Embark on a comprehensive 3-hour course that guides you through creating a blog using a headless CMS with Astro and Wix Studio. Learn essential web development concepts, from setting up Astro and organizing your project to implementing responsive designs and integrating a headless CMS. Master techniques like CSS grid layouts, mobile navigation, and dynamic content generation. Explore advanced topics such as accessibility, performance optimization, and content management using Wix Studio's headless CMS capabilities. By the end of this course, gain the skills to build a fully functional, responsive blog with dynamically generated content and improved user experience.

Syllabus

- Introduction
- Getting the assets and a quick look at the design
- Getting started with Astro
- Exploring what Astro starts us with and adding the assets
- Creating a template layout
- Creating and importing our CSS file
- Thinking about how we'll organize our page
- General styling with CSS
- Creating the header
- Scroped styling in Astro
- The visually-hidden class
- Styling the navigation more on this later
- The featured article
- Heading levels and their impact
- Read more buttons are bad
- Using grid instead of a .container or .wrapper
- Improving the styling of the featured article
- Styling the button
- Adding spacing
- Creating the three columns
- Passing a class into a component
- Improving the breakpoints
- Adding the three articles on the bottom
- Using a counter for the numbers
- Spacing things out
- Styling the inverted section
- Styling heading links
- Skip to main
- Creating the mobile version of the navigation
- Getting started with Wix Studio for the headless CMS
- Adding a content collection to the CMS
- Connecting Wix Studio's headless CMS to our Astro project
- Getting our articles from Wix Studio
- What we get from our fetchArticles function
- Adding an option for how many articles to fetch
- Adding a featured article filter
- Pulling the featured article into our site
- Generating pages for each article
- Creating a list of articles
- Limiting the amount of lines of text with CSS
- Bringing in content for the bottom articles