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

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

Kevin Powell via YouTube Direct link

- The visually-hidden class

11 of 41

11 of 41

- The visually-hidden class

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - Getting the assets and a quick look at the design
  3. 3 - Getting started with Astro
  4. 4 - Exploring what Astro starts us with and adding the assets
  5. 5 - Creating a template layout
  6. 6 - Creating and importing our CSS file
  7. 7 - Thinking about how we'll organize our page
  8. 8 - General styling with CSS
  9. 9 - Creating the header
  10. 10 - Scroped styling in Astro
  11. 11 - The visually-hidden class
  12. 12 - Styling the navigation more on this later
  13. 13 - The featured article
  14. 14 - Heading levels and their impact
  15. 15 - Read more buttons are bad
  16. 16 - Using grid instead of a .container or .wrapper
  17. 17 - Improving the styling of the featured article
  18. 18 - Styling the button
  19. 19 - Adding spacing
  20. 20 - Creating the three columns
  21. 21 - Passing a class into a component
  22. 22 - Improving the breakpoints
  23. 23 - Adding the three articles on the bottom
  24. 24 - Using a counter for the numbers
  25. 25 - Spacing things out
  26. 26 - Styling the inverted section
  27. 27 - Styling heading links
  28. 28 - Skip to main
  29. 29 - Creating the mobile version of the navigation
  30. 30 - Getting started with Wix Studio for the headless CMS
  31. 31 - Adding a content collection to the CMS
  32. 32 - Connecting Wix Studio's headless CMS to our Astro project
  33. 33 - Getting our articles from Wix Studio
  34. 34 - What we get from our fetchArticles function
  35. 35 - Adding an option for how many articles to fetch
  36. 36 - Adding a featured article filter
  37. 37 - Pulling the featured article into our site
  38. 38 - Generating pages for each article
  39. 39 - Creating a list of articles
  40. 40 - Limiting the amount of lines of text with CSS
  41. 41 - Bringing in content for the bottom articles

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.